You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何无需第三方包实现短信自动填充OTP输入框?

Flutter 无需第三方包实现OTP自动填充

可以实现,你当前代码里的autofillHints: const [AutofillHints.oneTimeCode]是正确的基础配置,但还需要满足平台相关要求和补充必要的组件包裹:

核心配置补充

1. 包裹AutofillGroup

系统需要通过AutofillGroup来管理自动填充的上下文,把你的Form组件包裹在AutofillGroup内:

AutofillGroup(
  child: Form(
    key: controller.fOtpCode,
    child: TextFormField(
      key: const Key(LoginScreen.otpTextFieldKey),
      validator: (_) => controller.cOtpCode.text.isOTPCode(),
      onFieldSubmitted: (_) => controller.onTapSendOtpCode(),
      autofillHints: const [AutofillHints.oneTimeCode],
      textInputAction: TextInputAction.done,
      keyboardType: TextInputType.number,
      controller: controller.cOtpCode,
    ),
  ),
)

2. 短信格式要求

不同平台对触发自动填充的短信格式有明确要求:

  • Android:短信必须包含应用关联的域名(需提前配置数字资产链接绑定域名与包名),格式示例:

    你的验证码是123456。@your-app-domain.com #123456

  • iOS:短信需要包含应用的Bundle ID,格式示例:

    你的验证码是123456。BundleID:com.your.app #123456

3. 平台额外设置

  • Android:需在你的域名下配置assetlinks.json文件,验证应用与域名的关联关系,确保系统能识别短信属于你的应用。
  • iOS:iOS 12及以上系统原生支持,无需额外配置链接,但要确保应用权限正常开启。

测试注意事项

  • 必须使用真实短信发送测试,模拟器手动输入的短信可能无法触发自动填充逻辑。
  • 部分国产Android厂商有自定义的自动填充规则,需确保应用的「自动填充服务」权限已开启。

内容的提问来源于stack exchange,提问作者yazicifatihcan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 05:35:10