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…

--

--