Featuring two of the most used Widgets in Flutter: Rows and Columns

Hey everyone!

Before learning about widgets I strongly recommend learning the basics about Flutter and what it is. If you already know the basics of Flutter or if you have read Leticia’s article, then we can jump right in. Today I am going to demonstrate two Widgets that will be used frequently when you are developing screens and user interfaces in Flutter.

“But hey, what’s a Widget?”

A Widget is a visual component that defines the interface of an application. So it means that everything you see when you create your screen is based on a set of Widgets. When you create your Flutter application, the first screen that will be created contains a Widget Tree. Every Widget Tree forms a layout that you will see on the screen.

The process of assembling Widgets together is done by telling Widgets that their child (or children) are other Widgets. When a Widget has a child, it means that it takes a single Widget, for example:

Child example

When a Widget has children, it means that it takes a list of Widgets, so you can put more than one Widget inside it, like this:

Children example

Let’s use an example and show how a Widget behaves on a screen:

main.dart example

Everything that you see in this image, including the text shown at the top and at the center of the screen, that’s what we call Widgets! Here is what the screen looks like from behind:

Widgets example

Now that you understand what a Widget is, I am going to show you two of the most important Widgets that a Flutter developer uses during layout building: Rows and Columns!

Rows

A widget that displays its children in a horizontal array.

So, a Row works literally just like a row. Imagine that you are building a straight line horizontally with some components inside of that line. These components will be additional widgets that can be placed inside the “parent” Widget using its “children” property. Each Widget can have its own rules or conditions; for example, the size or color: we call them properties.

It is really important to assume that the Row Widget does not scroll. So if you have a number of widgets that will overtake the screen horizontally and you want to be able to scroll it, consider using ListView.

Let’s say we want to build three Button Widgets within a Row. We can create a Row Widget as shown below:

Row Example

And the screen would look like this:

RowExample class

Columns

A widget that displays its children in a vertical array.

The Column Widget works just like the Row widget, but arranges its children in a vertical direction on the screen. Also, the Column Widget does not scroll in the vertical direction, so if you have a number of widgets that will overtake the screen vertically and you want to be able to scroll it, consider using ListView as well.

Let’s say we want to build three Button Widgets within a column. We can create a Column widget as shown below:

Column example

The screen would look like this:

ColumnExample class

As you can see, the buttons in both Row and Column Widgets are not aligned properly, and that’s because we have not aligned our Widgets. To do this, we can use the CrossAxisAlignment and MainAxisAlignment classes.

CrossAxisAlignment

The crossAxisAlignment attribute is used when we want to place our Widget in a desired direction, for example, crossAxisAlignment.start would place all of the children inside the Row Widget at the start edge aligned with the cross axis. Of course, the crossAxisAlignment works different in Rows and Columns, so it would be something like this:

Row cross axis

Column cross axis

MainAxisAlignment

The mainAxisAlignment attribute works just like crossAxisAlignment, but the difference is that the children’s position would be on the main axis edge, so it would work like this:

Row main axis

Column main axis

To fix the previous screens that we have built, we are going to use crossAxisAlignment and mainAxisAlignment attributes. Let’s use the Row Widget. I am going to place the buttons at the bottom of the screen. To do this, just add crossAxisAlignment: CrossAxisAlignment.end inside the Row widget:

RowExample class

As you can see, the buttons are now placed at the bottom of the screen. To do this, you just need to add 1 line to the RowExample class:

row_example.dart

Now I am going to organize the 3 buttons so that they are not adjacent to each other. We do not use crossAxisAlignment to do this, instead, we use the mainAxisAlignment property. And to separate them, use MainAxisAlignment.spaceBetween:

RowExample class

And the code would look like this:

row_example.dart

Notice that you can use both of the attributes in the same Widget, so you can build your layout to fit in any edge of the screen!

I am not going to do it with Column because it is almost the same explanation, but I challenge you to download my source code and try it yourself. I have shared the source code as well as my contact, so if you are having any problems just leave a comment below or send me a message with any questions or suggestions :)

felipesses/rows-columns-example