Flutter Column Cookbook

ANEESH JOSE
Dec 7, 2019 · 3 min read

The column is used in Flutter to create a vertical array of widgets. The Column is not scrollable. If you wrap it up with a ListView, it will become scrollable.

The definition of a column is as follows.

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>[],
}) : super(
children: children,
key: key,
direction: Axis.vertical,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);

Let’s see how would we implement it.

This is a basic column with two widgets.

Column(
children: <Widget>[
new Container(
width: 200.0,
height: 100.0,
color: Colors.red,
child: Center(child: new Text("Col 1")),
),
new Container(
height: 100.0,
width: 200.0,
color: Colors.blue,
child: Center(child: new Text("Col 2")),
),
],
),

It would look like

Flutter basic column

Lets go through it’s arguments.

To make those Containers vertically aligned at different positions, use mainAxisAlignment

mainAxisAlignment: MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.spaceEvenly
mainAxisAlignment: MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.spaceEvenly
mainAxisAlignment: MainAxisAlignment.spaceAround
mainAxisAlignment: MainAxisAlignment.start
//default
mainAxisAlignment: MainAxisAlignment.center

There is another argument known as mainAxisSize.

This argument lets us to choose between two options. Maximum and minimum. If we choose the max then the column will stretch to the size of the parent. But it won’t make any change to the current output max is the default value of this argument. Eg:

mainAxisSize: MainAxisSize.min,

If we choose min the vertical size of the column will shrink to the height of it’s children.

We will cover one more argument of Column. It is the of the verticalDirection. Using verticalDirection, we can arrange the widgets in the column such that widget in the bottom becomes the first widget.

verticalDirection: VerticalDirection.up,

The Column will not be completed without talking about Flexible Widget. Flexible is used to cover up the remaining space in a Column. The widget which is wrapped inside Flexible will cover the remaining space of the column.

Flexible(
child: new Container(
width: 200.0,
color: Colors.blue,
child: Center(child: new Text("Col 2")),
),
),

That’s almost everything basic of Columns. Hope you enjoy the article. Feel free to ask doubts in response.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store