Expanded

step 1 - just background:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Container(
      color: Colors.deepOrangeAccent,
    );
}

step 2 - our own container - notice how constructor parameters are declared

class Square extends StatelessWidget {

  final Color _color;
  final double _width;

  const Square(this._color,[this._width]);

  @override
  Widget build(BuildContext context) => Container(
    width: _width,
    height: 100,
    color: _color,
  );
}

step 3 - three blocks configuration

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Container(
      color: Colors.deepOrangeAccent,
      child: Column(
        children: <Widget>[
          Square(Colors.blue,100),
          Square(Colors.green),
          Square(Colors.yellow,100)
        ],
      ),
    );
}

step 4 - expanded middle

children: <Widget>[
          Square(Colors.blue,100),
          Expanded(child: Square(Colors.green)),
          Square(Colors.yellow,100)
        ]

step 5 - multiple expanded with flex

 children: <Widget>[
          Square(Colors.blue,100),
          Expanded(child: Square(Colors.green), flex: 2,),
          Expanded(child: Square(Colors.yellow,100), flex: 1,)
        ]

step 6 - spread children across the column

child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Square(Colors.blue,100),
          Square(Colors.green,100),
          Square(Colors.yellow,100)
        ],
      )

step 7 - add flex

children: <Widget>[
          Expanded(child: Square(Colors.blue,100), flex: 1,),
          Square(Colors.green,100),
          Expanded(child: Square(Colors.yellow,100), flex:2)
        ],