Stack
The Stack widget allows you to place widgets on top of each other. Think of it like a stack of papers on a desk where each paper is a widget. You can see the top paper clearly, and the papers underneath it are partially or completely covered.
Sometimes, basic widgets such as Column and Row are not sufficient for creating a complex UI. For example, in a photo app, you could use this widget to overlay a text label on top of a photo.
The following figure helps you understand how the Stack widget is different from the Column widget.
Add Stack widget
To add a Stack widget:
Open the Widget Palette and locate the Stack widget under the Layout Elements tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
Move to the Properties Panel > Stack Properties > set the Width and Height.
Add a few widgets inside the Stack and drag them to change their position.
Customizing
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
Predefined child alignment
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 set default alignment for all children inside the Stack, move to the Properties Panel > Stack Properties > Default Child Alignment > use the alignment box to align the widget at a fixed position or directly enter a value in the X (horizontal) and Y(vertical) input box.
Common widget properties
See how to work with Widget Styling, Visibility, Padding & Alignment, and Testing.
Video guide
If you prefer watching a video tutorial, here's the one for you:
Last Updated Date: January 25, 2024
Last updated
