Flutter中使用sms_autofill填充OTP后无按钮直接跳转页面

针对你使用sms_autofill包的场景，只需利用组件的回调方法就能实现OTP填充完成后自动跳转，具体步骤如下：

核心实现逻辑 #

通过PinFieldAutoFill组件的回调监听OTP的填充状态，当OTP长度符合预设位数时，直接触发页面跳转。

代码示例 #

假设你的OTP是6位（和截图一致），可以这样写：

PinFieldAutoFill(
  // 设置你的OTP位数
  codeLength: 6,
  // 方案1：使用onCodeSubmitted回调（自动填充完成时会触发）
  onCodeSubmitted: (String otpCode) {
    // 跳转到下一个页面，根据你的需求选择路由方法
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const YourNextPage()),
    );
  },
  // 方案2：使用onCodeChanged回调（实时监听输入变化）
  onCodeChanged: (String? otpCode) {
    // 当OTP长度达到预设值时触发跳转
    if (otpCode != null && otpCode.length == 6) {
      // 可选：加个短延迟确保填充完全完成
      Future.delayed(const Duration(milliseconds: 200), () {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => const YourNextPage()),
        );
      });
    }
  },
)

注意事项 #

• 权限配置：确保已经在AndroidManifest.xml（Android）和Info.plist（iOS）中配置了读取短信的相关权限，否则sms_autofill无法获取短信内容
• 短信格式：发送的OTP短信需要包含清晰的验证码内容，比如"Your verification code is 123456"，这样插件才能正确识别提取OTP
• 路由选择：跳转时根据业务需求选择push（保留当前页面）或pushReplacement（替换当前页面，适合登录/验证流程）

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