求助：如何在Flutter中实现带文字的完整虚线圆形边框？

你当前的代码问题在于DottedBorder的子组件是空的SizedBox，既没有尺寸也未包含文字，且未让子组件尺寸配合radius形成正圆形。以下是修正后的实现方案：

完整代码示例 #

Center(
  child: Text('Received'),
),
SizedBox(height: 30),
Center(
  child: Text('Shipped'),
),
SizedBox(height: 30),
Center(
  child: DottedBorder(
    dashPattern: const [8, 4],
    strokeWidth: 1,
    color: mainColor,
    // radius设为子组件边长的一半，确保是正圆形
    radius: Radius.circular(20),
    child: SizedBox(
      // 设置正方形尺寸，宽高一致才能配合radius形成圆形
      width: 40,
      height: 40,
      child: Center(
        // 将文字放在DottedBorder内部，形成整体效果
        child: Text('Preparing'),
      ),
    ),
  ),
),
SizedBox(height: 30),
Center(
  child: Text('Delivered'),
)

关键修改说明 #

• 给子组件设置固定正方形尺寸：SizedBox的宽高保持一致，配合radius才能渲染出正圆形边框
• 将文字嵌入边框内部：把Text放在DottedBorder的子组件中，确保文字与边框形成完整的圆形组合
• 匹配radius与尺寸：radius的值等于子组件边长的一半（比如宽高40时，radius设为20），保证边框是标准圆形

内容的提问来源于stack exchange，提问作者Passionate Programmer