Flutter Layout Challenge: Squares

Meysam Mahfouzi
6 min readFeb 8, 2019

Today we are going to create the following layout using Flutter. Why should we do that? The answer is simple: “practice makes perfect”.

But how could we do that? Is it really possible to twist squares over and under each other like that?

The first method that comes to my mind is using nine squares, and colouring them accordingly, like this:

9 blocks

But is it possible to use fewer squares? Maybe like this:

6 blocks

The above layout consists of one column that wraps everything else. In that column, there are two rows. The first row has two children (red and orange), and the second row has two columns. The first column is green and the second column has two rows, and so on…

As far as I know, it’s not possible to use one single widget for the orange block, unless… we use a stack, and arrange the orange block on top of the other ones.

So first let’s create the above layout and after that, we will see how to use a stack for the orange one.

In the first Row, we will create two “Container”s and will wrap each of them in an Expanded widget, setting the flex factor to 2 for the red Container and 1 for the yellow one. I will also set their height to 100.

Using an Expanded widget makes a child of a Row or Column expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.