Container

The Container is a fundamental layout widget that can hold a single child widget. It allows you to apply advanced styling and sizing rules that go beyond the standard Default Properties.

It is one of the most versatile widgets for building complex user interfaces.

Our Container widget works exactly like Flutter's Container widget. For an in-depth technical understanding, you can refer to the official Flutter Container documentation.

Core Concept: Layout Behavior

A Container's size on the screen is determined by a set of rules based on its properties and its child. Understanding this behavior is key to mastering layout.

Has Child?	Dimensions or Constraints Set?	Alignment Set?	Parent's Constraints	Container's Behavior
No	No	No	Unbounded	Tries to be as small as possible.
No	Yes	No	Any	Tries to be as small as possible given its own and parent's constraints.
No	No	No	Bounded	Expands to fit the parent's constraints.
Yes	Any	Yes	Unbounded	Sizes itself to fit around the child.
Yes	Any	Yes	Bounded	Expands to fit the parent and positions the child according to the alignment.
Yes	No	No	Any	Passes constraints from parent to child and matches the child's size.

---

When to Use a Container

Many widgets have Default Properties for basic styling (like background color, padding, and borders). You should use a Container when you need more advanced capabilities:

• To apply a Gradient background.

• To add complex Shadows or Elevation.

• To set Constraints (min/max width and height).

• To align a Child within it (e.g., centering a small item in a large box).

• To create specific shapes like a Circle.

• To build custom components like a Material Design Card by combining padding, background color, border radius, and shadow.

If you only need to add padding or a simple background color, using the Default Properties on your existing widget is often more efficient.

---

Properties

Layout & Sizing

Property	Description
Width / Height	The fixed dimensions of the container.
Padding	The space between the container's border and its child widget.
Margin	The space around the outside of the container, separating it from other widgets.
Child Alignment	Aligns the child widget within the container (e.g., Top Left, Center, Bottom Right).

Constraints

These properties allow you to define a flexible size range for the container.

Property	Description
Min Width / Min Height	The minimum size the container can shrink to.
Max Width / Max Height	The maximum size the container can expand to.

Appearance

Property	Description
Color	The solid background color of the container.
Gradient	A color gradient for the background. This will be drawn on top of the Color.
Box Shape	The shape of the container. Options are Rectangle or Circle.
Border	Defines the border style, width, and color.
Border Radius	Rounds the corners when Box Shape is Rectangle.
Elevation	The z-axis elevation, used to create a shadow effect.
Shadow	A list of shadow effects to apply, allowing for complex, layered shadow designs.

---

Container vs. Default Properties

The Container widget offers a superset of the styling properties found in Default Properties.

• Shared Properties: Width, Height, Padding, Margin, Background Color, Border, Border Radius.

• Container-Only Properties: Gradient, Shadow, Elevation, Constraints (Min/Max Width/Height), Child Alignment, and Box Shape.

This makes the Container a powerful tool for creating custom "cards," decorated boxes, and other complex layout elements.

---

Default Properties

The Container widget only supports the Interactions section from default-properties.md. This allows you to add an onClick action to make the entire container tappable.