How to Add Border to a Widget in Flutter

CodeWithFlutter
2 Min Read

Adding a border to any widget in flutter is very easy. To do that, first, wrap your existing widget as Container Widget. In the container widget, we can use decoration property to archive the border in the flutter. You can also able to customize the border as per your need. Let’s see the Example,

For this example, consider the text widget as an existing widget.

Text("Border")

Then, Wrap the text widget as Container Widget.

       Container(
          child: Text("Border"),
        ),

The container widget has decoration property. In the decoration property supply the BoxDecoration class. Then, use the border property in BoxDecoration class. For Example,

    Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 2),
          ),
          child: Text("Border"),
        ),

The output looks like this,

Flutter Border

Adding border padding

If you need padding, add the padding in the container widget.

Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 2),
          ),
          child: Text("Border"),
        ),

The output looks like this,

Flutter Border

Border Side

if you need only one side or double side border use border side property. For Example,

Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(
                color: Colors.red,
                width: 1,
              ),
            ),
          ),
          child: Text("Border"),
        ),

The output looks like,

Flutter one side border

If you need bottom, left, or right, you can simply use the bottom,left-right property in the border widget. For Example,

          border: Border(
              top: BorderSide(color: Colors.red, width: 1),
              left: BorderSide(color: Colors.red, width: 1),
              right: BorderSide(color: Colors.red, width: 1),
              bottom: BorderSide(color: Colors.red, width: 1),
            ),

Border Radius

If you need a rounded border, simply use borderRadius property. For Example,

Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 1),
            borderRadius: BorderRadius.circular(18.0),
          ),
          child: Text("Border"),
        ),

The output looks like this,

Flutter Border Radius

Also read,

Share this Article
1 Comment