Flutter获取TextFormField值回传页面空值错误如何解决？

错误原因 #

• GlobalKey拼写错误，代码中写成Global Key中间多了空格，会导致key实例初始化异常
• 全局表单key应该绑定在Form组件上，而不是TextFormField组件上，当前代码把_key放在了TextFormField上，调用_key.currentState!.save()时，currentState本身为null，触发空检查报错
• 未做表单校验，容易出现用户输入空内容直接提交的异常

修复步骤 #

1. 修正GlobalKey的拼写，去掉中间的空格
2. 将_key从TextFormField的属性移到Form组件的key属性上
3. 提交前先判断表单校验通过，再执行save操作和页面回退
4. 给username加可空标识，避免空赋值异常

修正后完整代码 #

import 'package:flutter/material.dart';
import 'package:mmitra/widgets/header.dart';
import 'home.dart';

class CreateAccount extends StatefulWidget {
  @override
  _CreateAccountState createState() => _CreateAccountState();
}

class _CreateAccountState extends State<CreateAccount> {
  // 改为可空类型避免空赋值异常
  String? username;
  // 修正GlobalKey拼写，去掉空格
  final _key = GlobalKey<FormState>();

  @override
  Widget build(BuildContext parentContext) {
    return Scaffold(
      appBar: header(context, titleText: 'Create Account'),
      body: ListView(children: [
        Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.only(top: 25),
                child: Center(
                  child: Text(
                    'Create a username',
                    style: TextStyle(fontSize: 25.0),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(16.0),
                // 把key绑定到Form组件上
                child: Form(
                  key: _key,
                  child: TextFormField(
                    onSaved: (val) => username = val,
                    // 增加验证逻辑
                    validator: (val) {
                      if(val?.trim().isEmpty ?? true || val!.trim().length <3) {
                        return "用户名至少需要3个字符";
                      }
                      return null;
                    },
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelStyle: TextStyle(fontSize: 15),
                        labelText: 'Username',
                        hintText: 'Must be at least 3 Characters'),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  // 先校验再保存再返回
                  if(_key.currentState?.validate() ?? false) {
                    _key.currentState!.save();
                    Navigator.pop(context, username);
                  }
                },
                child: Container(
                  height: 50,
                  width: 300,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(7)),
                  child: Center(
                    child: Text(
                      'Submit',
                      style:
                          TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ]),
    );
  }
}

home.dart接收返回值示例 #

你在home.dart中跳转到CreateAccount页面的位置用async/await接收返回值即可：

// 跳转代码示例
void goToCreateAccount() async {
  final String? username = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => CreateAccount()),
  );
  // 拿到username后就可以执行Firebase创建文档的逻辑
  if(username != null) {
    // 写入你的Firebase操作逻辑
  }
}

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