Flutter：实现侧边菜单动画图标展开时白色、收起时红色的颜色切换

我来帮你搞定这个侧边菜单图标颜色切换的需求！核心思路就是根据菜单的开合状态动态设置AnimatedIcon的color属性，这里有两种简单靠谱的实现方式：

方法一：直接通过动画控制器状态判断 #

你的_animationController本身就可以反映菜单的状态——当动画完成（菜单展开）时，控制器状态是AnimationStatus.completed；动画未启动/反向完成（菜单收起）时是AnimationStatus.dismissed。直接用这个状态判断颜色：

修改后的AnimatedIcon代码：

AnimatedIcon(
  progress: _animationController.view,
  icon: menuClose,
  color: _animationController.status == AnimationStatus.completed 
      ? Colors.white 
      : Colors.red, // 收起状态红色，展开状态白色
  size: 25.sp,
)

方法二：用布尔变量跟踪菜单状态（更直观推荐） #

如果你的菜单状态还需要在其他地方复用，建议定义一个专门的布尔变量来跟踪，代码可读性和维护性更好：

步骤1：定义状态变量 #

在你的State类里添加：

bool _isMenuExpanded = false; // 初始为收起状态

步骤2：更新onIconPressed()方法 #

在点击事件里同步更新状态变量：

void onIconPressed() {
  if (_isMenuExpanded) {
    _animationController.reverse();
  } else {
    _animationController.forward();
  }
  setState(() {
    _isMenuExpanded = !_isMenuExpanded;
  });
}

步骤3：设置AnimatedIcon的颜色 #

直接用布尔变量判断，逻辑一目了然：

AnimatedIcon(
  progress: _animationController.view,
  icon: menuClose,
  color: _isMenuExpanded ? Colors.white : Colors.red,
  size: 25.sp,
)

完整修改后的按钮代码 #

把上面的逻辑整合到你的完整按钮代码里，就是这样：

Align(
  alignment: Alignment(0, .99),
  child: GestureDetector(
    onTap: () {
      onIconPressed();
    },
    child: ClipRRect(
      borderRadius: BorderRadius.circular(80),
      child: Container(
        width: 50.w,
        height: 45.h,
        color: colorAnimatedButton,
        alignment: Alignment.center,
        child: AnimatedIcon(
          progress: _animationController.view,
          icon: menuClose,
          // 这里用你选的方法设置颜色
          color: _isMenuExpanded ? Colors.white : Colors.red,
          size: 25.sp,
        ),
      ),
    ),
  ),
)

这样就能完美实现：菜单收起时图标红色，展开时图标白色的效果啦！

内容的提问来源于stack exchange，提问作者M.A.