Container

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.

Adding Container widget

Here's how you add & modify the Container widget:

1. Select the Container widget from the Add Widget Button or add it directly from the widget tree.

2. Inside the Container, you can add various widgets, and display them.

Customizing Container Widget

Width

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.

Height

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.

Box Shape

You can choose from Rectangle or Circle, and determine the shape of the Container widget.

Child Alignment

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.

Margin

Here are the instructions for setting Margin.

Padding

Here are the instructions for setting Padding.

Color

You can customize the color of the Container, all the child widgets will be displayed on top of this.

Border Properties

If you want a Border for the Container, Border Radius, Border Width and Border Color can be customized as needed.

Decoration Image

If you want to have a Background Image for a Screen, this is the way to go.

To add a Background Image:

1. Set an Image Source, you can choose from Image Types such as Network, Blurhash and Assets.

2. Set the Image Opacity for clear visibility of child widgets.

3. Choose from various Box Fit options.

4. Align the image using Image Alignment property.

Default Properties

You can customize the appearance and behavior of this widget using the various properties available under the Widget Default Properties.