How to add borders to a widget in Flutter

Adding a border to a widget is very easy in Flutter. We just need to wrap the widget in a Container and add BoxDecoration to it.

Let’s say we want to make a square with blue borders all we need to do is:

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
    ),
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Center(
    child: Text('mrflutter.com'),
  ),
),

Which will look like this:

What if the border is too “pointy” and we want a nice border-radius? No problem, we just add borderRadius to our BoxDecoration constructor:

decoration: BoxDecoration(
  border: Border.all(
    color: Colors.blue,
  ),
  borderRadius: BorderRadius.circular(10.0),
),

We then get the following:

You can also choose on what sides of the container you want a border using the BorderSide constructor.

decoration: BoxDecoration(
  border: Border(
    top: BorderSide(
      color: Colors.blue,
      // width: 3.0 --> you can set a custom width too!
    ),
    bottom: BorderSide(
      color: Colors.blue,
    ),
  ),
),

Which looks like this:

I hope this post helps you utilize the widgets that Flutter offers to create a custom border to your own widgets.