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.
Outline
- What is Flutter Column Spacing?
- Default Flutter Column Spacing
- Custom Flutter Column Spacing(Multiple Examples)
- 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
- Flutter Column Spacing Implementation Source Code
- Conclusion
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),
))
],
)),
)));
}
}Conclusion
Flutter app articles you might like to read: Flutter appbar title center, widgets in flutter, unique flutter development, flutter login UI form, flutter bottom navigation bar, Flutter basics for beginners, Beautiful gradient login UI, Flutter appbar actions, flutter architecture, Flutter sliverappbar customization, mobile app marketing tips, flutter vs native, why learn react native framework.
You might also like:
Flutter Range Slider Beautiful Customization With Example | Syncfusion
How To Easily Change Flutter Glassmorphism Container Size
How To Easily Customize Flutter SizedBox Widget
