Flutter如何实现TextFormField输入变化时实时显示对应输出值

修正方案 #

1. 首先修正Judul函数的语法错误与返回逻辑，原函数仅打印内容无字符串返回，且末尾else语句存在语法问题，修正后代码如下：

String Judul(String value) {
  if (value == '1') {
    return 'one';
  } else if (value == '2') {
    return 'two';
  } else if (value == '3') {
    return 'Three';
  } else if (value == '4') {
    return 'Four';
  } else if (value == '5') {
    return 'Five';
  } else if (value == '6') {
    return 'Six';
  } else if (value == '7') {
    return 'Seven';
  } else {
    return 'null';
  }
}

2. 确保当前页面为StatefulWidget，修改TextFormField的onChanged回调，输入内容变化时触发UI重绘：

TextFormField(
  onChanged: (value) => setState(() {}),
  controller: _pls,
  decoration: InputDecoration(hintText: "Nomor Tujuan"),
  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly
  ],
)

3. 将所有调用Judul函数的位置的入参替换为输入框控制器的实时值_pls.text，比如：

// 原Judul('')、Judul('value')全部替换为以下写法
Align(
  alignment: Alignment.centerLeft,
  child: Text(
    Judul(_pls.text)
  )
),

修改完成后输入框内容变化时，对应展示的文本就会同步更新。

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