A Container is a versatile widget used to wrap, style, position, and size other widgets. It’s commonly used for adding padding, background colors, borders, margins, alignment, and more.
Source Code
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 6,
offset: Offset(0, 3),
),
],
),
height: 100,
width: double.infinity,
child: Text(
'Hello Container',
style: TextStyle(color: Colors.white, fontSize: 18),
),
)
Ai Code Analizer
🎨 3. Important Properties Used
| Property | Description |
|---|---|
padding | Space inside the container, around its child. |
margin | Space outside the container, separating it from other widgets. |
alignment | Aligns the child within the container. |
decoration | Adds background color, border, radius, shadow, etc. |
height/width | Sets fixed size. Use double.infinity to fill available space. |
child | The widget inside the container (usually Text, Row, Column, etc.). |
🎯 Bonus: BoxDecoration Customization
You can use BoxDecoration to style your container further:
color: Set background color.border: Add custom borders.borderRadius: Round the corners.boxShadow: Add shadows for depth.gradient: Use linear or radial gradients.