Spacer
The Spacer widget is empty space that fills the room left over inside a flex container such as Row or Column.
Use it to open gaps between widgets automatically, or to push a widget to one side.
Definition and role
The Spacer widget is invisible space that takes up the room left over inside a flex container such as Row or Column. Its flex value decides how it splits that room with the other flex siblings in the same container — another Spacer, or a widget with Flexible applied. Placed outside a flex container, it draws nothing.
- Category: Dividers
- Default flex value:
1
Features
| Feature | Description |
|---|---|
| Fills leftover space | Takes up the available leftover space inside a flex container and opens a gap between widgets. |
| Space ratio | The flex value sets the share of leftover space it takes. It splits that space by flex ratio with the other flex siblings in the same container — another Spacer, or a widget with Flexible applied. |
| Flex containers only | Works only as a child of a flex container such as Row or Column; anywhere else it draws nothing. |
How to use
- Open the Dividers category in the left widget palette.
- Drag and drop the Spacer item into a flex container such as Row or Column.
- In the Properties panel on the right, adjust
flexto set the share of space it takes.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
flex | The flex share this Spacer takes of the leftover space. It splits that space by ratio with the other flex siblings in the same container (another Spacer or a Flexible widget), and a larger value takes more room. | 1 | Integer |
Notes and tips
Spacer takes up space only as a child of a flex container such as Row or Column. Placed outside a flex container, it shows nothing on screen.
Flex siblings inside the same flex container split the leftover space by their flex ratios. Spacer competes the same way with any ordinary widget that has Flexible applied, not just with other Spacers. For example, put a Spacer with flex 1 next to a text widget with Flexible applied and flex 2, and they split the space 1:2.
Learn more
For the complete Widget Control (Property, Method, and Event) that drives this widget from a script, visit Spacer Widget Control.