Flutter Column Widget Examples

Opposite of Row is Column, which can display its children in a vertical array.

Column with 3 containers center using MainAxisAlignment.center.

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 120,
            height: 120,
            color: Colors.blue,
          ),
          Container(
            width: 120,
            height: 120,
            color: Colors.red,
          ),
          Container(
            width: 120,
            height: 120,
            color: Colors.green,
          ),
        ],
      )

Column with 3 containers spaced evenly using MainAxisAlignment.spaceBetween.

Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: double.infinity,
            height: 150,
            color: Colors.cyan,
          ),
          Container(
            width: double.infinity,
            height: 150,
            color: Colors.pink,
          ),
          Container(
            width: double.infinity,
            height: 150,
            color: Colors.orange,
          ),
        ],
      )