Rows and columns

In the previous part, we looked into using Container, which is a basic layout element that can contain a single child widget. Next, we look into the use of Row and Column, which can contain multiple children.

Rows

The Row widget is used to create a series of widgets that are shown horizontally. The Row has a property children that is given a list of widgets as a value.

The following example shows an attempt to use the row for displaying three containers.

As you notice by running the above example, none of the containers are shown. This stems from the row minimizing the space that the widgets within it have available by default. To adjust the behavior, we can use the Expanded widget that is used to expand the child of a row (or column) to fill the potentially available space.

We can also define the size of a specific container and have the others as expanded. In the following example, the leftmost container is always 40 pixels wide, while the other containers divide the remaining space between them.

Columns

The Column widget behaves similarly to the row widget. Column is used to create a series of widgets that are shown vertically. Similarly to Row, the Column has a property widgets that is given a list of widgets as a value.

Similar to the previous example with rows, the following shows an attempt to use the column for displaying three containers.

Unsurprisingly, none of the containers are shown as the column also minimizes the space that the widgets within it have available. Let's again use the Expanded widget to fill the potentially available space.

Similar to the previous example, we can also define the size of a specific container and have the others as expanded. In the following example, the container at the bottom has a height of 40 pixels, while the other containers divide the remaining space between them.

Rows and columns

Rows and columns can also be used together. In the following example, a column contains a container and a row. The container contains a text widget, while the row contains three expanded text widgets. In effect, the example is used to show a question and three answer options, where the question is at the top and the answer options are side by side in a row.

Like all Flutter applications, the above application can also be viewed as a tree of widgets. The application starts with a materialapp at the root, which contains a scaffold. The scaffold contains a column, which contains a container and a row. The container has a text widget, while the row has three expanded widgets, each containing a text widget.