Flutter中TextFormField输入内容跳转下一页面无法显示如何解决

通过TextFormField获取客户编号输入，计划跳转到新页面展示输入的编号，实际运行时新页面仅显示固定前缀文本Showing Results for，输入的客户编号完全没有展示。

第一页输入组件代码：

Widget build(BuildContext context) {
  final searchRecordField = TextFormField(
    autofocus: false,
    keyboardType: TextInputType.number,
    controller: customerNumber,
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.phone),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Enter Customer Number",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  );

结果页代码：

return Scaffold(
    body: Container(
      child: (
        Text("Showing Results for ${customerNumber.text.toString()}",
        style: TextStyle(
          color: Colors.black12, fontSize: 24, fontWeight: FontWeight.bold),
      ),
    ),
  ),
);

• 跨页面直接引用上一页面的TextEditingController属于错误用法：TextEditingController是页面局部状态对象，页面跳转后如果上一页面从路由栈移除，控制器会被内存回收，新页面无法稳定获取到控制器持有的文本值；就算上一页面未被回收，直接跨页引用其他页面的状态也很容易拿到初始化的空值，而非用户输入后的最新值。
• 文本颜色设置错误：代码中给展示文本设置的Colors.black12是透明度仅12%的浅黑色，在默认白色页面背景下几乎完全透明，就算文本正常渲染，肉眼也几乎看不到内容，很容易被误判为内容未加载。

1. 页面跳转时主动传递参数，不要跨页直接拿控制器。在第一页触发跳转的逻辑中，读取控制器当前的输入值，作为路由参数传给结果页：

// 跳转触发逻辑示例（写在第一页的提交按钮点击回调中）
Navigator.push(
  context,
  MaterialPageRoute(
    // 把输入的客户编号作为参数传给结果页构造函数
    builder: (context) => ResultPage(inputCustomerNo: customerNumber.text.trim()),
  ),
);

2. 改造结果页，新增入参接收传递过来的客户编号，替换原来直接引用跨页控制器的写法，同时修正文本颜色为可见的实色：

class ResultPage extends StatelessWidget {
  // 定义入参接收传递过来的客户编号
  final String inputCustomerNo;
  const ResultPage({super.key, required this.inputCustomerNo});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(24),
        child: Text(
          "Showing Results for $inputCustomerNo",
          style: TextStyle(
            // 替换几乎不可见的Colors.black12为实色黑色
            color: Colors.black,
            fontSize: 24,
            fontWeight: FontWeight.bold
          ),
        ),
      ),
    );
  }
}

补充提示：如果项目使用命名路由，同样通过路由配置的arguments字段传值即可，不要在多个页面间直接互相引用对方的控制器、State类等局部状态对象，这类写法会导致页面耦合度极高，后续状态更新很容易出现异常。

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