如何将Divider两端尖角改为平滑圆角？Flutter实现iOS风格分割线

问题说明 #

需要在Android端实现iOS风格的圆角分割线，预期效果为宽度134px、高度5px、圆角100px的白色长条。尝试用Container包裹Divider并设置borderRadius裁剪边角，但未达到预期效果。

尝试过的代码 #

Container(
  width: 135,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(100),
  ),
  child: Divider(
    height: 25,
    thickness: 5,
    color: Color(0xFFFFFFFF),
  ),
),

解决方案 #

Divider组件的设计初衷是用于布局分隔，其内部绘制逻辑导致外层Container的圆角裁剪无法作用到分割线本身。直接使用Container来实现该圆角分割线更简单高效，完全匹配参考的CSS样式：

Container(
  width: 134,
  height: 5,
  decoration: BoxDecoration(
    color: Color(0xFFFFFFFF),
    borderRadius: BorderRadius.circular(100),
  ),
),

补充说明 #

• 若需要保留原Divider的上下间距（对应原代码中的height:25），可以在上述Container外层添加Padding或设置margin来实现
• 该方案通过Container的height直接控制分割线厚度，borderRadius直接作用于容器，可完美实现圆角效果

内容的提问来源于stack exchange，提问作者Beatle Refractor