How can I add a border to a widget in Flutter?

Adding Borders to Widgets in Flutter

In Flutter, adding borders to widgets is a straightforward process that can be achieved using the BoxDecoration and DecoratedBox classes. In this article, we will explore various ways to add borders to your widgets.

Using Container with BoxDecoration

You can add the Text widget as a child to a Container that has a BoxDecoration with border property:

Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text('My Awesome Border'),
)

An Expanded Answer

A DecoratedBox is what you need to add a border, but I am using a Container for the convenience of adding margin and padding. Here’s 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(),
  );
}

Customizing Borders

Border Width

You can specify a custom width for your border using the width property. Here are examples with widths of 1, 3, and 10 respectively:

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

Border Color

You can specify a custom color for your border using the color property. Here are examples with colors red, blue, and green respectively:

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

Border Side

You can specify a custom side for your border using the left, top, right, and bottom properties. Here are examples with different sides:

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

You can specify a custom radius for your border using the BorderRadius.all property. Here are examples with 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
    ),
  );
}

Conclusion

In this article, we have explored various ways to add borders to your widgets in Flutter using the BoxDecoration and DecoratedBox classes. With these examples, you can create custom borders for your widgets.