Flutter中使用pinput组件时如何在输入框中间添加分隔线

直接用pinput内置的separatorBuilder属性就能实现，不需要修改组件源码，适配所有pinput的样式（下划线款、方框款、圆角款都通用）。

实现步骤 #

• 先升级pinput到2.0及以上版本，低版本不支持分隔组件自定义，在pubspec.yaml中配置依赖即可，推荐使用最新稳定版：

  dependencies:
    pinput: ^3.0.1
  

• 配置separatorBuilder参数，按索引判断要插入分隔线的位置：pinput的输入框索引从0开始计数，如果你要做6位输入框、在第3位和第4位中间加分隔线，就在索引为2的位置（第3个输入框的后方）返回分隔线组件，其余位置返回普通间距即可。

可直接复用的代码示例 #

Widget buildPinInput() {
  return Pinput(
    length: 6, // 按你的需求修改总输入位数
    // 替换成你自己已经写好的输入框样式即可
    defaultPinTheme: PinTheme(
      width: 40,
      height: 50,
      textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
      decoration: const BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.grey, width: 1)),
      ),
    ),
    // 核心：分隔组件构建逻辑
    separatorBuilder: (index, totalLength) {
      // 6位输入框在中间位置（第3个框后）加分隔线
      if (index == 2) {
        return Container(
          margin: const EdgeInsets.symmetric(horizontal: 10),
          width: 15,
          height: 2,
          color: Colors.grey,
        );
      }
      // 其余输入框之间保留普通间距
      return const SizedBox(width: 16);
    },
    onCompleted: (verifyCode) {
      // 输入完成后的逻辑
      debugPrint('输入的验证码是：$verifyCode');
    },
  );
}

自定义调整说明 #

• 分隔线样式可以自由修改：调整Container的宽高、颜色、边距，甚至替换成竖线、装饰图标都可以
• 如果需要多处分隔（比如身份证号、银行卡号输入场景），只要在判断条件里加上对应索引即可，比如18位身份证号就在索引3、7、11、15的位置都返回分隔线组件
• 不管你用的是下划线样式、方框样式还是圆角边框样式的pinput，这套逻辑都通用，不需要修改原有主题配置

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