如何在颤动中创建带边框的圆形容器？答案

【问题标题】：How to create circle container with border in flutter?如何在颤动中创建带边框的圆形容器？
【发布时间】：2021-03-03 04:37:32
【问题描述】：

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

【问题讨论】：

标签： flutter dart containers border

【解决方案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:

【讨论】：

这比使用边框参数效果更好，因为它不会在圆形边框周围留下白色像素

【解决方案2】：

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

【讨论】：