如何构建依赖TextFormField输入值的Widget 解决Text组件空值报错问题

错误原因 #

• Dart 空安全规则下，你声明的String text没有赋初始值时默认值为null，但Text组件要求必须传入非空字符串作为参数，所以直接抛出异常。
• 直接修改text变量没有调用setState方法，即使赋值成功 UI 也不会触发刷新，无法展示最新输入内容。

正确实现方式 #

需要使用StatefulWidget，给变量设置初始值，修改值时调用setState触发 UI 更新，代码示例如下：

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // 给变量设置初始空字符串，保证永远非空
  String text = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
          child: TextFormField(
            // 如果需要输入实时更新可以换成onChanged回调
            onFieldSubmitted: (value) {
              // 调用setState更新状态，触发UI重绘
              setState(() {
                text = value;
              });
            },
          ),
        ),
        Text(text),
      ]
    );
  }
}

如果不需要等待用户点击提交，输入时就实时展示文本，把onFieldSubmitted替换为onChanged即可。

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