Flutter中如何在顶部边框线中间添加文本

方法一：Row + Expanded + Divider 组合实现 #

这种方式逻辑直观，利用Row的横向布局特性，让两侧分割线自动填充剩余空间，中间放置文本。

示例代码：

Container(
  padding: const EdgeInsets.symmetric(vertical: 16),
  child: Row(
    children: [
      Expanded(
        child: Divider(
          color: Colors.grey.shade300,
          thickness: 1,
        ),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12),
        child: Text(
          "或使用其他方式",
          style: TextStyle(
            color: Colors.grey.shade600,
            fontSize: 14,
          ),
        ),
      ),
      Expanded(
        child: Divider(
          color: Colors.grey.shade300,
          thickness: 1,
        ),
      ),
    ],
  ),
)

说明：

• Expanded 使两侧Divider平分Row剩余宽度，保证文本居中时两侧线长度一致
• 用Padding给文本和分割线留出间距，避免布局拥挤
• 可通过修改Divider的color、thickness调整线样式，按需自定义Text的字体、颜色等属性

方法二：Stack + Positioned 实现 #

如果需要更灵活的布局控制（比如线的长度非全屏），可以用Stack叠加分割线和文本，通过定位让文本覆盖中间的线。

示例代码：

Stack(
  alignment: Alignment.center,
  children: [
    Divider(
      color: Colors.grey.shade300,
      thickness: 1,
    ),
    Container(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      color: Colors.white, // 背景色需与父容器一致，用于覆盖中间的线
      child: Text(
        "登录或注册",
        style: TextStyle(
          color: Colors.grey.shade600,
          fontSize: 14,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  ],
)

说明：

• Stack让分割线与文本重叠，alignment: Alignment.center确保文本居中
• 文本外层的Container设置背景色，覆盖分割线中间区域，形成"线在文本两侧"的视觉效果
• 若父容器背景不是白色，需同步修改Container的color属性

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