Flutter：TextField中的SvgPicture如何实现颜色自动适配？

系统自带的Icon组件能随TextField的启用、聚焦等状态自动变色，核心是它会自动继承当前上下文的IconTheme颜色。要让SvgPicture实现同样效果，只需手动获取这个主题颜色并应用到SVG上，以下是两种实用方案：

方法一：通过Builder获取IconTheme颜色并应用 #

利用Builder组件的上下文获取TextField对应的IconTheme颜色，再通过colorFilter覆盖SVG原本的填充色，确保颜色随状态变化：

TextFormField(
  decoration: InputDecoration(
    hintText: "Password",
    prefixIcon: Builder(
      builder: (context) {
        final iconColor = IconTheme.of(context).color;
        return SvgPicture.asset(
          AppIcons.lock,
          colorFilter: ColorFilter.mode(iconColor!, BlendMode.srcIn),
          // 可选：设置尺寸，和系统Icon对齐
          height: 24,
          width: 24,
        );
      },
    ),
  ),
),

方法二：封装成可复用组件 #

如果需要多次使用，可把逻辑封装成独立组件，简化重复代码：

class ThemedSvgIcon extends StatelessWidget {
  final String assetName;
  final double? size;

  const ThemedSvgIcon({
    super.key,
    required this.assetName,
    this.size = 24,
  });

  @override
  Widget build(BuildContext context) {
    final iconColor = IconTheme.of(context).color;
    return SvgPicture.asset(
      assetName,
      colorFilter: ColorFilter.mode(iconColor!, BlendMode.srcIn),
      height: size,
      width: size,
    );
  }
}

// 使用示例
TextFormField(
  decoration: InputDecoration(
    hintText: "Password",
    prefixIcon: const ThemedSvgIcon(assetName: AppIcons.lock),
  ),
),

注意事项 #

• 若SVG是多颜色图标，此方式会将所有颜色替换为主题色；如需保留部分颜色，需修改SVG文件，将需要变色的图层设为统一占位色（如黑色）后再用colorFilter替换。
• 建议设置height和width，让SVG尺寸与系统默认Icon对齐，保证UI一致性。

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