Flutter如何根据TextFormField校验结果动态修改fillColor属性

你要的两种状态效果如下：

• 校验不通过时红底效果：
• 校验通过时绿底效果：

实现步骤 #

• 状态变量准备
  在承载输入框的State类中声明必要的状态，不需要引入额外状态管理库，用Flutter自带的State就能实现：

  // 输入框焦点监听
  late FocusNode _inputFocusNode;
  // 输入内容控制器
  late TextEditingController _inputController;
  // 当前输入是否符合校验规则
  bool _inputValid = false;
  // 是否已经触发过校验（比如点击提交按钮、用户失焦后）
  bool _validationTriggered = false;
  

• 初始化与监听绑定
  在initState生命周期中初始化变量，绑定输入内容的实时监听，同步更新校验状态：

  @override
  void initState() {
    super.initState();
    _inputFocusNode = FocusNode();
    _inputController = TextEditingController();
  
    // 实时监听输入内容更新校验结果
    _inputController.addListener(() {
      setState(() {
        // 替换为你自己的校验规则，比如邮箱正则、手机号校验、非空判断等
        _inputValid = _inputController.text.trim().length >= 6;
      });
    });
  }
  
  // 记得在dispose释放资源，避免内存泄漏
  @override
  void dispose() {
    _inputFocusNode.dispose();
    _inputController.dispose();
    super.dispose();
  }
  

• 输入框组件编写
  核心是在InputDecoration的fillColor属性中根据当前状态动态返回对应颜色，不需要重写整套校验逻辑：

  TextFormField(
    controller: _inputController,
    focusNode: _inputFocusNode,
    // 用户输入时自动触发校验
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: (value) {
      // 首次触发校验时更新标记
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (!_validationTriggered) {
          setState(() {
            _validationTriggered = true;
          });
        }
      });
      if (value?.trim().length == null || value!.trim().length < 6) {
        return '输入内容长度不能少于6位';
      }
      return null;
    },
    decoration: InputDecoration(
      filled: true,
      // 动态计算填充色
      fillColor: _calculateFillColor(),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide.none,
      ),
      hintText: '请输入内容',
      // 错误文字可以根据背景色调整对比度
      errorStyle: const TextStyle(color: Colors.white, fontSize: 12),
    ),
  )
  

• 颜色判断逻辑
  单独抽离颜色判断方法，后续调整样式更方便：

  Color _calculateFillColor() {
    // 已触发校验且输入不合法：返回错误红色（透明度调整到和示例一致）
    if (_validationTriggered && !_inputValid) {
      return const Color(0xFFF56C6C).withOpacity(0.2);
    }
    // 输入符合规则：返回成功绿色
    if (_inputValid) {
      return const Color(0xFF67C23A).withOpacity(0.2);
    }
    // 默认未输入、未触发校验状态：返回浅灰底色
    return const Color(0xFFF5F7FA);
  }
  

如果你是通过Form表单统一调用formKey.currentState.validate()触发校验，只需要在validate调用的位置把_validationTriggered设为true即可，逻辑不需要其他改动。

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