title: Animated container with gradient background color
body: <p>How can I change the background color of a container from bottom to top?
  When I use gradients, I don't like the effect.
  I build a second container, but it's not dynamic.</p>
  <pre><code>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() =&gt; _MyCustomContainerState();
  }
  
  class _MyCustomContainerState extends State&lt;MyCustomContainer&gt; {
    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: () =&gt; onPaint(),
          child: Icon(Icons.ac_unit),
        ),
      );
    }
  }
  </code></pre>
  <p>I want that transition, over an over again changing the colors of the two containers.
  If the states changes, do the transition and in the next iteration, change colors and play again.
  This is the animation to emulate.
  <a href="https://drive.google.com/file/d/1EN_TlgP8oaTNYiEAqJg9wEn1O8AslnCM/view?usp=sharing" rel="nofollow noreferrer">Video animation</a></p>
  <p>Any idea how?</p>