Use DecoratedBox to add Rounded Borders to a Widget in Flutter

Want to show a widget with rounded borders in Flutter?

Just wrap your widget with a DecoratedBox and give it a decoration like this:

DecoratedBox( decoration: const BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.all(Radius.circular(16)), // alternatively, do this: // borderRadius: BorderRadius.circular(16), ), child: someWidget, )

A couple things to note:

  • Container also has a decoration argument, but using DecoratedBox is more lightweight.
  • the above also works with BorderRadius.circular(16), however BorderRadius.all() is a const constructor and therefore more optimal.

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter In Production

Flutter In Production

Learn about flavors, environments, error monitoring, analytics, release management, CI/CD, and finally ship your Flutter apps to the stores. 🚀

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Last updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.