Menu
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:
222
Flutter for the web is a code-compatible implementation of Flutter that is rendered using standards-based web technologies: HTML, CSS, and JavaScript. With Flutter for web, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server.
Flutter actually controls every pixel that is drawn to the screen and doesn't use HTML, JavaScript, or CSS to define any of its look or logic.
Yes. Flutter is great for both mobile and web app development as it is highly compatible with current-generation web rendering technologies like HTML, CSS, and JavaScript. Using Flutter, you can easily compile the existing code into a client experience, embed it into the browser, and then deploy it to any web server.
To create a DOM element, you use the createElement () method. And attach the <div> element to the DOM tree by using the appendChild () method: Besides using the innerHTML property, you can use the DOM methods to create text nodes and append the text nodes to the new element:
This page covers the following steps for getting started with web support: Configure the flutter tool for web support. Create a new project with web support. Run a new project with web support. Build an app with web support. Add web support to an existing project. To create a Flutter app with web support, you need the following software:
The tester needs to have an id on flutter Elements. I am looking at the documentation and this is what I found But I can't figure how to do this. I try for example
The createElement () method creates an Element Node with the specified name. Tip: After the element is created, use the element .appendChild () or element .insertBefore () method to insert it to the document. Required.
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.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
