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,
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,
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,
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,
Also read,
