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.

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

Open the Widget Palette and locate the Container widget under the Layout Elements tab. You can drag it into your desired location or add it directly from the widget tree.
Move to the Properties Panel (on the right side of your screen) and modify the properties to get the desired look and behavior.

Customizing

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

Changing shape

Containers can be set to Rectangle or Circle shape. To change the shape of the container, select the Container widget, move to the properties panel, and select the Rectangular Shape or Circular Shape option (under Container Properties).

Changing size

See how to change the size of any widget here.

Adding background color

Adding border

See how to add a border to any widget.

Adding elevation

To add the elevation (depth or Z-axis), move the Properties Panel > Container Properties > enter the Elevation value.

The higher value draws the bigger size of the shadow.

Limiting size

Sometimes, you don't set the height and width of the container explicitly and allow it to be the size of its child widget. If you do so, you may find layout issues where widgets may become too large or too small on different devices, leading to a poor user experience. To overcome this, you can limit the size of the container by specifying the Min W, Min H, Max W, and Max H.

For example, in a responsive design, you might want a button to grow with the screen size but not exceed a certain width. By setting these properties, you can ensure the button is at least a certain size for usability but doesn't become too large on bigger screens.

Clipping content

You can clip/cut the contents (i.e., child widget) of the container in a rounded rectangular shape. You could also achieve a similar effect by just adding a Border Radius, but the benefit you get here is it improves the performance of your app by not rendering or drawing pixels that are outside the rectangle.

To clip the content, select the Container widget, move to the properties panel, enable the Clip Content toggle, and add the Border Radius.

Giving shadow

To add a shadow to the container, move the Properties Panel > switch on the Box Shadow toggle.

Apply the Shadow Color.
Apply the Blur to blur the shadow border.
To set the size of the shadow, Enter the value in Spread.
Enter the value for Offset X to move the shadow in the horizontal axis. Entering a positive value will move the shadow in the right direction, while the negative value will move the shadow in the left direction.
Enter the value for Offset Y to move the shadow in the vertical axis. Entering a positive value will move the shadow downward, while the negative value will move the shadow upward.

Adding gradient

To add a Gradient color to the container, move the Properties Panel > switch on the Gradient toggle.

By default, it adds two colors. You can change them or add new colors by clicking on the Add Color.
Enter the value in the Transition point to adjust the distribution of each color in the linear gradient. The Transition point can only accept a value between 0.0 to 1.0. If you add three colors, you can try setting the Transition Point as 0.0,0.5, and 1.0 for each color, respectively.
Enter the Angle in the degree to change the gradient color direction.

Setting background image

To set the background image to the container:

Move to the properties panel > Background Image section.
Choose the Image Type to either Network or Asset.
1. If you choose Network, Enter the image URL in the Path input.
2. If you choose Asset, Click on the Upload Image + button to upload it from your computer.
To store and display the image even when the internet is unavailable, switch on the Cached option.
Adjust the image that looks best from the Box fit dropdown values.
See how to align an image here.

Aligning child

To align a child inside of the container, move to the properties panel > Child section > use the alignment box to align the widget at a fixed position or directly enter a value in the X and Y input box.

Some widgets will take up the entire space in the Container instead of their set size. This can happen with a Container in Container and with an IconButton in Container. If you encounter this issue, set the child's alignment to zero.

Enable safe area

Enabling the safe area on a container will ensure that the widget respects the critical parts of the display, such as the notch and status bar. This is particularly useful when you have a background widget that extends across the entire screen without respecting the safe area, but you need an overlay widget, like text, to avoid overlapping with these critical areas (e.g., text displayed over a full-screen background image).

To enable the safe area, navigate to the properties panel and turn on the Safe Area toggle.

See how to work with Widget Styling, Visibility, Padding & Alignment, and Testing.

Adding Implicit Animation

In implicit animation, the widget automatically animates to a new property's value when they are updated. For example, the container widget animates whenever you change its size and colors.

Implicit Animation is recommended only when you want to run the animation once (after the properties are changed). To run the animation multiple times or add a custom one, consider adding the animation yourself.

Here's an example of how it looks when you update the container properties with and without Implicit Animation.

To add implicit animation:

Move to the properties panel and turn on the Implicit Animated toggle.
Set the Animation Curve to the desired one among the Ease In, Ease Out, Ease In Out, Bounce, Elastic, and Linear. This tells how an animation should behave over a specified duration. You can try each one to see which one fits better.
The Duration value determines how long an animation lasts, measured in milliseconds. For example, a duration of 1000ms equals 1 second.
Now, whenever you update the container properties such as Width, Height, Fill Color, and Border Color, the container will animate to a new value automatically.