Flutter Layout Challenge: Squares

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

9 blocks
6 blocks
the first row
the second row added
Block Numbers
Align Widget
  1. Align the blue block manually. i.e. use alignment: Alignment(1, -0.22) instead of alignment: AlignmentDirectional.bottomEnd.
Final Result
  1. The Expanded widget is also very handy in responsive design, making your widgets fill the remaining space by the flex factors you specify.
  2. When you want to position your widget in its parent, wrap the widget in an Align widget, and set the alignment property appropriately.
  3. If you don’t specify the width and height for any of the Stack’s children, by default they will expand themselves to the width and height of the Stack.
  4. You could also wrap each child of the Stack in a Positioned widget to align them.

Software Engineer

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