Flutter - 如何实现一个电子邮件 TextFormField 小部件以在多个屏幕中使用？答案

【问题标题】：Flutter - How implement one E-Mail TextFormField widget for using in multiple screens?Flutter - 如何实现一个电子邮件 TextFormField 小部件以在多个屏幕中使用？
【发布时间】：2020-07-12 07:06:46
【问题描述】：

我正在开发一个带有注册、登录和重置密码屏幕的应用程序。在所有这些屏幕中，用户必须输入他的电子邮件地址。现在我不会为每个屏幕实现电子邮件地址文本字段。所以我将为每个屏幕实现一个电子邮件文本字段小部件，如下面的代码。

import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';

class EMailTextFormField extends StatefulWidget {

  @override
  _EMailTextFormFieldState createState() => _EMailTextFormFieldState();
}

class _EMailTextFormFieldState extends State<EMailTextFormField> {
  final _email = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0),
      child: TextFormField(
        decoration: InputDecoration(
          icon: Icon(Icons.email, size: IconTheme.of(context).size, color: IconTheme.of(context).color),
          labelText: 'E-Mail...',
          counterText: '',
        ),
        keyboardType: TextInputType.emailAddress,
        controller: _email,
        validator: _validateEmail,
        maxLength: 70,
      ),
    );
  }

  String _validateEmail(String email) {
    // validate E-Mail function...
  }
}

我现在的问题是我不能在不同屏幕（注册、登录和重置密码）中使用此小部件之外的 TextEditingController (_email)，例如：

final FirebaseUser user = (await _auth.createUserWithEmailAndPassword(
                  email: _email.text.toString(), password: _password.text.toString())).user;

错误是“未定义名称 _email”，因为 _email TextEditingController 在 EMailTextFormField 小部件中，但是我如何将 EMailTextFormField 小部件中的 _email 字段的值提供给其他屏幕（注册、登录和重置密码）？

谁能帮帮我，我目前没有找到解决办法。

【问题讨论】：

你测试过我的解决方案了吗？
是的，我已经测试了您的解决方案。它工作完美，谢谢你的出色工作。 :)
不错！欢迎你:)

标签： email flutter dart firebase-authentication

【解决方案1】：

您可以使用onSaved 回调来执行此操作。

EMailTextFormField：

class EMailTextFormField extends StatefulWidget {

  final void Function(String email) onSaved;

  const EMailTextFormField({Key key, this.onSaved}) : super(key: key);

  @override
  EMailTextFormFieldState createState() => EMailTextFormFieldState();
}

class EMailTextFormFieldState extends State<EMailTextFormField> {
  final _email = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0),
      child: TextFormField(
        decoration: InputDecoration(
          icon: Icon(Icons.email, size: IconTheme.of(context).size, color: IconTheme.of(context).color),
          labelText: 'E-Mail...',
          counterText: '',
        ),
        keyboardType: TextInputType.emailAddress,
        controller: _email,
        validator: _validateEmail,
        maxLength: 70,
        onSaved: widget.onSaved, //callback
      ),
    );
  }

  String _validateEmail(String email) {
    // validate E-Mail function...
  }
}

您将使用 EMailTextFormField 的页面：

class EmailPage extends StatefulWidget {
  EmailPage({Key key}) : super(key: key);

  @override
  _EmailPageState createState() => _EmailPageState();
}

class _EmailPageState extends State<EmailPage> {

  String _email;

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Email Page'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            EMailTextFormField(
              onSaved: (String email) => _email = email,
            ),
            RaisedButton(
              child: Text('Go'),
              onPressed: (){
                if (_formKey.currentState.validate()) {
                  _formKey.currentState.save();

                  print(_email);
                }
              },
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：