How to 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

User · Answer

As stated in the documentation  flutter prefer composition over parameters  Most of the time what you re looking for is not a property  but instead a wrapper  and sometimes a few helpers  builder    For borders what you want is 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

User · Answer

You can use Container to contain your widget   Container    decoration  BoxDecoration      border  Border all      color  Color 0xff000000       width  1          child  Text

User · Answer

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                    lt --- 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                        lt --- 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                        lt --- 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                        lt --- left side         color  Colors black          width  3 0                 top  BorderSide                         lt --- 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                      lt --- border radius here                 Going on  DecoratedBox BoxDecoration are very flexible  Read Flutter     BoxDecoration Cheat Sheet for many more ideas

User · Answer

You can add the TextField as a child to a Container that has a BoxDecoration with border property     new 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

User · Answer

Best way is using BoxDecoration    Advantage   You can set border of widget You can set border Color or Width You can set Rounded corner of border You can add Shadow of 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

User · Answer

Using BoxDecoration   is the best way to show border   Container    decoration  BoxDecoration      border  Border all      color  Color 0xff000000       width  4          child    Your child widget      You can also view full format here

User · Answer

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

User · Answer

Use a container with Boxdercoration   BoxDecoration      border  Border all        width  3 0            borderRadius  BorderRadius circular 10 0

[flutter] How to add a border to a widget in Flutter?

Examples related to flutter

Examples related to dart

Examples related to flutter-widget