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

Wrap that widget with the container



Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);

The above answers are also correct, but in case you want to add multiple borders at the same widget, then you can set this

Container(
child: const Center(
child: Text(
'This is your Container',
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: const [
BoxShadow(color: Colors.green, spreadRadius: 8),
BoxShadow(color: Colors.yellow, spreadRadius: 5),
],
),
height: 50,
)

[![enter image description here][1]][1]


[1]:

**Rounded corner/border with bottom shadow**

Container(
// child it's depend on your requirement
child: const Center(
child: Text(
'This is your Container',
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: <BoxShadow>[
// shadow color and radius
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
),
// according your height ex. 50
height: 50,
);

Try the following code:

Container(
margin: margin,
padding: padding,
decoration: BoxDecoration(
border: Border.all(
color: color,
width: width,
),
),
child: Text(
data,
style: TextStyle(fontSize: 30.0),
),
),

Text border style:

Stack(
children: <Widget>[
// Stroked text as border.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.blue[700]!,
),
),
// Solid text as fill.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
color: Colors.grey[300],
),
),
],
)

Yes, there's different approaches for that. One of them is:
Wrap it in a container. And use box decoration like this.

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(
"Box decoration",
style: TextStyle(fontSize: 34.0),
),
)

use the Text widget inside a container and use decoration to border the text:

```
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
```

You can wrap the widget with `DecoratedBox` which provides decoration :

Widget textDecoration(String text){
return DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 10,
),
),
child: Text(text)
);
}

**Summary**

I have tried to summarize all the important possibilities when using `border` in `BoxDecoration`.

**Outcomes of the below explained borders:**

[![enter image description here][1]][1]

[![enter image description here][2]][2]

[![enter image description here][3]][3]

[![enter image description here][4]][4]

[![enter image description here][5]][5]


----------
**Explaination**

**Basic**

[![enter image description here][1]][1]

Container(
decoration: BoxDecoration(border: Border.all()),
child: const Text("Text"),
),

___

**BorderColor, width and strokeAlign**


[![enter image description here][2]][2]

Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.green,
strokeAlign: BorderSide.strokeAlignCenter)),
child: const Text("Text"),
),

---

**Border only on specific side**

[![enter image description here][3]][3]

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
decoration: const BoxDecoration(
border: Border(top: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 2),
bottom: BorderSide(width: 4))),
child: const Text("Text"),
),
],
),
---
**Different Shapes**

[![enter image description here][4]][4]

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
shape: BoxShape.circle),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(10),
),
child: const Text("Text"),
),
],
),

---

**Curved Border Radius**

[![enter image description here][5]][5]

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(5), right: Radius.circular(20))
),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
bottomRight: Radius.circular(20))),
child: const Text("Text"),
),
],
),


[1]:

[2]:

[3]:

[4]:

[5]: