Comment on page
Stack
The Stack widget allows child widgets to overlap on top of each other. The last child of the Stack stays on top.
Sometimes basic widgets such as Column and Row are not sufficient for creating a complex UI. For example, if want to show text on top of an image - you should consider using the Stack widget.
The following figure helps you understand how the Stack widget is different from other widgets.
.png?alt=media&token=d0b72ed4-6479-445e-a890-d76b76ef3197)
Figure 1
Here's another example that shows the use of the Stack widget:
Figure 2
To add the Stack widget in your project:
- 1.First, drag the Stack widget from the Layout Elements tab (in the Widget Panel) or add it directly from the Widget Tree tab.
- 2.Now you can add a few CircleImage inside the Stack.
- 3.Select any CircleImage and drag to change the alignment.
Here are the steps to create a UI as shown in figure 2 above using the Stack widget:
- 1.Drag the Stack widget from the Layout Elements tab (in the Widget Panel) or add it directly from the Widget Tree tab.
- 2.Add Image widget and set its width and height to inf.
- 3.Add the Text widget and drag it to the bottom left of the Image.
.gif?alt=media&token=8edadac8-09f9-4ec8-9070-b0ea40a08c38)
You can change the way children are placed inside the Stack widget by changing the position of a specific child widget or changing the default placement.
You may want to change the position of a specific child widget to match a design specification.
Please follow these steps to change the position of a child widget:
- 1.Select a child widget and drag it to change the alignment.
- 2.To make a child appear outside the boundary of the Stack, keep dragging the widget and place it on the boundary of the Stack.
.gif?alt=media&token=20bd7f3f-0cc9-494e-84b2-e1b433995227)
By default, all the children are placed at the top left corner of the stack. While creating a complex UI, you may want the children to be aligned to a specific position.
To change the default placement of the children:
- 1.Select the Stack from the widget tree or from the canvas area.
- 2.Go to the Property Editor and navigate to the Stack Properties section.
- 3.Spot the Default Child Horizontal Alignment and Default Child Vertical Alignment. You can adjust this by using the slider or entering a value.
- 4.For Default Child Horizontal Alignment, A value of -1 will set the default placement to the left, while a value of 1 will set the default placement to the right.
- 5.For Default Child Vertical Alignment, A value of -1 will set the default placement to the top, while a value of 1 will set the default placement to the bottom.
.gif?alt=media&token=438ec2f8-5784-461c-9baf-af3ba1de50d1)
If you prefer watching a video tutorial, here's the one for you:
Last modified 3mo ago