Flutter - How to add border in Container

In flutter, Container is a very useful widget, In this example, we are going to show you the easiest way to add borders to the Container. Let's see below example.

How to Add Border on Container :

 

Container(
    height:80,
    width:200,
    decoration: BoxDecoration(
      border: Border.all(
          color: Colors.red,
          width: 5, //width
        ),
      borderRadius: BorderRadius.circular(8)
    ),  
)

 

How to Add Specific Border Side: Left, Right, Top, Bottom to Container :

We can give to a specific side of the border to container like the below example

Container(
    margin: EdgeInsets.only(top:20),
    height:30,
    width:300,
    decoration: BoxDecoration(
      border: Border(

        left: BorderSide(
              color: Colors.red, width: 2
            ),
        right: BorderSide(
              color: Colors.yellow, width: 4
            ),
          top: BorderSide(
              color: Colors.pinkAccent, width: 6
            ),
          bottom: BorderSide(
              color: Colors.amber, width: 8
            ),

      )
    ),  
)

 

Full code:

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Errorgram",
          style: TextStyle(color: Colors.black),
        ), //Change color here
      ),
      body: Container(
        margin: EdgeInsets.only(left: 10, right: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 80,
              width: 200,
              decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.red,
                    width: 5, //width
                  ),
                  borderRadius: BorderRadius.circular(8)),
            ),
            Container(
              margin: EdgeInsets.only(top: 20),
              height: 30,
              width: 300,
              decoration: BoxDecoration(
                  border: Border(
                left: BorderSide(color: Colors.red, width: 2),
                right: BorderSide(color: Colors.yellow, width: 4),
                top: BorderSide(color: Colors.pinkAccent, width: 6),
                bottom: BorderSide(color: Colors.amber, width: 8),
              )),
            )
          ],
        ),
      ),
    );
  }
}

I hope it can help you...

Tags: