Flutter如何实现OTP圆点占位UI输入时圆点动态变色逻辑

核心逻辑是通过状态变量记录当前已输入的OTP内容长度，渲染圆点时逐位判断位置是否已被填充，自动切换颜色，配合自定义数字键盘的点击事件更新状态即可，全程不需要唤起系统输入键盘。

具体实现步骤 #

• 第一步：定义基础状态变量
  在对应页面的State类中声明两个核心变量：

// OTP总位数，可根据设计要求调整为4位/6位
final int otpLength = 6;
// 存储用户当前输入的OTP内容
String enteredOtp = '';

• 第二步：实现可自动变色的占位圆点组件
  用Row横向排列所有圆点，每个圆点的颜色通过当前索引和已输入内容的长度做判断：索引小于已输入长度时显示蓝色，否则显示灰色。
  核心判断逻辑完全不需要记录每个圆点的单独状态，只需要关联已输入内容的长度即可，性能更好逻辑也更简单

Widget buildOtpIndicator() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: List.generate(otpLength, (index) {
      return Container(
        margin: const EdgeInsets.symmetric(horizontal: 10),
        width: 18,
        height: 18,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: index < enteredOtp.length ? Colors.blue : Colors.grey,
        ),
      );
    }),
  );
}

• 第三步：实现自定义数字键盘的交互逻辑
  因为要求数字键盘常驻显示，直接自绘键盘按键，给每个按键绑定点击回调，点击时更新enteredOtp状态即可：
  • 数字键（0-9）点击：如果当前输入长度未达到OTP总长度，将点击的数字追加到enteredOtp末尾，调用setState触发界面刷新
  • 删除键点击：如果当前输入内容不为空，移除enteredOtp最后一位字符，调用setState触发界面刷新

// 数字键点击处理
void handleNumberPress(String inputNum) {
  if (enteredOtp.length < otpLength) {
    setState(() {
      enteredOtp += inputNum;
    });
    // 输入满指定位数时可在此处追加自动校验逻辑
  }
}

// 删除键点击处理
void handleDeletePress() {
  if (enteredOtp.isNotEmpty) {
    setState(() {
      enteredOtp = enteredOtp.substring(0, enteredOtp.length - 1);
    });
  }
}

注意事项 #

• 不要引入TextField组件，避免点击时唤起系统软键盘，遮挡自定义键盘
• 圆点的尺寸、边距、色值可以直接对照设计稿参数调整，核心颜色判断逻辑不需要修改
• 如果需要输入错误的状态提示，只需要额外加一个错误状态的颜色判断分支即可，比如输入校验不通过时把已填充圆点改成红色

内容的提问来源于stack exchange，提问作者Moaz El-sawaf