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

user_4513250 0
Viewed 763

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: enter image description here

flutter-web dart flutter
2 Answers

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.

user_76171410

I was stuck in this problem too. In the end, I decided not to use the inline variant. The default settings work (it has a few bugs but better than nothing).

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('<PHONE>', RecaptchaVerifier(
  size: RecaptchaVerifierSize.normal,
  theme: RecaptchaVerifierTheme.dark,
));

@lolerla seems to be right about the implementation. But that seems like a lot of work to me. The inline variant should come out of the box too in my opinion.

user_119594210
Related