Flutter中如何在按钮点击时为图标添加旋转动画 无需双SVG资源切换

核心思路保留同一份方向固定的图标资源，通过动画控制器驱动图标旋转角度，在下拉打开/关闭状态切换时自动完成平滑的旋转过渡，既保留了交互反馈的流畅感，也完全不需要维护两份方向相反的SVG资源。

具体改造步骤 #

• 给当前按钮组件的State类混入SingleTickerProviderStateMixin，为动画提供vsync屏幕刷新同步信号，避免动画运行时出现掉帧、不同步的问题。
• 在State的initState生命周期中初始化动画控制器，设置200~300ms的动画时长（和Material组件默认的交互动画时长对齐，手感更自然），同时根据组件初始的下拉状态设置控制器初始值：对应下拉关闭时旋转值为0，下拉打开时旋转值为0.5（代表旋转180度，即半圈）。
• 在onTap的状态切换逻辑中，不再通过三元判断切换不同的SVG资源，而是根据新的下拉状态，调用动画控制器的forward()或reverse()方法，自动驱动旋转角度从当前值平滑渐变到目标值。
• 把原来的双图标渲染逻辑替换为：用同一份图标资源作为子组件，包裹在RotationTransition中，将动画的旋转值传给turns参数，组件会自动根据动画进度更新图标的旋转角度。

改造后的核心可运行代码参考：

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

  @override
  State<DropdownIconButton> createState() => _DropdownIconButtonState();
}

class _DropdownIconButtonState extends State<DropdownIconButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _rotateController;
  late Animation<double> _rotateAnimation;
  bool _isDropdownOpened = false;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置与系统交互匹配的动画时长
    _rotateController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
    // 为动画添加缓动曲线，避免线性旋转的生硬感
    _rotateAnimation = CurvedAnimation(
      parent: _rotateController,
      curve: Curves.easeInOut,
    );
    // 初始状态对应下拉关闭的旋转角度
    _rotateController.value = 0;
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器资源，避免内存泄漏
    _rotateController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isDropdownOpened = !_isDropdownOpened;
          // 根据切换后的状态触发对应方向的旋转动画
          if (_isDropdownOpened) {
            _rotateController.forward();
          } else {
            _rotateController.reverse();
          }
        });
      },
      child: RotationTransition(
        turns: _rotateAnimation,
        // 仅保留单份方向固定的图标资源，无需准备反向的SVG
        child: SvgPicture.asset(
          'images/icons/arrow_up_primary.svg',
          width: scaleWidth(12),
        ),
      ),
    );
  }
}

实用调整提示 #

• 初始图标方向不影响效果：如果原本使用的是向下的箭头资源，只要调整两个状态对应的旋转角度差值为180度即可，不需要特意替换图标方向。
• 简化实现可选：如果使用Flutter 3.10及以上版本，可以直接用内置的AnimatedRotation组件替代手动管理的RotationTransition+AnimationController组合，直接传入目标旋转角度即可自动完成过渡动画，代码量更少。

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