Column in Flutter is one of the most commonly used widgets. Column widget is used to arrange its child widgets vertically in a single column. It is similar to the Row widget, but it arranges its child widgets in a column rather than a row. In this blog, we will discuss the properties of the Column widget and how it can be used in different scenarios with examples.

How to use the Column Widget in Flutter?

Using the Column widget in Flutter is simple. You can add any number of child widgets to a Column and they will be placed vertically, one after another. Here’s an example of how to use the Column widget in Flutter:

Column(
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

Constructors of Column

Column(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children: const <Widget>[]}
)

Properties of the Column in Flutter

The Column widget has several properties that allow you to customize its behavior and appearance. Let’s take a look at some of the most commonly used properties of the Column widget in Flutter:

Column widgets in Flutter have a property called mainAxisAlignment and crossAxisAlignment, which determines how the children’s widgets should be aligned along the main axis and the cross-axis.

1. mainAxisAlignment

For the Column widget, the main axis is vertical.

There are various options for main axis alignment.

a) MainAxisAlignment.start: This property aligns the children to the top of the column. It is the default main axis alignment for Column.

Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

The output for this mainAxisAlignment property is the same as above.

b) MainAxisAlignment.center: It aligns the children to the center of the column.

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

c) MainAxisAlignment.end: Aligns the children to the bottom of the column.

Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

d) MainAxisAlignment.spaceAround: Distributes the children evenly with space around them.

Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

e) MainAxisAlignment.spaceEvenly: Distributes the children evenly with equal space around them.

Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

f) MainAxisAlignment.spaceBetween: Distributes the children evenly with space between them.

Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

2. crossAxisAlignment

The crossAxisAlignment property is used to align the children of the Column widget along the cross-axis, which is the horizontal axis in the case of the Column widget. The different values that can be assigned to this property are:

a) CrossAxisAlignment.start: Aligns the children to the left of the column.

Column(
        crossAxisAlignment:CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

b) CrossAxisAlignment.center: Aligns the children to the center of the column. It is the default property of crossAxisAlignment.

Column(
        crossAxisAlignment:CrossAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

The output is the same as the default image above.

c) CrossAxisAlignment.end: Aligns the children to the right of the column.

Column(
        crossAxisAlignment:CrossAxisAlignment.end,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

d) CrossAxisAlignment.stretch: Stretches the children to fill the entire width of the column.

Column(
        crossAxisAlignment:CrossAxisAlignment.stretch,
        children: [
          Container(
            padding: const EdgeInsets.all(20),
            color: Colors.red,
            child: const Text("1"),
          ),
          Container(
            padding: const EdgeInsets.all(30),
            color: Colors.cyan,
            child: const Text("2"),
          ),
          Container(
            padding: const EdgeInsets.all(40),
            color: Colors.pinkAccent,
            child: const Text("3"),
          ),
        ],
      )

Output

3. mainAxisSize

The mainAxisSize property is used to define the size of the Column widget along the main axis, which is the vertical axis in case of the Column widget. The different values that can be assigned to this property are:

• MainAxisSize.max: The Column widget will take up as much vertical space as it needs to accommodate its children.
• MainAxisSize.min: The Column widget will take up the minimum vertical space required to accommodate its children.

Use Case of Column in Flutter

1. Creating Forms

The Column widget can be used to create a form in Flutter. Each form field can be added as a child to the Column widget, and the mainAxisAlignment property can be set to MainAxisAlignment.start to align the form fields to the top of the column. Here’s an example:

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Username',
        hintText: 'Enter your username',
      ),
    ),
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Password',
        hintText: 'Enter your password',
      ),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Submit'),
    ),
  ],
)

2. Creating Lists with Column in Flutter

The Column widget can also be used to create a list of items in Flutter. Each item can be added as a child to the Column widget, and the mainAxisAlignment property can be set to MainAxisAlignment.start to align the items to the top of the column. Here’s an example:

Column(
        children:  [
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
        ],
      )

And many more…..

Conclusion

The Column widget is a powerful tool for laying out child widgets vertically in a Flutter app. By using the MainAxisAlignment and CrossAxisAlignment properties, you can control how the child widgets are aligned along the horizontal and vertical axes, respectively. With the Column widget, you can create beautiful and effective layouts for your mobile applications in Flutter.

Thanks for reading this article 

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us