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.

Widget myWidget() {
return Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: myBoxDecoration(), // <--- BoxDecoration here
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
}

where the BoxDecoration is

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}

Border width

Image for post
Image for post

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

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width here
),
);
}

Border color

Image for post
Image for post

These have a border color of

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

Code

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, // <--- border color
width: 5.0,
),
);
}

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

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border(
left: BorderSide( // <--- left side
color: Colors.black,
width: 3.0,
),
top: BorderSide( // <--- top side
color: Colors.black,
width: 3.0,
),
),
);
}

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.

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}

Going on

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

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