Flutter 3中TextField控制器text为空问题求助

问题根源 #

你在loginToFirebase方法中每次调用FormSection()都会生成一个全新的FormSection实例，这个新实例的控制器和UI上用户输入的TextField绑定的控制器不是同一个，自然拿不到输入内容。

解决方案 #

1. 复用FormSection实例，直接访问控制器

在LoginPage的State中提前初始化FormSection实例，而不是在登录方法中临时创建：

class LoginPageState extends State<LoginPage> {
  // 提前初始化FormSection，确保和UI使用同一个实例
  final _formSection = FormSection();

  void loginToFirebase() {
    // 直接访问已有实例的控制器文本
    final email = _formSection.emailController.text;
    final password = _formSection.passwordController.text;
    
    // 打印验证，此时能拿到用户输入
    print('邮箱：$email，密码：$password');
    
    // 这里执行Firebase登录和数据库校验逻辑
    if (email.isNotEmpty && password.isNotEmpty) {
      // 调用Firebase Auth API
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 使用同一个_formSection实例的输入框
          _formSection.emailField,
          _formSection.passwordField,
          ElevatedButton(onPressed: loginToFirebase, child: const Text('登录'))
        ],
      ),
    );
  }
}

同时修改FormSection，确保控制器是类成员变量，且输入框绑定该控制器：

class FormSection {
  // 公开控制器，让LoginPage可以直接访问
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  // 绑定控制器的输入框
  Widget get emailField => TextField(
        controller: emailController,
        decoration: const InputDecoration(labelText: '邮箱'),
        keyboardType: TextInputType.emailAddress,
      );

  Widget get passwordField => TextField(
        controller: passwordController,
        decoration: const InputDecoration(labelText: '密码'),
        obscureText: true,
      );
}

2. 更规范的方案：使用Form组件+GlobalKey

如果你的表单需要校验逻辑，推荐使用Flutter的Form组件配合GlobalKey，这种方式更符合Flutter表单设计规范：

class LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  String? _email;
  String? _password;

  void loginToFirebase() {
    // 先验证表单合法性
    if (_formKey.currentState!.validate()) {
      // 保存表单输入值到变量
      _formKey.currentState!.save();
      
      print('邮箱：$_email，密码：$_password');
      
      // 执行Firebase登录和数据库校验
      if (_email != null && _password != null) {
        // 调用Firebase Auth
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: const InputDecoration(labelText: '邮箱'),
              keyboardType: TextInputType.emailAddress,
              // 表单验证规则
              validator: (val) => val?.isEmpty == true ? '请输入邮箱' : null,
              // 保存输入值
              onSaved: (val) => _email = val,
            ),
            TextFormField(
              decoration: const InputDecoration(labelText: '密码'),
              obscureText: true,
              validator: (val) => val?.isEmpty == true ? '请输入密码' : null,
              onSaved: (val) => _password = val,
            ),
            ElevatedButton(onPressed: loginToFirebase, child: const Text('登录'))
          ],
        ),
      ),
    );
  }
}

关键注意点 #

• 永远不要在方法内部临时创建包含控制器的Widget实例，必须复用同一个实例才能获取到正确的输入内容。
• 如果使用Form组件，onSaved回调是安全获取输入值的推荐方式，同时配合validator可以做前端校验。

内容的提问来源于stack exchange，提问作者user20419120