如何在Flutter的Container组件与border边框之间添加间距

解决方案 #

你需要的边框和Container内部填充区间距，可以通过嵌套Container加内边距的方式实现，这是最简便的方案：

Container(
  width: 50,
  decoration: BoxDecoration(
    border: Border.all(width: 2, color: Colors.red),
    borderRadius: BorderRadius.circular(25),
  ),
  // 此处调整数值即可修改边框和内部填充区的间距
  padding: const EdgeInsets.all(3),
  child: Container(
    decoration: BoxDecoration(
      color: const Color(0xFF229592),
      // 内层圆角 = 外层圆角 - 边框宽度 - 间距，可避免边角出现不规则留白
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

原代码不生效的原因 #

BoxDecoration中的color填充区域和border默认是紧贴的，边框直接绘制在装饰区域的边缘，没有预留间隔的属性，所以需要通过外层容器画边框、加内边距，内层容器负责填充背景色的方式实现间隔效果。

内容的提问来源于stack exchange，提问作者Dinesh Nagarajan