CODEWITHSUNDEEP
flutterdartcontainersborder
MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2490

How to create circle container with border in flutter?

As you can notice, the background color of the decoration is slightly overflowing the circular border. I've tried in different ways (e.g. using ClipOval) but the result is always the same.

enter image description here

Upvotes: 12

Views: 25595

Answers (3)

MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2490

I have just faced the same issue. Easy workaround:

     Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          color: Colors.green.withOpacity(0.25), // border color
          shape: BoxShape.circle,
        ),
        child: Padding(
          padding: EdgeInsets.all(2), // border width
          child: Container( // or ClipRRect if you need to clip the content
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue, // inner circle color
            ),
            child: Container(), // inner content
          ),
        ),
      ),

Reference

Upvotes: 26

Mayank Pandey
Mayank Pandey

Reputation: 31

Container(
            height:80,
            width:80,
            decoration:BoxDecoration(
             
              color:Colors.red,
            borderRadius:BorderRadius.circular(50),
              border:Border.all(
              color:Colors.white,
              width:8
              ),
             
            ),
            child:
            Center(child:
            Text("4",
                      style:TextStyle(
                      color:Colors.white,
                        fontWeight:FontWeight.bold,
                        fontSize:20
                      )))

Container with border

1

Upvotes: 3

Falgun Sonwane
Falgun Sonwane

Reputation: 226

Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(width: 1, color: Colors.red)
            ),
          ),

Upvotes: 20

Related Questions