How to create a DOM element and declare it with an ID in Flutter Web

Question

im trying to sign in with signInWithPhoneNumber from firebaseAuth for flutter web, but i want to change the default reCaptcha to an inline widget , according to the documentation say this: To add an inline widget, specify a DOM element ID to the container argument of the RecaptchaVerifier instance

but im kind of new in dart and flutter so i dont know how to do that , is there a widget that i can create so i can add an ID and make it part of DOM?? .... i add a pic of the documentation of what firebaseAuth says:

Answer 1

Late to the game but I hope this might be helpful someone else...

Insert a div in your .html with your targeted id

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

Ensure it is the same id indicated in your dart code under 'container'

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

You might want to change the z-index of your recaptchaDOM div so that it appears in front of your flutter layer. And upon verification, call a function in dart to js to remove all children of your recaptchaDOM div.