How to create circle container with border in flutter?

user_12755955 0
Viewed 11535

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

dart flutter containers border
3 Answers
    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
          ),
        ),
      ),

Ref:

user_127559550 
Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(width: 1, color: Colors.red)
            ),
          ),
user_129489910 
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

user_75178600
Related