如何在 flutter 中创建带边框的圆形容器？

Question

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

Answer 1

    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:

Answer 2

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

Answer 3

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] [1]: https://i.stack.imgur.com/N81gH.png