Flutter: How to use AnimatedContainer with Expanded in Column?

Question

Let's say we have 3 children of a Column:

Flexible(
   flex:1,
   child: Container(
      color: Colors.red,
   ),
),
Flexible(
   flex:3,
   child: Container(
      color: Colors.yellow,
   ),
),
Flexible(
   flex:1,
   child: Container(
      color: Colors.blue,
   ),
),

I want to programmatically expand middle child with flex=3 to cover the whole Column with smooth animation, while the top and bottom children shrinks accordingly.

Right now my setup is with a Column and Flexible widgets. However if you can think of a solution with other widgets, I am open to those ideas as well.

Answer 1

Screenshot:

---

Code:

Duration _duration = Duration(seconds: 1);
int _flex1 = 1, _flex2 = 3, _flex3 = 1;

@override
Widget build(BuildContext context) {

  double height = MediaQuery.of(context).size.height;
  var height1 = (_flex1 * height) / (_flex1 + _flex2 + _flex3);
  var height2 = (_flex2 * height) / (_flex1 + _flex2 + _flex3);
  var height3 = (_flex3 * height) / (_flex1 + _flex2 + _flex3);

  return Scaffold(
    body: Column(
      children: <Widget>[
        AnimatedContainer(
          duration: _duration,
          color: Colors.blue,
          height: height1,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex1}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.red,
          height: height2,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex2}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.teal,
          height: height3,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex3}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  );
}