4 min read

While developing a Flutter app, you may add a lot of Container widgets. But sometimes you may want to add a container with a border to create a box UI such as buttons, keys, cards, etc. In this tutorial, we’ll learn how to add Flutter Container border

Here’s what we’ll cover:

Add Flutter Container Border

You can add a border to the Container by adding the BoxDecoration class to the decoration property of the Container.

To give border to container in flutter:

  1. Go to the Container in which you want to add a border.
  2. Add the decoration parameter and assign the BoxDecoration class. Inside the BoxDecoration add the parameter border and set it to Border.all().
  3. Run the App.

Here’s how your code should look like: 

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(),
  ),
  child: const Text(
    "FlutterBeads",
    style: TextStyle(fontSize: 34.0),
  ),
)

Border.all is a special type of constructor that creates a black color border at all sides of the container.

Preview:

Here’s is how the code is translated into the design:

Adding Border Width

By default Border.all constructor creates a border with the width set to 1. However, you may want to change the default value and add/change the border width to create a custom UI.

To add border width to the container, simply add the width parameter with the value inside the Border.all constructor.

Here’s the code: 

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(
      width: 10,
    ),
  ),
  child: const Text(
    "FlutterBeads",
    style: TextStyle(fontSize: 34.0),
  ),
)

Preview:

Changing Border Color

The Border.all constructor adds the default color as black. You can change the default color to any other color using the color property inside the Border.all constructor.

To give border color to container in flutter, add the color parameter with your custom color inside the Border.all.

Here’s how your code should look like: 

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(width: 5, color: Colors.deepPurpleAccent),
  ),
  child: const Text(
    "FlutterBeads",
    style: TextStyle(fontSize: 34.0),
  ),
)

Preview:

Adding Border Radius to Container

To create a UI that looks like a button, you may need to create a rounded border at all corners of the container. This can be done by adding a border radius to the container.

To give border radius to container in flutter

  1. Go to the Container in which you want to add a border radius.
  2. Add the decoration parameter and assign the BoxDecoration class. Inside the BoxDecoration add the parameter borderRadius and set it to BorderRadius.all(Radius.circular(50)).
  3. Run the App.

Here’s how your code should look like: 

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(width: 5, color: Colors.red),
    borderRadius: BorderRadius.all(Radius.circular(50)),
  ), 
  child: const Text(
    "FlutterBeads",
    style: TextStyle(fontSize: 34.0),
  ),
)

Preview:

Border to Few Sides

Sometimes you may want to add a border to only a few sides of the container such as only at left and right side, only at the top and bottom side, only at the bottom, etc.

To add border radius to container:

  1. Go to the Container in which you want to add a border to only a few sides.
  2. Add the decoration parameter and assign the BoxDecoration class. Inside the BoxDecoration add the parameter border and assign the BorderSide class to any side of the container such as left, top, right and bottom.
  3. Run the App.

Here’s the code: 

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Color(0xff6ae792),
        width: 3.0,
      ),
      bottom: BorderSide(
        color: Color(0xff6ae792),
        width: 3.0,
      ),
    ),
  ),
  child: const Text(
    "C",
    style: TextStyle(fontSize: 34.0),
  ),
)

Preview:

You can use the same approach to customize the border at all sides of the container and the code looks like this: 

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border(
      left: BorderSide(
        color: Colors.black,
        width: 5.0,
      ),
      right: BorderSide(
        color: Colors.black,
        width: 15.0,
      ),
      top: BorderSide(
        color: Color(0xff6ae792),
        width: 20.0,
      ),
      bottom: BorderSide(
        color: Color(0xff6ae792),
        width: 8.0,
      ),
    ),
  ),
  child: const Text(
    "D",
    style: TextStyle(fontSize: 34.0),
  ),
)

Preview:

Adding Dotted Border

You may need to design a UI that has a dotted border around it. For example, the drag and drop interaction has a draggable area that can be displayed with a dotted border. Let’s make use of dotted_border to add the dotted border around the container.

To add a dotted border to the container:

Step 1: Open the pubspec.yaml file and add the dotted_border package. 

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  dotted_border: ^2.0.0+1

Step 2: Wrap your Container widget inside the DottedBorder widget.

Step 3: Add the color, strokeWidth, and dashPattern parameters.

Step 4: Run your app.

Here’s the code: 

DottedBorder(
  color: Colors.black,
  strokeWidth: 2,
  dashPattern: [
    5,
    5,
  ],
  child: Container(
    padding: const EdgeInsets.all(
        16.0),
    child: const Text(
      "FlutterBeads",
      style: TextStyle(fontSize: 34.0),
    ),
  ),
)

Preview:

That’s it. Thanks for reading this article. 🙂

Conclusion

In this tutorial, we learned how to add Flutter container border with practical examples. We also learned how to change border color and width, how to add border radius to container and finally we saw how to add a dotted border to the container.

flutter_launcher_icons: 5-Step Guide to Change App Icons in Flutter
Rounded Button in Flutter | Best Way (Code + Images)