Flutter实现TextField输入超100时文本变红的方案咨询

完全可以实现，而且不需要任何第三方包，用Flutter原生组件就能搞定。下面是具体的实现步骤和代码：

核心思路 #

• 用StatefulWidget管理输入内容和文本颜色状态
• 限制输入仅为数字，避免非数字字符干扰判断
• 监听输入变化，实时判断数值是否超过100，动态切换文本颜色

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class LimitedNumberTextField extends StatefulWidget {
  const LimitedNumberTextField({super.key});

  @override
  State<LimitedNumberTextField> createState() => _LimitedNumberTextFieldState();
}

class _LimitedNumberTextFieldState extends State<LimitedNumberTextField> {
  String _inputText = '';
  Color _textColor = Colors.black;

  @override
  Widget build(BuildContext context) {
    return TextField(
      // 限制仅输入数字
      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
      // 显示数字键盘，提升输入体验
      keyboardType: TextInputType.number,
      onChanged: (value) {
        setState(() {
          _inputText = value;
          // 处理空输入，避免转换报错
          if (value.isEmpty) {
            _textColor = Colors.black;
            return;
          }
          int number = int.parse(value);
          // 超过100时文本变红，否则恢复黑色
          _textColor = number > 100 ? Colors.red : Colors.black;
        });
      },
      style: TextStyle(color: _textColor),
      decoration: const InputDecoration(
        hintText: '请输入数字',
        border: OutlineInputBorder(),
      ),
    );
  }
}

// 测试用主页面
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: LimitedNumberTextField(),
        ),
      ),
    ),
  ));
}

关键细节说明 #

• FilteringTextInputFormatter.digitsOnly：确保用户只能输入数字，避免非数字字符串导致的转换错误
• onChanged回调：每次输入变化时更新状态，实时判断数值范围
• 空输入处理：当用户删除所有内容时，文本颜色恢复默认，防止int.parse抛出异常
• 动态style：根据判断结果切换文本颜色，超过100时显示红色

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