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

Question

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.

score 1004 · Accepted Answer · edited Jun 22 '21 at 09:27

1004

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

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'),
)

edited Jun 22 '21 at 09:27

Victor Eronmosele

7,040
2
10
33

answered Nov 21 '17 at 22:47

Shady Aziza

50,824
20
115
113

score 560 · Answer 2 · answered Dec 08 '18 at 06:08

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.

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

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

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

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

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/BoxDecoration are very flexible. Read Flutter — BoxDecoration Cheat Sheet for many more ideas.

@HaSnenTai Did you find any solution? In my design i need to give border bottom with pill like shape. How can i achieve this? — Robert Williams, Apr 12 '20 at 13:03
@Suragch The widget is Text which needs a strong (pill shaped) border. The text widget width is not fixed. For using custom drawing widget won't I need to provide fix properties? — Robert Williams, Apr 14 '20 at 17:31
@RobertWilliams, I don't know exactly what you are trying to do. I'd open a new question with an illustration and explanation of what isn't currently working. Feel free to link to it from here. — Suragch, Apr 15 '20 at 00:16
U can also use the short-hand `BorderRadius.circular(8)` instead of `BorderRadius.all(Radius.circular(5.0))`. — Son Nguyen, Aug 25 '21 at 13:45

score 36 · Answer 3 · edited Apr 17 '21 at 15:44

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"),
    )

score 35 · Answer 4 · edited Mar 07 '23 at 02:57

35

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)
    );
}

edited Mar 07 '23 at 02:57

Ahmed Sbai

10,695
9
19
38

answered Nov 02 '21 at 08:26

Abdullah Waheed

351
3
5

score 21 · Answer 5 · edited Mar 21 '21 at 18:54

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, you can use Container. Which is the combination of DecoratedBox, SizedBox and a few other useful widgets.

krishnaacharyaa · Answer 6 · 2023-08-18T16:09:15.443

Summary

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

Outcomes of the below explained borders:

Explaination

Basic

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

BorderColor, width and strokeAlign

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

Border only on specific side

      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

      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

    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"),
          ),
        ],
      ),

score 13 · Answer 7 · edited Apr 17 '21 at 15:49

Here, as the Text 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 in the Container 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:

score 9 · Answer 8 · edited Sep 25 '21 at 09:32

9

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),
        ),
      );

edited Sep 25 '21 at 09:32

m4n0

29,823
27
76
89

answered Sep 25 '21 at 08:27

x86

489
1
6
16

score 9 · Answer 9 · answered Mar 07 '22 at 11:42

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,
    )

score 6 · Answer 10 · edited Jun 07 '20 at 13:45

6

You can use Container to contain your widget:

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

edited Jun 07 '20 at 13:45

CoderUni

5,474
7
26
58

answered Jun 05 '20 at 11:20

竭智Dan

61
1
3

1

This does not anything over the accepted answer from 3 years prior. – nvoigt Feb 23 '21 at 11:26

score 6 · Answer 11 · edited Jul 05 '20 at 12:59

6

Use a container with Boxdercoration.

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

edited Jul 05 '20 at 12:59

Chris Catignani

5,040
16
42
49

answered Jul 05 '20 at 10:46

S.R Keshav

1,965
1
11
14

1

This does not anything over the accepted answer from 3 years prior. – nvoigt Feb 23 '21 at 11:26

score 4 · Answer 12 · answered May 29 '21 at 21:10

4

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

You could try this:

https://pub.dev/packages/outlined_text

DEMO

answered May 29 '21 at 21:10

Jorge Wander Santana Ureña

1,100
1
14
14

score 2 · Answer 13 · edited May 05 '21 at 11:14

2

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

code :

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

edited May 05 '21 at 11:14

Mol0ko

2,938
1
18
45

answered May 05 '21 at 05:15

Nadeem Shahzad

31
1

score 2 · Answer 14 · answered Aug 16 '22 at 13:03

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,
);

score 2 · Answer 15 · answered Sep 11 '22 at 00:41

2

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),
  ),
),

answered Sep 11 '22 at 00:41

My Car

4,198
5
17
50

score 2 · Answer 16 · answered Jan 03 '23 at 08:13

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],
      ),
    ),
  ],
)

score 1 · Answer 17 · edited Mar 07 '23 at 02:32

1

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

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

edited Mar 07 '23 at 02:32

Ahmed Sbai

10,695
9
19
38

answered Jan 24 '23 at 16:14

saud khan

11
1

Muhammad Bilal · Answer 18 · 2023-02-07T11:48:17.593

1

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),
  ),
)

edited Feb 07 '23 at 11:48

answered Feb 07 '23 at 11:46

Muhammad Bilal

13
4

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

18 Answers18

Border width

Border color

Border side

Border radius

Going on

Linked

Related