Reputation: 120739

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.

Upvotes: 594

Answers (25)

Anas Albattiri

Reputation: 41

In Flutter, the Text widget itself does not have a direct property for adding a border. However, you can achieve this effect in multiple ways, and this an a way:

Using Container with BoxDecoration

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 2), 
  ),
  padding: EdgeInsets.all(8), // Optional padding
  child: Text(
    'Hello, Flutter!',
    style: TextStyle(fontSize: 20),
  ),
)

Upvotes: 2

Fingertips

Reputation: 73

Container is expensive, if you only want to add a border to a widget use DecoratedBox instead:

DecoratedBox(
 decoration: BoxDecoration(
  border: Border.all(color: appColorScheme(context).secondary),
  borderRadius: BorderRadius.circular(CupertinoContextMenu.kOpenBorderRadius),
 ),
 child: //Your Widget,
)

Upvotes: 2

Touseef khattak

Reputation: 255

To add a border to your Text widget in Flutter, wrap it with a Container and use BoxDecoration for decoration:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black, // Adjust color as needed
      width: 2.0, // Adjust width as needed
    ),
  ),
  child: Text(
    'Your Text Here',
  ),
)

This creates a black border around your text. Adjust color and width as needed.

Upvotes: 0

Binni kumari

Reputation: 358

     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

Upvotes: 3

Hussain Mehdi

Reputation: 7

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

Upvotes: 0

Ragavendra

Reputation: 41

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

Upvotes: 4

Waseem

Reputation: 47

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

);

Upvotes: 3

krishnaacharyaa

Reputation: 25080

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

Upvotes: 32

Abdullah Waheed

Reputation: 351

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

Upvotes: 35

saud khan

Reputation: 11

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

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

Upvotes: 1

Muhammad Bilal

Reputation: 21

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

Upvotes: 2

Faiz

Reputation: 6960

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

Upvotes: 2

My Car

Reputation: 4576

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

Upvotes: 2

mewadaarvind

Reputation: 399

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

Upvotes: 2

Shirsh Shukla

Reputation: 5993

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

Upvotes: 9

x86

Reputation: 519

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

Upvotes: 9

Shady Aziza

Reputation: 53347

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

Upvotes: 1081

Jorge Wander Santana Ureña

Reputation: 1272

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

You could try this:

https://pub.dev/packages/outlined_text

DEMO

Upvotes: 4

Nadeem Shahzad

Reputation: 31

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

Upvotes: 2

Kab Agouda

Reputation: 7289

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:

Upvotes: 13

Sanjayrajsinh

Reputation: 17219

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

Upvotes: 40

Rémi Rousselet

Reputation: 277567

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.

Upvotes: 21

S.R Keshav

Reputation: 2082

Use a container with Boxdercoration.

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

Upvotes: 5

竭智Dan

Reputation: 61

You can use Container to contain your widget:

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

Upvotes: 6

Suragch

Reputation: 512506

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.

Upvotes: 606

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

Answers (25)

Border width

Border color

Border side

Border radius

Going on

Related Questions