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.

Victor Eronmosele · Accepted Answer · 2021-06-22 09:27:19Z

1035

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, 2021 at 9:27

Victor Eronmosele

7,4032 gold badges12 silver badges37 bronze badges

answered Nov 21, 2017 at 22:47

Shady Aziza

52.1k20 gold badges117 silver badges114 bronze badges

Add a comment |

Suragch · Accepted Answer · 2018-12-08 06:08:44Z

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, 2020 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, 2020 at 17:31
U can also use the short-hand BorderRadius.circular(8) instead of BorderRadius.all(Radius.circular(5.0)). — Son Nguyen, Aug 25, 2021 at 13:45

Peter Mortensen · Accepted Answer · 2021-04-17 15:44:47Z

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

Ahmed Sbai · Accepted Answer · 2023-03-07 02:57:51Z

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 7, 2023 at 2:57

Ahmed Sbai

13.5k10 gold badges25 silver badges48 bronze badges

answered Nov 2, 2021 at 8:26

Abdullah Waheed

3513 silver badges5 bronze badges

Add a comment |

krishnaacharyaa · Accepted Answer · 2023-08-18 16:09:15Z

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

Peter Mortensen · Accepted Answer · 2021-03-21 18:54:56Z

21

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.

edited Mar 21, 2021 at 18:54

Peter Mortensen

31k22 gold badges108 silver badges132 bronze badges

answered Nov 21, 2017 at 23:15

Rémi Rousselet

267k85 gold badges539 silver badges444 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2021-04-17 15:49:37Z

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:

m4n0 · Accepted Answer · 2021-09-25 09:32:23Z

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, 2021 at 9:32

m4n0

31k27 gold badges78 silver badges91 bronze badges

answered Sep 25, 2021 at 8:27

x86

5191 gold badge6 silver badges17 bronze badges

Add a comment |

Shirsh Shukla · Accepted Answer · 2022-03-07 11:42:39Z

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

CoderUni · Accepted Answer · 2020-06-07 13:45:01Z

6

You can use Container to contain your widget:

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

edited Jun 7, 2020 at 13:45

CoderUni

5,8347 gold badges29 silver badges61 bronze badges

answered Jun 5, 2020 at 11:20

竭智Dan

611 silver badge3 bronze badges

1

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

Add a comment |

Chris Catignani · Accepted Answer · 2020-07-05 12:59:40Z

5

Use a container with Boxdercoration.

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

edited Jul 5, 2020 at 12:59

Chris Catignani

5,17617 gold badges43 silver badges52 bronze badges

answered Jul 5, 2020 at 10:46

S.R Keshav

2,0131 gold badge12 silver badges14 bronze badges

1

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

Add a comment |

Jorge Wander Santana Ureña · Accepted Answer · 2021-05-29 21:10:34Z

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, 2021 at 21:10

Jorge Wander Santana Ureña

1,2001 gold badge15 silver badges16 bronze badges

Add a comment |

Ragavendra · Accepted Answer · 2023-10-18 13:12:23Z

4

You can use this method for adding border colour for a container.

Container(
      height: height * 0.06,
      width: width,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border.all(
          color: primaryColor,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(
        "data",
        style: const TextStyle(
          fontWeight: FontWeight.bold
        ),
      ),
    );

edited Oct 18, 2023 at 13:12

answered Oct 18, 2023 at 13:05

Ragavendra

414 bronze badges

Add a comment |

Waseem · Accepted Answer · 2023-10-04 13:18:20Z

You can achieve bottom rounded corner with three side borders.

Stack(
children: [
  Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.red, width: 2),
      borderRadius: const BorderRadius.only(
        topLeft: Radius.zero,
        topRight: Radius.zero,
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 1,
          ),
          Text("Dummy text"),
          const SizedBox(
            height: 10,
          ),
        ],
      ),
    ),
  ),
  Padding(
    padding: const EdgeInsets.only(left: 2, right: 2),
    child: Container(
      color: AppColors.highLighterBg,
      width: size.width,
      height: 10,
    ),
  )
],

);

Mol0ko · Accepted Answer · 2021-05-05 11:14:27Z

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 5, 2021 at 11:14

Mol0ko

3,1482 gold badges20 silver badges49 bronze badges

answered May 5, 2021 at 5:15

Nadeem Shahzad

311 bronze badge

Add a comment |

mewadaarvind · Accepted Answer · 2022-08-16 13:03:34Z

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

My Car · Accepted Answer · 2022-09-11 00:41:28Z

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, 2022 at 0:41

My Car

4,3997 gold badges21 silver badges58 bronze badges

Add a comment |

Faiz Ahmad Dae · Accepted Answer · 2023-01-03 08:13:04Z

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

Muhammad Bilal · Accepted Answer · 2023-02-07 11:48:17Z

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 7, 2023 at 11:48

answered Feb 7, 2023 at 11:46

Muhammad Bilal

114 bronze badges

Add a comment |

Ahmed Sbai · Accepted Answer · 2023-03-07 02:32:18Z

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 7, 2023 at 2:32

Ahmed Sbai

13.5k10 gold badges25 silver badges48 bronze badges

answered Jan 24, 2023 at 16:14

saud khan

111 bronze badge

Add a comment |

Binni kumari · Accepted Answer · 2024-01-12 13:20:33Z

     In Flutter, you can add a border to a widget using the Container widget and its decoration property. The BoxDecoration class allows you to define various visual elements, including borders.

     import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Border Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue,  // Set border color
                width: 2.0,          // Set border width
              ),
              borderRadius: BorderRadius.circular(8.0),  // Set border radius
            ),
            child: Center(
              child: Text(
                'Hello, Border!',
                style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Try this solution from latest version of Flutter V3.16

Hussain Mehdi · Accepted Answer · 2023-12-14 04:39:52Z

0

Just wrap the widget with container and decorate the container as you want.

answered Dec 14, 2023 at 4:39

Hussain Mehdi

92 bronze badges

1

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
– Community Bot
Dec 20, 2023 at 7:32

Add a comment |

Collectives™ on Stack Overflow

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

22 Answers 22

Border width

Border color

Border side

Border radius

Going on

Your Answer

Not the answer you're looking for? Browse other questions tagged
android
ios
flutter
dart
user-interface
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

22 Answers 22

Border width

Border color

Border side

Border radius

Going on

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged androidiosflutterdartuser-interface or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
android
ios
flutter
dart
user-interface
or ask your own question.