当 Flutter 中的内容发生变化时，如何对容器的大小进行动画处理？

Question

我想创建一个动画按钮，当用户点击它时，它最初有一个同步图标，它还将包含一个文本“取消”，并且同步图标开始旋转。

初始状态

最终状态

这是我用于按钮的小部件。我知道这可以通过在 CSS 中添加过渡属性来完成，我尝试在 Flutter 中使用 ScaleTransition，但容器仍然突然扩展（因为 ScaleTransition 本身占据了开始时的所有大小）。

AnimatedContainer(
          duration: Duration(milliseconds: 3000),
          padding: const EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.1),
            border: Border.all(
              color: Colors.pink.withOpacity(0.6),
            ),
            borderRadius: BorderRadius.circular(5.0),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              RotationTransition(
                turns: Tween(begin: 0.0, end: 1.0)
                    .animate(_rotationAnimationController),
                child: const Icon(
                  Icons.sync,
                  color: Colors.pink,
                ),
              ),
              ScaleTransition(
                scale: _scaleAnimationController,
                child: (state is NoteSyncOnGoing)
                    ? Row(
                        children: const [
                          SizedBox(width: 5),
                          Text(
                            "Cancel",
                            style: TextStyle(
                              color: Colors.pink,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          SizedBox(width: 5),
                        ],
                      )
                    : const SizedBox.shrink(),
              ),
            ],
          ),
        ),

编辑

检查 ScaleTransition 之前的状态也不能解决问题，因为当安装 ScaleTransition 时，ScaleTransition 小部件本身会获取其子级在缩放动画完成后获取的最大空间。

所以它会导致这样的结果

然后通过缩放动画出现取消文本

Answer 1

AnimatedContainer 不给你尺寸动画，你必须使用 AnimatedSize，并删除 ScaleTransition。

AnimatedSize(
      duration: const Duration(milliseconds: 3000),
      child: Container(
        padding: const EdgeInsets.all(5.0),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.1),
          border: Border.all(
            color: Colors.pink.withOpacity(0.6),
          ),
          borderRadius: BorderRadius.circular(5.0),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0)
                  .animate(_rotationAnimationController),
              child: const Icon(
                Icons.sync,
                color: Colors.pink,
              ),
            ),
            (state is NoteSyncOnGoing)
                ? Row(
              children: const [
                SizedBox(width: 5),
                Text(
                  "Cancel",
                  style: TextStyle(
                    color: Colors.pink,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(width: 5),
              ],
            )
                : const SizedBox.shrink(),
          ],
        ),
      ),
    )