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

Question

您可能已经注意到，装饰的背景颜色略微溢出了圆形边框。 我尝试过不同的方法（例如使用ClipOval），但结果始终相同。

- MD MEHEDI HASAN

Answer 1

我刚刚遇到了同样的问题。简单的解决方法是：

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

参考资料

- MD MEHEDI HASAN

---

这比使用边框参数更好，因为它不会在圆形边界周围留下白色像素。 - Ismaeel Sherif

如果内部颜色要透明并显示背景，则此方法无效。 - NullByte08

Answer 2

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

- Falgun Sonwane

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

带边框的容器

- Mayank Pandey