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

Question

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

但我对 dart 和 flutter 有点陌生，所以我不知道该怎么做，有没有我可以创建的小部件，这样我就可以添加一个 ID 并使其成为 DOM 的一部分？.... 我添加了一张关于 firebaseAuth 内容的文档图片：

Answer 1

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

在 .html 中插入一个带有目标 ID 的 div

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

确保它与“容器”下的 dart 代码中指示的 ID 相同

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptchaDOM',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

您可能想要更改 recaptchaDOM div 的 z-index，以便它出现在 flutter 层的前面。验证后，调用 dart 到 js 中的函数来删除 recaptchaDOM div 的所有子级。