¿Estas buscando una forma de añadir la verificación de reCaptcha de Google en un formulario en una aplicación/web hecha con flutter? Aunque puede ser poco común este requerimiento, te explico brevemente como hacerlo (Puedes ver un proyecto de ejemplo, link al final).
1. Usar la dependencia webview_flutter_plus,
Ir al archivo pubspec.yaml, y establecer la dependencia en la sección correspondiente.
webview_flutter_plus: 0.3.0+2
2. Crear una entrada en la seccion flutter/assets > assets/webpages/
3. Ahora creamos ese directorio assets/webpages/, dentro creamos un archivo index.html, escribimos el código de nuestro recaptcha de Google:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>reCAPTCHA</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <div id="recaptcha" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div> </body> </html>
4. En nuestro pagina/widget, importar dependencia:
import ‘package:webview_flutter_plus/webview_flutter_plus.dart’;
5. Luego usar WebViewPlus dentro del build:
Container( height: 100.0, child: WebViewPlus( javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (controller) { controller .loadUrl("assets/webpages/index.html"); }, ), ),
6. Ahora unos permisos que debemos habilitar en el archivo AndroidManifest.xml (android/app/src/main/)
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <application android:usesCleartextTraffic="true">...</aplication>
7. Corre la aplicación flutter run, y podemos ver lo siguiente:
Obviamente tendras que dar permisos al reCAPTCHA para pruebas en localhost.
Para obtener información del estado del captcha te dejo este video.
Puedes descargar este ejemplo de nuestro repositorio.