How To Easily Customize Flutter Column Spacing

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),
                    ))
            ],
          )

You can see that the there is no default Flutter column spacing between its children. Let’s now customize it.

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

By default, the main axis alignment is set to start, the reason we are seeing all its children on top.

Main Axis Alignment: Center

mainAxisAlignment: MainAxisAlignment.center

All the children of Flutter column widget are now displayed in the center of screen.

Main Axis Alignment: End

mainAxisAlignment: MainAxisAlignment.end

You can see that the children widgets are now displayed at bottom.

Main Axis Alignment: Space Between

mainAxisAlignment: MainAxisAlignment.spaceBetween

The space has been created between the children of Flutter column widgets. Let’s see if there are 4 items then what will happen:

You can see that the space between each item is same. You can also see that the space is only between items, not with the border of screen, as there is not space between the column children and the border of screen.

Main Axis Alignment: Space Evenly

mainAxisAlignment: MainAxisAlignment.spaceEvenly

You can see that now we have same space between the column children and also from the screen borders.

Main Axis Alignment: Space Around

mainAxisAlignment: MainAxisAlignment.spaceAround

The space between the children of Flutter column widget is greater that the space between screen border and children of Flutter column widget.

So this is how you can easily and properly customize Flutter column spacing in your Flutter apps as well. Don’t hesitate to contact me using the comment section, if you have questions regarding the implementation of Flutter column spacing. I would be happy to answer.

Below section has the complete source code of the Flutter column spacing (space around) implementation. You can change the value of main axis alignment depending on your design requirements.

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

To conclude, we have covered everything about Flutter column spacing and have used multiple Flutter examples to explain it. I hope you enjoyed reading this post. I would love to have you feedback on this post.

I would be delighted to see you on my other posts. These posts are related to Flutter informative books, Flutter web, Flutter beautiful templates, custom animations in Flutter, Flutter app development, Flutter widgets, and many more.

Below section has a number of post links concerning the topics mentioned above. I would love to see you making use of the search field on this site or the navigation bar at the top of the page to find others. Thank you for reading this Flutter post.

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.