Flutter中FormKey报'Null check operator used on a null value'错误的解决

核心错误点 #

你这段代码的问题出在FormKey的使用方式完全错误：

• 你把GlobalKey<FormState>直接赋值给了TextFormField的key参数，但FormKey必须绑定在Form组件上，用来管理整个表单的状态
• 因为没有用Form包裹输入框，_formKey.currentState始终为null，点击按钮时用!强制解包就会抛出"Null check operator used on a null value"错误

修复步骤 #

1. 用Form组件包裹所有需要验证的输入框，并把_formKey赋值给Form的key参数
2. 移除TextFormField上的key: _formKey（输入框不需要这个全局key）
3. 可选优化：验证通过后可以调用_formKey.currentState?.save()触发输入框的onSaved逻辑，替代直接操作控制器取值

修复后的完整代码 #

class MyHomePage extends StatefulWidget{
  const MyHomePage({super.key});
  
  @override
  State<MyHomePage> createState(){
    return MyHomePageState();
  }
}
class MyHomePageState extends State<MyHomePage>{
  final _formKey = GlobalKey<FormState>();
  final TextEditingController qrController = TextEditingController();
  var inputUser = '';
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Generate QR code"),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: QrImage(
              data: inputUser,
              version: QrVersions.auto,
              size: 250,
              gapless: false,
              embeddedImage: const AssetImage('assets/images/pokeballimage.png'),
              embeddedImageStyle: const QrEmbeddedImageStyle(
                size: Size(10, 10),
                color: Colors.black87
              ),
            ),
          ),
          // 用Form组件包裹TextFormField，并绑定_formKey
          Form(
            key: _formKey,
            child: TextFormField(
              controller: qrController,
              keyboardType: TextInputType.text,
              validator: (value){
                if (value == null || value.isEmpty){
                  return 'Enter something';
                }
                return null;
              },
              onSaved: (value){
                // 直接在onSaved里赋值给展示变量
                inputUser = value!;
              },
              decoration: const InputDecoration(
                hintText: 'Enter smth'
              ),
            ),
          ),

          ElevatedButton(
            child: const Text('Submit'),
            onPressed: () {
              // 安全判断currentState是否存在，再执行验证
              if (_formKey.currentState?.validate() ?? false) {
                // 触发所有输入框的onSaved方法
                _formKey.currentState?.save();
                setState(() {
                  // 仅刷新UI即可，数据已通过onSaved更新
                });
              }
            },
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 永远避免用!强制解包可能为null的对象，优先用?.和??做安全处理
• Form组件是表单状态管理的核心，所有需要验证的输入控件必须放在Form内部
• onSaved方法可以统一处理表单数据，让代码逻辑更清晰

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