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

CodeWithFlutter
2 Min Read

In Flutter, you can add a border to a widget by wrapping it with a Container widget and specifying the decoration property. The decoration property allows you to specify a BoxDecoration object, which can be used to add borders, background colors, gradients, and more.

Here’s an example of adding a border to a widget:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 2.0,
    ),
  ),
  child: YourWidgetHere(),
)

In this example, we wrap the YourWidgetHere widget in a Container, and specify the decoration property with a BoxDecoration object. The Border.all constructor creates a border that will be drawn on all four sides of the container, with a width of 2.0 and a color of black.

You can also specify different borders for different sides of the container by using the Border class’s constructor with individual BorderSide objects, like this:

Container(
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.black,
        width: 2.0,
      ),
      bottom: BorderSide(
        color: Colors.black,
        width: 2.0,
      ),
      left: BorderSide(
        color: Colors.black,
        width: 2.0,
      ),
      right: BorderSide(
        color: Colors.black,
        width: 2.0,
      ),
    ),
  ),
  child: YourWidgetHere(),
)

This example adds borders to the top, bottom, left, and right sides of the container with the same color and width.

Share this Article
Leave a comment