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

I'm using Flutter and I'd like to add a border to a widget (in this case, a `Text` widget).

I tried `TextStyle` and `Text`, but I didn't see how to add a border.

Here is an expanded answer. A `DecoratedBox` is what you need to add a border, but I am using a `Container` for the convenience of adding margin and padding.

Here is the general setup.

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

Widget myWidget() {
return Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: myBoxDecoration(), // <--- BoxDecoration here
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
}

where the `BoxDecoration` is

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}

# Border width

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

These have a border width of `1`, `3`, and `10` respectively.

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width here
),
);
}

# Border color

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

These have a border color of

- `Colors.red`
- `Colors.blue`
- `Colors.green`

Code

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, // <--- border color
width: 5.0,
),
);
}

# Border side

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

These have a border side of

- left (3.0), top (3.0)
- bottom (13.0)
- left (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)

Code

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border(
left: BorderSide( // <--- left side
color: Colors.black,
width: 3.0,
),
top: BorderSide( // <--- top side
color: Colors.black,
width: 3.0,
),
),
);
}

# Border radius

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

These have border radii of `5`, `10`, and `30` respectively.

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}

# Going on

[`DecoratedBox`][6]/[`BoxDecoration`][7] are very flexible. Read [Flutter — BoxDecoration Cheat Sheet][8] for many more ideas.


[1]:

[2]:

[3]:

[4]:

[5]:

[6]:

[To see links please register here]

[7]:

[To see links please register here]

[8]:

[To see links please register here]

You can use Container to contain your widget:

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

Use a container with Boxdercoration.



BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.circular(10.0)
);

As stated in the documentation, Flutter prefers composition over parameters.

Most of the time you're not looking for a property, but instead a wrapper (and sometimes a few helpers/"builder").

For borders, you want `DecoratedBox`, which has a `decoration` property that defines borders; but also background images or shadows.

Alternatively, like [Aziza said][1], you can use `Container`. Which is the combination of `DecoratedBox`, `SizedBox` and a few other useful widgets.

[1]:

[To see links please register here]

**The best way is using BoxDecoration()**

Advantage

* You can set the **border** of a widget
* You can set the border **Color** or **Width**
* You can set a **Rounded corner** of a border
* You can add a **Shadow** of a widget

Disadvantage

* `BoxDecoration` only use with `Container` widget, so you want to wrap your widget in `Container()`

Example

Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.orange,
border: Border.all(
color: Colors.pink[800], // Set border color
width: 3.0), // Set border width
borderRadius: BorderRadius.all(
Radius.circular(10.0)), // Set rounded corner radius
boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
),
child: Text("My demo styling"),
)

[![Enter image description here][1]][1]

[1]:

Here, as the **[Text][1]** widget does not have a property that allows us to define a `border`, we should wrap it with a widget that allows us to define a border.
There are several solutions.
But the best solution is the use of **[BoxDecoration][2]** in the [Container][3] widget.

**Why choose to use BoxDecoration?**

Because BoxDecoration offers more customization like the possibility to define:

First, the `border` and also define:
- border Color
- border width
- border radius
- shape
- and more ...

**An example:**

Container(
child:Text(' Hello Word '),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.red ,
width: 2.0 ,
),
borderRadius: BorderRadius.circular(15),
),
),

Output:

[![Enter image description here][4]][4]

[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

[4]:

If you want to add border to some text of container then you can easily to do it by applying BoxDecoration to Container.

code :
```dart
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.redAccent,
width: 1,
),
),
child: Text('Some Text'),
);
```

In case someone would like a outlined/bordered text or apply multiple borders.

You could try this:

[To see links please register here]

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


[DEMO][2]


[1]:

[2]:

[To see links please register here]

You can add the `Text` as a `child` to a `Container` that has a `BoxDecoration` with `border` property:

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

```dart
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: Text('My Awesome Border'),
)
```

[1]: