Flutter：如何获取ElevatedButton的MaterialState集合并给SvgPicture着色？

方法一：通过Builder获取按钮状态动态着色 #

直接在ElevatedButton的图标位置嵌套Builder，利用上下文找到父级按钮实例，拿到当前的MaterialState集合，再解析你定义的foregroundColor，给SvgPicture添加颜色滤镜实现同步变色：

ElevatedButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.red;
      } else if (states.contains(MaterialState.hovered)) {
        return Colors.blue;
      }
      return Colors.black;
    }),
  ),
  onPressed: () {},
  icon: Builder(
    builder: (context) {
      // 获取父级ButtonStyleButton（ElevatedButton的父类）
      final button = context.findAncestorWidgetOfExactType<ButtonStyleButton>();
      final currentStates = button?.states ?? const <MaterialState>{};
      // 解析当前状态对应的前景色
      final targetColor = ButtonStyle.of(context).foregroundColor?.resolve(currentStates);
      
      return SvgPicture.asset(
        'assets/icons/your_icon.svg',
        colorFilter: targetColor != null 
            ? ColorFilter.mode(targetColor, BlendMode.srcIn) 
            : null,
        width: 24,
        height: 24,
      );
    },
  ),
  label: const Text('测试按钮'),
)

方法二：封装可复用的状态响应式Svg组件 #

如果需要在多个按钮中使用，封装一个独立组件，内部处理状态获取逻辑，避免重复代码：

class StatefulSvgIcon extends StatelessWidget {
  final String assetName;
  final double? width;
  final double? height;

  const StatefulSvgIcon({
    super.key,
    required this.assetName,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    final button = context.findAncestorWidgetOfExactType<ButtonStyleButton>();
    final currentStates = button?.states ?? const <MaterialState>{};
    final targetColor = ButtonStyle.of(context).foregroundColor?.resolve(currentStates);

    return SvgPicture.asset(
      assetName,
      colorFilter: targetColor != null 
          ? ColorFilter.mode(targetColor, BlendMode.srcIn) 
          : null,
      width: width,
      height: height,
    );
  }
}

使用时直接替换图标即可：

ElevatedButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      // 自定义颜色逻辑
    }),
  ),
  onPressed: () {},
  icon: const StatefulSvgIcon(assetName: 'assets/icons/your_icon.svg'),
  label: const Text('测试按钮'),
)

补充：手动管理状态（自定义按钮场景） #

如果是基于MaterialStateMixin开发自定义按钮，你需要手动维护MaterialState集合：通过GestureDetector或InkWell监听按压、悬停等事件，更新状态集合，再将解析后的颜色传递给SvgPicture。这也是你提到的MaterialStateMixin的典型使用场景，但对于现成的ElevatedButton，前两种方法更高效。

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