Container

A powerful widget for styling, sizing, and positioning other widgets.

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.

Watch this on Youtube: https://www.youtube.com/watch?v=m0iw3EbtAxk

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.

---

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).

Use Child Alignment to position a child within the Container's bounds.

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 supports the following sections of Default Properties:

Interactions

Alignment

Visibility

Use Cases

Use a Container when you need a box that styles and positions other widgets.

• Group content Wrap text, icons, rows, or columns into a single block (like a card or section).

• Add styling Give something a background color, border, radius, or shadow.

• Control spacing & size Add padding, margin, fixed width/height, and alignment around a child.

• Clickable areas Make a whole row/section feel like one tappable block (with gesture/tap outside).