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
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, end, center, end, spaceAround, 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
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
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
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
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
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, center, end, start, 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
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
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
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
With CrossAxisAlignment.stretch
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.
