Flutter中如何实现OR文字位于水平分割线正中间的效果

实现方案 #

可以通过Row组件配合左右两侧的Divider实现，该方案无需硬编码尺寸，自适应所有屏幕宽度，OR文字始终处于分割线正中间：

import 'package:flutter/material.dart';

class OrDivider extends StatelessWidget {
  const OrDivider({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: const [
        // 左侧分割线，自动填充剩余空间
        Expanded(
          child: Divider(
            thickness: 1,
            color: Colors.grey,
            height: 1,
          ),
        ),
        // 中间OR文字，设置左右间距和分割线拉开距离
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Text(
            "OR",
            style: TextStyle(
              color: Colors.grey,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
        // 右侧分割线，自动填充剩余空间
        Expanded(
          child: Divider(
            thickness: 1,
            color: Colors.grey,
            height: 1,
          ),
        ),
      ],
    );
  }
}

使用方式 #

直接在需要插入的位置调用OrDivider()组件即可，可根据需求自行调整以下参数适配你的设计风格：

• 修改Divider的thickness参数调整分割线粗细
• 修改Padding的horizontal参数调整OR文字和两侧分割线的间距
• 修改Text和Divider的color参数自定义配色
• 修改Text的fontSize参数调整文字大小

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