Flutter移动端TextField数字输入异常、切换焦点后自动清空问题求助

问题修复方案 #

问题1：配置数字键盘的TextField无法直接输入数字 #

• 根因：你使用的WhitelistingTextInputFormatter已经在Flutter 2.0+版本中被弃用，同时部分移动端原生数字键盘默认开启小数输入模式，和仅允许整数的格式化规则冲突，首次输入的数字会被规则拦截，只有先输入符号类内容通过校验后，后续输入的数字才能正常被识别。
• 修复方案：
  1. 将输入格式化器替换为官方新版的FilteringTextInputFormatter.digitsOnly
  2. 数字输入框的键盘类型修改为TextInputType.numberWithOptions(decimal: false)，强制关闭小数输入模式，避免和格式化规则冲突
     修复后的核心代码片段：

  TextField(
    controller: TFNik,
    keyboardType: TextInputType.numberWithOptions(decimal: false),
    inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'NIK',
        hintText: 'Enter valid NIK'),
  )
  

问题2：切换TextField后首个输入框内容自动清空 #

• 根因：你当前的TFNik、TFPassword两个TextEditingController实例是定义在Widget的build方法内部的，每次页面触发重绘（输入框焦点切换、键盘弹出收起都会触发重绘）时，都会重新创建新的Controller实例，旧实例绑定的输入内容就会丢失。Web端的重绘触发逻辑和原生端有差异，因此不会出现该问题。
• 修复方案：
  1. 将两个Controller的定义移到StatefulWidget对应的State类中，作为类的成员变量，不要放在build方法内
  2. 重写State类的dispose方法，在页面销毁时释放Controller资源，避免内存泄漏
     修复后的核心代码片段：

  class YourPageState extends State<YourPage> {
    // 把Controller定义在State类内部、build方法外
    final TFNik = TextEditingController();
    final TFPassword = TextEditingController();
  
    @override
    void dispose() {
      // 页面销毁时释放资源
      TFNik.dispose();
      TFPassword.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      // 原有页面布局代码保持不变
      return Scaffold(
        // ...其余布局代码
      );
    }
  }
  

问题复现参考 #

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