Launch Offer

Flutter Foundations Course

Buy now and get 25% off the regular price!

View Course

How 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: BoxDecoration( color: Colors.blue, borderRadius: const 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.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

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

The Complete Flutter Course Bundle

The Complete Flutter Course Bundle

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

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

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