小编San*_*. K的帖子

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

初始状态

最终状态

这是我用于按钮的小部件。我知道这可以通过在 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),
                        ],
                      )
                    : …