Master Flutter Container: Borders, Shadows & Gradients (2025 Guide)

What is the Flutter Container?

The Container is the "Swiss Army Knife" of Flutter. It lets you create a rectangular box that can be decorated with background colors, borders, shadows, and gradients. It combines common painting, positioning, and sizing widgets into one.

💡 Basic Usage Code

Here is a complete example showing a Container with rounded corners and a shadow:

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15), // Rounded Corners
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Center(
    child: Text(
      'Hello World',
      style: TextStyle(color: Colors.white),
    ),
  ),
)
        

⚙️ Key Properties

These are the properties you will use 90% of the time:

Property	Type	Description
alignment	Alignment	Positions the child (e.g., Alignment.center).
decoration	BoxDecoration	Controls the visual look (color, border, shadow, gradient).
margin	EdgeInsets	Space outside the container.
padding	EdgeInsets	Space inside the container (around the child).

🚀 Performance Tip: If you only need to change the background color or add padding, don't use a Container! Use ColoredBox or Padding widgets instead. They are lighter and faster.

Conclusion

The Container is the fundamental building block of Flutter UI. Master the BoxDecoration property, and you can build almost any design.

Want to learn more? Check out our Full Flutter Tutorial Series.