如何通过在 Flutter 中从中间展开容器来为容器的颜色设置动画

Question

在我的 Flutter 应用程序中，我为我的小部件使用了

AnimatedContainer

。我希望每当我的颜色状态发生变化时，它应该从中间开始扩散，并继续向两侧扩散，直到结束。

这是我写的：

ValueListenableBuilder(
          valueListenable: widget.controller._getLoading,
          builder: (context, _ControllerState controllerState, child) {
            return AnimatedContainer(
              duration: const Duration(milliseconds: 700),
              curve: Curves.easeInOut,
              height: widget.height ?? 56,
              margin: widget.margin,
              width: double.infinity,
              decoration: BoxDecoration(
                color: _getColor(controllerState),
                borderRadius: widget.borderRadius ?? BorderRadius.circular(8),
              ),
              child: Center(
                child: _getCenterWidget(controllerState),
              ),
            );
          }),

Answer 1

要在 AnimatedContainer 中的颜色发生变化时获得颜色从中间扩散到边缘的效果，您可以结合使用 Tween 动画和 CustomPainter。我会用代码更新