Flutter 具有渐变背景色的动画容器

如何从底部到顶部更改容器的背景色？ 当我使用渐变时，我不喜欢这种效果。 我构建了第二个容器，但它不是动态的

class MyCustomContainer extends StatefulWidget {
  final Color backgroundColor;
  final Color progressColor;
  final double progress;
  final double size;

  const MyCustomContainer({
    Key key,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.red,
    @required this.progress,
    @required this.size,
  }) : super(key: key);

  @override
  _MyCustomContainerState createState() => _MyCustomContainerState();
}

class _MyCustomContainerState extends State<MyCustomContainer> {
  double _progress;

  @override
  void initState() {
    super.initState();
    _progress = widget.progress;
  }

  onPaint() {
    setState(() {
      if (_progress == 0) {
        _progress = 1;
      } else {
        _progress = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: widget.size,
          width: widget.size,
          child: Stack(
            children: [
              Container(
                color: widget.backgroundColor,
                child: Column(
                  children: [
                    Container(
                      height: widget.size * 0.3,
                      color: Colors.green,
                    ),
                    Container(
                      height: widget.size * 0.7,
                      color: Colors.red,
                    ),
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOutExpo,
                  height: widget.size * _progress,
                  child: Column(children: [
                    Container(
                      height: widget.size * 0.3,
                      color: Colors.red,
                    ),
                    Container(
                      height: widget.size * 0.7,
                      color: Colors.green,
                    ),
                  ]),
                ),
              ),
              Text('asdas'),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => onPaint(),
        child: Icon(Icons.ac_unit),
      ),
    );
  }
}

类MyCustomContainer扩展StatefulWidget{ 最终颜色背景色； 最终颜色； 最终双倍进展； 最终双倍尺寸； 常量MyCustomContainer({ 关键点， this.backgroundColor=Colors.grey， this.progressColor=Colors.red， @需要这个进度， @需要这个尺寸， })：super（key:key）； @凌驾 _MyCustomContainerState createState（）=>\u MyCustomContainerState（）； } 类_MyCustomContainerState扩展状态{ 双倍进步； @凌驾 void initState（）{ super.initState（）； _progress=widget.progress； } onPaint（）{ 设置状态（）{ 如果（_progress==0）{ _进展=1； }否则{ _进度=0； } }); } @凌驾 小部件构建（构建上下文）{ 返回脚手架( 正文：中( 孩子：大小盒子( 高度：widget.size， 宽度：widget.size， 子：堆栈( 儿童：[ 容器( 颜色：widget.backgroundColor， 子：列( 儿童：[ 容器( 高度：widget.size*0.3， 颜色：颜色。绿色， ), 容器( 高度：widget.size*0.7， 颜色：颜色，红色， ), ], ), ), 对齐( 对齐：对齐.bottomCenter， 子：动画容器( 持续时间：持续时间（毫秒：300）， 曲线：Curves.easeInOutExpo， 高度：widget.size*\u进度， 子项：列（子项：[ 容器( 高度：widget.size*0.3， 颜色：颜色，红色， ), 容器( 高度：widget.size*0.7， 颜色：颜色。绿色， ), ]), ), ), 文本（'asdas'）， ], ), ), ), 浮动操作按钮：浮动操作按钮( onPressed:（）=>onPaint（）， 子：图标（图标。ac_单元）， ), ); } } 我想要那个过渡，一次又一次地改变两个容器的颜色。 如果状态改变，进行转换，在下一次迭代中，改变颜色并再次播放。 这是要模拟的动画。

---

知道怎么做吗？

有一种类似于

ColorTween

class（）

你可以在谷歌上搜索一些教程，里面有很多

更新

如果您想将一个容器悬停在另一个容器上，然后及时重新移动它，我会将两个

容器

放入

堆栈小部件

，并将其中一个

容器

的初始高度设置为0，然后仅设置高度动画

更新2

为了能够控制动画，您应该使用

AnimationController

，您可以忘记使用

AnimatedContainer

当我尝试如何重置

动画容器

时，有一些技巧可以做到这一点。关键是设置回调

onEnd

和inside以将持续时间更改为

1毫秒

，将

\u progress

恢复为初始值和

设置状态

，在再次启动动画之前，需要设置适当的持续时间

void initState() {
    super.initState();
    _progress = 0;
  }

  onPaint() {
    setState(() {
      dynamicDuration = Duration(milliseconds: 2000);
      if (_progress == 1) {
        _progress = 0;
      } else {
        _progress = 1;
      }
    });
  }
  
  void resetAnim(){
    
    setState((){
      dynamicDuration = Duration(milliseconds: 1);
      _progress = 0;
    });
    
  }

更新3

为了能够循环它，您必须使用异步函数等待恢复到点A结束

  void resetAnim() async {
    
    setState((){
      dynamicDuration = Duration(milliseconds: 1);
      _progress = 0;
     
    });
    
     await new Future.delayed(const Duration(milliseconds : 50));
      
     
     setState(() {
      dynamicDuration = Duration(milliseconds: 2000);
      
        _progress = 1;
     
    });

---

这一切看起来都有点棘手/肮脏，因此可能值得学习使用

AnimationController

和/或

TweenAnimationBuilder

我有，但tween color使用我不想要的效果从颜色迁移到其他颜色。我不想像进度条那个样从下到上改变。你们的意思是你们想把一个容器和另一个容器悬停在一起，将第一个容器的高度设置为0，然后将其高度提高到100%，然后将容器粘到底部？我有两个容器，在一个堆栈中有不同的颜色。我不想把这两种颜色从下到上都改变。我想要的效果与示例提供的效果相同。示例中的问题是，我不希望在每次状态更改时都从下到上播放动画效果。您的意思是希望始终从点a播放到点B，而不是从点a播放到点B，然后在下一次迭代中从点B播放到点a？很抱歉，太晚了。这就是我要找的。我知道我需要控制器，这个例子是为了表示渴望的效果。“我想要这种转换，一次又一次地改变两个容器的颜色。”-这就是

AnimatedContainer

的用途（或者

TweenAnimationBuilder

用于设置自定义属性的动画）