Master the Flutter Container: Borders, Shadows & Gradients (2025 Cheat Sheet)

This cheat sheet was originally published on SRF Developer. Check out the blog for more Flutter Widget guides.

---

The Container is the "Swiss Army Knife" of Flutter.

If you are coming from Web Development, think of it as a div. 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 convenient package.

💡 Basic Usage Code

Here is a copy-paste ready example showing a Container with Rounded Corners and a Drop Shadow (the most common use case):

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), // Shadow position
      ),
    ],
  ),
  child: Center(
    child: Text(
      'Hello World',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

⚙️ Key Properties Cheat Sheet

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).
constraints	BoxConstraints	Min/Max width and height rules.

🚀 Performance Pro Tip

The Container is powerful, but "heavy."

If you only need to change the background color, use the ColoredBox widget instead.
If you only need padding, use the Padding widget.

Using specific widgets instead of a giant Container can make your app run faster on older devices.

---

Conclusion

Master the BoxDecoration property, and you can build almost any UI design in Flutter.

Want to learn the next widget? Check out the full Flutter Course on SRF Developer.