Flutter中TextFormField通过Controller赋值后如何同步到普通Text组件

问题根因 #

1. 普通Text组件不会自动监听TextEditingController的文本变化，只有绑定了该controller的输入类组件会自动同步内容，Text的渲染内容仅在所在State执行build方法时更新。
2. 此前调用setState后controller失效属于用法错误，正确将状态变更包裹在setState回调中不会影响controller赋值。
3. newProfit返回null的原因：要么是该变量声明为了onSubmitted的局部变量，要么是作为State成员变量声明时没有给定初始值，首次build时未触发提交逻辑就会读取到null。

修复步骤 #

• 在State类中声明newProfit为成员变量并初始化初始值，不要写在build方法或局部回调中：

class _YourPageState extends State<YourPage> {
  final _profitController = TextEditingController();
  final _endProfitController = TextEditingController();
  double newProfit = 0.0; // 给定初始值避免首次渲染为null
  // 其余原有代码
}

• 修改onSubmitted回调，将所有状态变更逻辑包裹在setState中触发组件重绘：

onSubmitted: (val) {
  double amount = double.parse(selectedEntry.amount);
  double aktPrice = double.parse(val);
  double profit = aktPrice * amount;
  setState(() {
    _endProfitController.text = profit.toString();
    newProfit = profit;
  });
},

• 可选优化：修改Text组件的字符串拼接写法，用Dart内置的字符串插值更简洁，也可按需保留小数位数：

Text(
  'test profit: ${_endProfitController.text} ${newProfit.toStringAsFixed(2)} €',
  textAlign: TextAlign.left,
  style: TextStyle(
    fontSize: 20,
    color: Colors.grey[700],
  ),
),

额外优化 #

如果需要输入过程中实时同步而不是提交后才更新，可将onSubmitted回调替换为onChanged，输入时就会实时同步内容到TextFormField和Text组件。

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