In this Flutter post, we will be learning how to implement and customize Flutter column spacing. A proper example will be provided to practically understand the usage of Flutter column spacing. I hope after reading this post, you will be able to easily customize Flutter column spacing in your Flutter apps.
Now it’s high time for us to start implementing Flutter column spacing in our Flutter apps.
What is Flutter Column Spacing?
It is the process of giving space between the items of Flutter column widget. We will understand it practically by using multiple examples. So without any delay, let’s get right into implementing Flutter column spacing.
Default Flutter Column Spacing
First let’s implement a simple Flutter column widget and give it some children using for loop. They will be Flutter containers having some padding, border radius, margin, a background color and a child text widget will be provided to make them look professional. See below code:
Column( children: [ for (int i = 0; i < 2; i++) Container( padding: EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10)), child: Text( 'Default Flutter Column Spacing', style: TextStyle(color: Colors.white), )) ], )

Custom Flutter Column Spacing(Multiple Examples)
For that, we have to use the main axis alignment constructor of the Flutter column widget. The values that can be passed to it are listed below:
- Main Axis Alignment: Start
- Main Axis Alignment: Center
- Main Axis Alignment: End
- Main Axis Alignment: Space Between
- Main Axis Alignment: Space Evenly
- Main Axis Alignment: Space Around
Main Axis Alignment: Start
Main Axis Alignment: Center
mainAxisAlignment: MainAxisAlignment.center

Main Axis Alignment: End
mainAxisAlignment: MainAxisAlignment.end

Main Axis Alignment: Space Between
mainAxisAlignment: MainAxisAlignment.spaceBetween


Main Axis Alignment: Space Evenly
mainAxisAlignment: MainAxisAlignment.spaceEvenly

Main Axis Alignment: Space Around
mainAxisAlignment: MainAxisAlignment.spaceAround

Flutter Column Spacing Implementation Source Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Homepage(), ); } } class Homepage extends StatefulWidget { @override State<Homepage> createState() => _HomepageState(); } class _HomepageState extends State<Homepage> { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Padding( padding: const EdgeInsets.all(8.0), child: SizedBox( height: double.infinity, width: double.infinity, child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ for (int i = 0; i < 4; i++) Container( padding: EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10)), child: Text( 'Flutter Column Spacing Space Around', style: TextStyle(color: Colors.white), )) ], )), ))); } }