In the last episode, they introduced the “Align” widget, which will be very useful here for us.
Let’s watch the video, it’s only 1 minute and 22 seconds:Align WidgetAs you can see in the following picture, if we set the alignment to (0, -1), the object will be placed in the top center position inside its container:I used this to align the text inside the lower orange block.
I also tried setting the alignment value to (0, -2.
5) to move the object even upper (and actually outside) its container, and it worked as well:The result:Now let’s create everything from scratch with the “Stack” widget.
Children of Stack are positioned from bottom up.
So the first child that should go under others is the purple one, number 5:Now let’s add the second child of the stack, block number 1:Note that I have used the MediaQuery class to get the width of the screen and then multiplied it by 2/3.
Alternatively, I could wrap the container in aFractionallySizedBox class with widthFactor of 0.
66 (2/3) to achieve the same width for the red block.
Also, note that the children of a stack are by default positioned at the top left corner of the stack.
Therefor we do not need to align the red block:Now we will put the orange block on the stack:Note that this time, I’ve wrapped the whole Container in an Align widget, to move the widget to the upper right corner of the stack.
And this time, the width of the orange block is 1/3 of the whole screen width:Adding and positioning the blue block is a little tricky.
Because if you align it to “bottomRight”, it will end up like this:This is because we have not specified any size for our stack.
And therefore it has expanded itself to the size of the whole screen.
Now we have two options to align the blue block:Restrict the height of the Stack.
By wrapping it in a SizedBox widget, and setting the height property to 300.
Align the blue block manually.
i.
e.
use alignment: Alignment(1, -0.
22) instead of alignment: AlignmentDirectional.
bottomEnd.
I choose to implement the first one:The result:Placing the last child on the stack is almost like the previous one, the only difference is its width, which is set to 1/3 of the screen width, and its position which is lower left, or bottmStart:The result:Final ResultFinal notes:The MediaQuery class is very useful for responsive design.
You can use it to find out about the total size of the screen, and then setting the size of your widgets accordingly.
The Expanded widget is also very handy in responsive design, making your widgets fill the remaining space by the flex factors you specify.
When you want to position your widget in its parent, wrap the widget in an Align widget, and set the alignment property appropriately.
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.
You could also wrap each child of the Stack in a Positioned widget to align them.
The whole source code can be found on github.
Thanks for reading!.