Flutter Widgets 15 | Stack
In this tutorial, you will learn how to use the Stack in the flutter.
Before Stack
Before our tutorial, we should create a page to contain our code.
It just shows an empty page with a title.
Simple Use
The Stack is a layout that can contain multiple children widgets, but they are in different layers. Let’s look at an example.
It shows as below, you can see the layers all in the same position but different size. The upper layer just put upon the bottom one, just like a book with different pages put on a table.
Constructor
So, let’s look at its constructor.
The parameters are a bit less for us. But should tell you how to use them.
alignment
We have used the alignment in the Container. It is the same as the alignment in the Container. You can find more detail in the Widgets 01 | Container. I just give an example here to describe it here.
It shows as follows.
textDirection
This will control the direction of the Text. It has two choices, the ltr draws from left to right, the rtl draws it from right to left.
It will show you as below.
fit
This will control the size of the children widgets in the flutter. It has only three types of the StackFit.
It will show you as follows. The loose make the children widget as small as possible, the expand set the children as large as possible. The passthrough will depend on its parent widget.
overflow
This parameter will control the children widget. When its content outside the Stack. whether the children widget will be visible or clip. Let's look at an example.
It will show you like this. The first one shows the contents, but two cut the part that outside the Stack.
Positioned
It isn’t the parameter of the Stack, but it relates to the Stack. It will help you locate the children widgets in the Stack. Let's look at its constructor.
The parameters, left, top, right, and bottom will control the distance inside the Stack. If we set left: 10, this Positioned will locate at the position at the Stack that the distance from the left of the Stack is 10. Let's look at an example.
It will show you as follows.
Conclusion
The Stack is very common in the flutter. If you have a layout that doesn’t have a simple direction, such as horizontal, vertical. You can consider this layout.
Thanks for your reading.
The End.
The whole code in Github: https://github.com/FlutterOpen/ebook
