Flutter中TextField组件如何将suffixIcon替换为自定义图标？

前置准备 #

• 先将你需要替换的睁眼、闭眼两种状态的自定义图标文件（推荐按分辨率准备2x/3x切图适配不同设备）放入项目的assets/images/目录（可自定义路径）
• 打开项目根目录的pubspec.yaml文件，配置资源路径：

flutter:
  assets:
    - assets/images/

替换实现代码 #

你只需要把原来IconButton里的icon属性的Icon组件，替换为本地图片组件即可，修改后的完整suffixIcon代码如下：

suffixIcon: IconButton(
  color: const Color(0xFF919191),
  onPressed: () {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus) {
      currentFocus.unfocus();
    }
    setState(() {
      isHidePassword = !isHidePassword;
    });
  },
  // 替换原来的Icon组件为Image.asset加载本地自定义图标
  icon: Image.asset(
    isHidePassword 
      ? 'assets/images/eye_close.png' // 替换为你自己的闭眼图标路径
      : 'assets/images/eye_open.png', // 替换为你自己的睁眼图标路径
    width: 20, // 可调整为你需要的图标大小
    height: 20,
    color: const Color(0xFF919191), // 保持和原有图标颜色一致，不需要改色可删除此行
  )
),

扩展：如果使用SVG格式图标 #

如果你的自定义图标是SVG格式，可借助flutter_svg库实现：

1. 在pubspec.yaml中添加依赖：

dependencies:
  flutter_svg: ^2.0.9 # 可替换为最新版本

2. 替换icon部分代码：

import 'package:flutter_svg/flutter_svg.dart';

// ......
icon: SvgPicture.asset(
  isHidePassword 
    ? 'assets/images/eye_close.svg'
    : 'assets/images/eye_open.svg',
  width: 20,
  height: 20,
  colorFilter: const ColorFilter.mode(Color(0xFF919191), BlendMode.srcIn), // 统一图标颜色
)

效果参考 #

• 当前实现效果：
  
• 目标实现效果：
  

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