Flutter中使用formKey验证输入框时出现Unexpected null value异常的解决方法

我来帮你搞定这个空值异常的问题～首先咱们先分析一下报错的核心原因：

你遇到的Unexpected null value异常，是因为formKey.currentState为null的时候，你用!强制解包导致的。出现这种情况主要有两个关键原因，咱们逐一解决：

1. 先确认formKey是否正确初始化 #

首先要检查你在State类中是否正确声明并初始化了formKey，必须指定泛型并完成初始化：

// 请在你的State类中添加这行代码
final GlobalKey<FormState> formKey = GlobalKey<FormState>();

如果只是简单声明GlobalKey formKey;而没有指定泛型或初始化，currentState必然会是null，直接强制解包就会触发异常。

2. 安全调用表单验证，同时完善验证逻辑 #

你的现有代码还有两个小问题：一是调用validate()时没有先判断currentState是否存在；二是TextField没有添加验证规则，即使调用validate()也不会检查输入是否为空。

修复步骤： #

（1）给TextField添加验证规则

给每个TextField添加validator属性，实现空值检查：

TextField(
  controller: titleController,
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.title),
    hintText: 'write a title',
    labelText: 'Title',
    border: OutlineInputBorder(),
  ),
  // 添加标题空值验证
  validator: (value) {
    if (value == null || value.trim().isEmpty) {
      return 'Please enter a title';
    }
    return null;
  },
),
SizedBox(height: 15),
TextField(
  controller: timeController,
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.watch_later_outlined),
    hintText: 'write a time',
    labelText: 'Time',
    border: OutlineInputBorder(),
  ),
  onTap: () {
    showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    ).then((value) {
      if (value != null) {
        timeController.text = value.format(context);
      }
    });
  },
  // 添加时间空值验证
  validator: (value) {
    if (value == null || value.trim().isEmpty) {
      return 'Please select a time';
    }
    return null;
  },
),

（2）安全检查表单状态再执行验证

不要直接用!强制解包，先判断currentState是否存在，再调用验证：

onPressed: () {
  if (isBottomSheetShown) {
    // 先获取表单状态，判断不为null再执行验证
    final formState = formKey.currentState;
    if (formState != null && formState.validate()) {
      Navigator.pop(context);
      isBottomSheetShown = false;
      setState(() {
        fabIcon = Icons.edit;
      });
    }
  } else {
    // 弹出BottomSheet后监听关闭事件，修复状态不同步问题
    final bottomSheetController = scaffoldKey.currentState!.showBottomSheet(
      (context) => Container(
        color: Colors.grey[100],
        padding: const EdgeInsets.all(20),
        child: Form(
          key: formKey,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 上面修改后的两个TextField
            ],
          ),
        ),
      ),
    );
    // 监听BottomSheet关闭事件，自动更新状态
    bottomSheetController.closed.then((_) {
      isBottomSheetShown = false;
      setState(() {
        fabIcon = Icons.edit;
      });
    });
  }
  // 只有在弹出BottomSheet时才更新状态
  if (!isBottomSheetShown) {
    isBottomSheetShown = true;
    setState(() {
      fabIcon = Icons.add;
    });
  }
},

另外补充一个小优化：原来的代码中如果用户通过Back键关闭BottomSheet，isBottomSheetShown的状态不会自动更新，导致再次点击FAB时逻辑出错。上面的代码通过bottomSheetController.closed监听BottomSheet的关闭事件，自动同步状态，避免了这个问题。

这样修改后，既解决了空值异常的问题，也完善了输入验证和状态管理的逻辑～

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