Adding a border to a widget in Flutter

This is a repost of an answer I wrote on Stack Overflow.

Image for post
Image for post

There are a couple ways to add a border to a Flutter widget. The most basic way is to wrap your widget in a DecoratedBox. However, the Container widget also has a DecoratedBox built in. In the following examples I will use Container for the convenience of adding margin and padding.

Here is the general setup.

Image for post
Image for post

where the BoxDecoration is

Border width

Image for post
Image for post

These have a border width of 1, 3, and 10 respectively.

Border color

Image for post
Image for post

These have a border color of

  • Colors.red
  • Colors.blue
  • Colors.green

Code

Border side

Image for post
Image for post

These have a border side of

  • left (3.0), top (3.0)
  • bottom (13.0)
  • left (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)

Code

Border radius

The radius affects the roundness of the corners.

Image for post
Image for post

These have border radii of 5, 10, and 30 respectively.

Going on

DecoratedBox/BoxDecoration are very flexible. Read Flutter — BoxDecoration Cheat Sheet for many more ideas.

Written by

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store