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.

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

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

Flutter & Firebase Course: Build a Complete App for iOS & Android

Flutter & Firebase Course: Build a Complete App for iOS & Android

A full course with in-depth content, taking you from the basics all the way up to more advanced topics.

Flutter REST API Crash Course

Flutter REST API Crash Course

Build a Coronavirus Tracking App, and learn how to use REST APIs in Flutter.

Get the best Flutter tutorials, right in your inbox.

Join over 16,000 developers who receive my weekly Flutter email course & newsletter:

No spam, ever. Unsubscribe at any time.