Flutter：如何在TextFormField无输入时隐藏后缀图标？

要实现输入框为空时自动隐藏后缀图标，核心是通过TextEditingController监听输入内容，动态控制suffixIcon的显示状态，具体实现如下：

1. 定义并初始化控制器 #

在你的State类中声明TextEditingController，初始化后记得在组件销毁时释放资源：

class _YourWidgetState extends State<YourWidget> {
  late final TextEditingController _codeController;

  @override
  void initState() {
    super.initState();
    _codeController = TextEditingController();
  }

  @override
  void dispose() {
    _codeController.dispose();
    super.dispose();
  }
  
  // ... 其他代码
}

2. 动态控制后缀图标 #

修改TextFormField的decoration，根据控制器的文本内容是否为空，决定显示图标还是隐藏（设为null）：

child: TextFormField(
  controller: _codeController, // 绑定控制器
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.only(top: 16, bottom: 15),
    border: InputBorder.none,
    fillColor: Colors.white,
    prefixIcon: const Padding(
      padding: EdgeInsets.only(top: 16.0, bottom: 15),
      child: Text("Code: "),
    ),
    prefixIconConstraints: const BoxConstraints(minWidth: 60, minHeight: 19),
    hintText: "Input code here ",                         
    // 动态设置后缀图标
    suffixIcon: _codeController.text.isNotEmpty
        ? IconButton(
            onPressed: () {
              _codeController.clear(); // 点击清空输入框
            },
            icon: const Icon(Icons.delete),
          )
        : null,
  ),
  keyboardType: TextInputType.number,
),

原理说明 #

当输入框内容为空时，_codeController.text.isNotEmpty返回false，suffixIcon设为null，系统会自动隐藏该位置的图标；当有输入内容时，返回true，显示删除图标。同时给图标添加了清空输入框的逻辑，让交互更完整。

内容的提问来源于stack exchange，提问作者Đinh Việt Hoà