Flutter Set Vertical Spacing Between Column Children Widgets

In Column widget of flutter there are 6 different options of spacing is available. Basically these are the vertical alignment options of Column widget which can be accessed through mainAxisAlignment property of Column. mainAxisAlignment set the column children alignment in vertically manner because its default axis is vertical.

Vertical spacing & alignment properties in Column widget:

1. MainAxisAlignment.start : Place all the Column children at the start and close to each other in main axis manner.
2. MainAxisAlignment.end : Place the children at the end of layout screen in main axis manner.
3. MainAxisAlignment.center : To place all the children at the vertically middle of screen.
4. MainAxisAlignment.spaceAround : Place free space evenly between children of column widget.
5. MainAxisAlignment.spaceBetween : Place free space between each element of Column widget. First and Last children of column will be touch without space to the top and bottom screen.
6. MainAxisAlignment.spaceEvenly : Place free space to the children and first and last child would also get spacing from top and bottom side.

Flutter Set Vertical Spacing Between Column Children Widgets:

1. Creating column widget with MainAxisAlignment.start .

Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])

Screenshot:

2. Creating Column with MainAxisAlignment.center .

Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])

Screenshot:

3. Setting up MainAxisAlignment.end on Column .

Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])

Screenshot:

4. Setting up MainAxisAlignment.spaceAround on Column widget.

Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])

Screenshot:

5. Setting MainAxisAlignment.spaceBetween in column widget.

Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])

Screenshot:

6. Setting up MainAxisAlignment.spaceEvenly .

Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])

Screenshot:

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
          Container(
            width: 250,
            height: 50,
            color: Colors.amber,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.brown,
            alignment: Alignment.center,
          ),
          Container(
            width: 250,
            height: 50,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])))));
  }
}