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

Question

如您所见，装饰的背景颜色略微溢出了圆形边框。 我尝试过不同的方式（例如使用 ClipOval），但结果总是一样的。

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

参考：

Answer 2

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

Answer 3

容器（高度：80，宽度：80，装饰：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
                  )))
    

[带边框的容器][1] [1]: https://i.stack.imgur.com/N81gH.png