Container
Last updated
Last updated
A Container is a versatile widget that's like a multi-purpose box. You can think of it as a way to decorate and position a child widget (a smaller component within your app's interface). It is helpful in dividing the screen into smaller logical parts and arranging and styling them.
For example, you can use a Container to give a background color, shape, or size to text or a button. It's like putting something in a box and then deciding how that box looks and where it sits on the screen.
Here's how you add & modify the Container widget:
Select the Container widget from the Add Widget Button or add it directly from the widget tree.
Inside the Container, you can add various widgets, and display them.
You can set the Width of the Container on the screen, and also the Minimum as well as Maximum Width on the screen for responsiveness. You have two options,
For a specific size, choose PX and type in the size you want.
For a size based on the screen, choose % and type in the percentage.
You can set the Height of the Container on the screen, and also the Minimum as well as Maximum Height on the screen for responsiveness. You have two options,
For a specific size, choose PX and type in the size you want.
For a size based on the screen, choose % and type in the percentage.
You can choose from Rectangle or Circle, and determine the shape of the Container widget.
You can choose how you want the child widgets to be aligned. You can choose from 9 options: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center and Bottom Right.
Here are the instructions for setting Margin.
Here are the instructions for setting Padding.
You can customize the color of the Container, all the child widgets will be displayed on top of this.
If you want a Border for the Container, Border Radius, Border Width and Border Color can be customized as needed.
If you want to have a Background Image for a Screen, this is the way to go.
To add a Background Image:
Set an Image Source, you can choose from Image Types such as Network, Blurhash and Assets.
Set the Image Opacity for clear visibility of child widgets.
Choose from various Box Fit options.
Align the image using Image Alignment property.
You can customize the appearance and behavior of this widget using the various properties available under the Widget Default Properties.
