Flutter：能否让MaterialStateProperty<Color>循环切换颜色？

我写了一个tyButtonOverlay函数，返回MaterialStateProperty<Color>给ThemeData里的按钮overlayColor，实现点击/选中时显示一种颜色，悬停/聚焦时显示另一种颜色：

MaterialStateProperty<Color> tyButtonOverlay(Color initColor) {
  return MaterialStateProperty.resolveWith((Set<MaterialState> state) {
    if (state.contains(MaterialState.pressed) ||
        state.contains(MaterialState.selected)) {
      return const Color.fromRGBO(7, 214, 105, 0.75);
    } else if (state.contains(MaterialState.focused) ||
        state.contains(MaterialState.hovered)) {
      return const Color.fromRGBO(251, 80, 201, 0.5);
    } else {
      return initColor;
    }
  });
}

现在想让悬停/聚焦状态下的overlayColor循环交替显示两种颜色（比如蓝白切换），但尝试把函数改成异步返回Future的方案行不通，因为ThemeData不接受Future类型的返回值，求可行解决方法。

因为MaterialStateProperty.resolveWith是同步回调，没法直接在里面处理异步延迟逻辑，必须通过StatefulWidget的状态管理来动态更新颜色，再让overlayColor依赖这个状态值。以下是两种可行实现：

方案1：定时器切换颜色 #

通过定时器周期性更新颜色状态，监听悬停/聚焦事件启停定时器：

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

  @override
  State<CycleColorButton> createState() => _CycleColorButtonState();
}

class _CycleColorButtonState extends State<CycleColorButton> {
  Color _hoverFocusColor = Colors.blue;
  Timer? _colorTimer;
  bool _isHoverOrFocused = false;

  // 定义要循环的颜色列表
  final List<Color> _cycleColors = [Colors.blue, Colors.white];
  int _currentColorIndex = 0;

  void _startColorCycle() {
    if (_colorTimer != null) return;
    // 每500ms切换一次颜色
    _colorTimer = Timer.periodic(const Duration(milliseconds: 500), (timer) {
      setState(() {
        _currentColorIndex = (_currentColorIndex + 1) % _cycleColors.length;
        _hoverFocusColor = _cycleColors[_currentColorIndex];
      });
    });
  }

  void _stopColorCycle() {
    _colorTimer?.cancel();
    _colorTimer = null;
    setState(() {
      _currentColorIndex = 0;
      _hoverFocusColor = _cycleColors[0];
    });
  }

  @override
  void dispose() {
    _colorTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      // 监听鼠标悬停进入
      onEnter: (_) {
        _isHoverOrFocused = true;
        _startColorCycle();
      },
      // 监听鼠标悬停离开
      onExit: (_) {
        _isHoverOrFocused = false;
        _stopColorCycle();
      },
      child: Focus(
        // 监听焦点变化
        onFocusChange: (hasFocus) {
          _isHoverOrFocused = hasFocus;
          hasFocus ? _startColorCycle() : _stopColorCycle();
        },
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            overlayColor: MaterialStateProperty.resolveWith((states) {
              if (states.contains(MaterialState.pressed) || states.contains(MaterialState.selected)) {
                return const Color.fromRGBO(7, 214, 105, 0.75);
              } else if (_isHoverOrFocused) {
                return _hoverFocusColor.withOpacity(0.5);
              }
              return Colors.transparent; // 替换为你的初始颜色initColor
            }),
          ),
          onPressed: () {},
          child: const Text('循环变色按钮'),
        ),
      ),
    );
  }
}

方案2：动画实现平滑渐变 #

如果需要更自然的颜色过渡效果，可以用AnimationController和ColorTween实现平滑渐变循环：

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

  @override
  State<SmoothCycleColorButton> createState() => _SmoothCycleColorButtonState();
}

class _SmoothCycleColorButtonState extends State<SmoothCycleColorButton> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Color> _colorAnimation;
  bool _isHoverOrFocused = false;

  // 定义渐变的颜色序列
  final List<Color> _cycleColors = [Colors.blue, Colors.white];

  @override
  void initState() {
    super.initState();
    // 创建动画控制器，2秒完成一次渐变，循环播放
    _animationController = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    // 创建颜色渐变动画
    _colorAnimation = ColorTween(
      begin: _cycleColors[0],
      end: _cycleColors[1],
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ));
  }

  void _startAnimation() {
    if (!_animationController.isAnimating) {
      _animationController.repeat(reverse: true); // 反向重复，实现蓝→白→蓝的循环
    }
  }

  void _stopAnimation() {
    _animationController.stop();
    _animationController.reset();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        _isHoverOrFocused = true;
        _startAnimation();
      },
      onExit: (_) {
        _isHoverOrFocused = false;
        _stopAnimation();
      },
      child: Focus(
        onFocusChange: (hasFocus) {
          _isHoverOrFocused = hasFocus;
          hasFocus ? _startAnimation() : _stopAnimation();
        },
        child: AnimatedBuilder(
          animation: _colorAnimation,
          builder: (context, child) {
            return ElevatedButton(
              style: ElevatedButton.styleFrom(
                overlayColor: MaterialStateProperty.resolveWith((states) {
                  if (states.contains(MaterialState.pressed) || states.contains(MaterialState.selected)) {
                    return const Color.fromRGBO(7, 214, 105, 0.75);
                  } else if (_isHoverOrFocused) {
                    return _colorAnimation.value.withOpacity(0.5);
                  }
                  return Colors.transparent; // 替换为你的初始颜色initColor
                }),
              ),
              onPressed: () {},
              child: child,
            );
          },
          child: const Text('平滑渐变按钮'),
        ),
      ),
    );
  }
}

核心思路 #

1. 把颜色循环逻辑放在StatefulWidget的状态中，因为MaterialStateProperty是同步的，必须通过setState或动画控制器触发UI刷新。
2. 通过MouseRegion监听鼠标悬停、Focus监听焦点状态，来启停颜色循环。
3. 让overlayColor的resolveWith回调依赖当前状态中的颜色值，实现动态变化。

如果要在全局ThemeData中使用，需要把颜色状态提升到父Widget或使用状态管理工具（如Provider），让ThemeData能访问到当前的循环颜色值。

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