如何在 Flutter Web 中创建 DOM 元素并使用 ID 声明它

Posted 2023-02-23

【中文标题】如何在 Flutter Web 中创建 DOM 元素并使用 ID 声明它

【英文标题】：How to create a DOM element and declare it with an ID in Flutter Web

【发布时间】：2021-01-22 15:16:26

【问题描述】：

我正在尝试使用 firebaseAuth 中的 signInWithPhoneNumber 登录 Flutter Web，但我想将默认的 reCaptcha 更改为内联小部件，根据文档说：要添加内联小部件，请指定 DOM 元素 ID到 RecaptchaVerifier 实例的容器参数

但我在 dart 和 flutter 方面有点新，所以我不知道该怎么做，有没有我可以创建的小部件，所以我可以添加一个 ID 并使其成为 DOM 的一部分？ ....我添加了 firebaseAuth 所说的文档图片：

【问题讨论】：

您是否从其他地方找到了答案？如果有，请分享。

不，没有人帮助我，所以我在 web 上禁用了短信功能，所以现在 flutter web 已经稳定了，我真的希望 Flutter 社区能够热心帮助其他人

我也面临同样的问题。此外，托管我的颤振网络应用程序后，身份验证服务不起作用，而它在 localhost 中工作正常。有什么想法吗？

【参考方案1】：

游戏迟到了，但我希望这可能对其他人有所帮助...

在您的 .html 中使用您的目标 id 插入一个 div

  <div id="recaptchaDOM"></div>

确保它与 'container' 下的 dart 代码中指示的 id 相同

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('[phone]', RecaptchaVerifier(
  container: 'recaptchaDOM',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

您可能想要更改 recaptchaDOM div 的 z-index 以使其显示在颤振层的前面。并在验证后，调用 dart 中的函数到 js 以删除您的 recaptchaDOM div 的所有子项。