Spacer
The Spacer widget is used to insert a flexible empty space between the children of the Column and Row widget.
If you want even space between your child widgets, you can add space by setting the Main Axis Alignment to Space Around, Space Evenly, and Space Between. If you want a more customized space between your child widgets (example below), you should use the Spacer Widget.
The Spacer widget takes all of the available space so the Spacer Widget will have no effect on a Column or Row where the Main Axis Alignment is set to Space Around, Space Evenly, and Space Between.
.png?alt=media&token=923294aa-69dd-4e64-a65a-86caaddccdfe){kind=spacer}
Here's an example of how you can use a Spacer widget in your project
- First, Drag the Column widget from the Layout Elements tab (in the Widget Panel) and set its Cross Axis Alignment To Center.
- Add the CircleImage widget from the Base Elements tab or add it directly from the widget tree.
- Now add the Spacer widget itself from the Layout Elements tab.
- Add the Text widget, Change the name to 'Username', and the Theme Style to Title 1.
- Add another Text widget and give it a name as 'Email'.
- Again add the Spacer widget. This time, move to Property Editor and find the Flex input box under the Spacer Properties section. Inside Flex input, enter the value 8.
- Finally, add the Button widget from the Base Elements tab.
By default, the Flex value for the Space widget is set to 1. You can change the value to adjust the space between the children.
Last modified 1yr ago