Flutter Column Implementation featured image

Flutter Column Implementation : A Complete Overview

Flutter Column widget is the most used widget in the User Interface design. It accepts children as a vertical array. In this tutorial, Firstly, you will know how to create a Column widget and lastly know the implementation of the flutter column widget.

How to Create Column in Flutter?

In flutter, you can create a column widget using the Column() class. The class Column() constructor has many properties. The property “children” is one of them. It allows you to create an array of other widgets like Container, Row, Column, Stack, and many other widgets. Below are the lines of code that will create a Column widget with a text widget inside the container.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
              ],
            ),
          ),

Output

Create a Column widget with text inside the container
Create a Column widget with text inside the container

How to use Flutter Column Widget?

There are many ways you can implement a flutter column widget. In fact, all the manipulation of the widget is done through properties inside the Column() constructor.  Let’s learn each of them.

1. children

The children properties allow you to add an array of widgets. A widget can be a container, row, stack, another column e.t.c. For example, In the above example, I have defined a text widget as the first element of the array.

2. mainAxisAlignment

Just like mainAxisAlignment property in Row() widget allows you to position the children horizontally, the mainAxisAlignment in Column() arranges children widget vertically. To do so you have to use the MainAxisAlignment enum. The enum contains start, endcenterendspaceAround,  spaceBetween, and spaceEvenly. You will know the implementation of each of them. By default, the column has set the mainAxisAlignment to start which is MainAxisAlignment.start.

1. Center the children

You can center the children using the MainAxisAlignment.center.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
              ],
            ),
          ),

Output

Center the children of the columne widget
Center the children of the column widget

2.  Place the children at the bottom

Now to place the children at the bottom you will use the MainAxisAlignment.end.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
              ],
            ),
          ),

Output

Place the children to the bottom of column widget
Place the children to the bottom of the column widget

3. Place the space around the widgets

Now suppose you have two arrays of children and want to add space around them. To do so you have to use you use MainAxisAlignment.spaceAround. It will add space around each widget of the Column.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                )
              ],
            ),
          ),

Output

Adding space around the widgets in column
Adding space around the widgets in a column

4. Place the space between the widgets

You can also place the space between the widgets only. But not before the first widget and the end of the last widget. To do so you have to use  MainAxisAlignment.spaceBetween.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                )
              ],
            ),
          ),

Output

Adding space between widgets in column
Adding space between widgets in a column

5 . Placing the space between the widgets Evenly

You can also place the space between the widgets using the  MainAxisAlignment.spaceEvenly. It adds space around each of the widgets between, before, and after the children’s widgets.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.pink,
                )
              ],
            ),
          ),

Output

Adding space evenly around widgets in column
Adding space evenly around widgets in a column

 

3. crossAxisAlignment

The third most important property is crossAxisAlignment. In the column widget, it arranges the widgets of the array horizontally. In fact, The children of the Row can be positioned vertically using the CrossAxisAlignment enum. The enum contains baseline,  centerendstart, and stretch. You will know implement of each enum. By default, the children are aligned to the center vertically which is CrossAxisAlignment.center.

1. Place the children at the start

The CrossAxisAlignment.start will place all the children widgets at the start of the screen.

 Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.pink,
                )
              ],
            ),
          ),

Output

Placing the children at the start in column widget
Placing the children at the start in the column widget

2. Place the children at the end

You can place the children at the end in the column using the CrossAxisAlignment.end. It will arrange the array of widgets vertically at the end.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.pink,
                )
              ],
            ),
          ),

Output

Placing the children at the end in column widget
Placing the children at the end in the column widget

3. Place the children at the center

You can place the children at the center using the CrossAxisAlignment.center.  In fact, It is the same as MainAxisAlignment.center.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.pink,
                )
              ],
            ),
          )

Output

Placing the children at the center in column widget
Placing the children at the center in the column widget

4. Fill the children across the cross axis

Suppose you want to use the entire space of the screen horizontally in the column then you have to use CrossAxisAlignment.stretch. For example, I have two containers inside the column. And if I use CrossAxisAlignment.stretch then it will fill the whole space of the parent widget.

Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.blueGrey[600],
            width: 500,
            height: 200,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text("HELLO",
                    style: TextStyle(color: Colors.white, fontSize: 50)),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.pink,
                )
              ],
            ),
          ),

Without CrossAxisAlignment.stretch

Children without stretch in Column
Children without stretch in Column

 

With CrossAxisAlignment.stretch

Children with stretch in Column
Children with stretch in Column

These are the properties of the Column widget you will use while designing the User Interface in Flutter. I hope you have liked this tutorial on Flutter Column implementation. If you have any query then you can contact us for more information.

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.