Captcha in WebView flutter not working in Dialog

56 Views Asked by At

I have a recaptcha on a html webpage, but it is not work when the WebView is inside Dialog (the captcha is not showing at all). It work well when the WebView is outside Dialog

import 'package:flutter/material.dart';
import './web_view_stack.dart';

import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const Scaffold(
        backgroundColor: Colors.white,
        body: WebViewApp()
      ),
    );
  }
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {

  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://nhathuocphuongthao.com/captcha'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        const SizedBox(height: 100),
        // Expanded(
        //   child: Container(
        //     // color: Colors.amber,
        //     // width: 100,
        //     child: WebViewStack(controller: controller), // captcha working when WebView is outside Dialog
        //   ),
        // ),
        TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog.fullscreen(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('This is a fullscreen dialog.'),
                  Expanded(
                    child: Container(
                      // width: 100,
                      child: WebViewStack(controller: controller),
                    ),
                  ),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Close'),
                  ),
                ],
              ),
            ),
          ),
          child: const Text('Show Fullscreen Dialog'),
        ),
      ],
    );
  }
}

web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
const WebViewStack({required this.controller, super.key});

  final WebViewController controller;

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller
          ..setJavaScriptMode(JavaScriptMode.unrestricted),
        ),
      ],
    );
  }
}

How to make the WebView captcha work inside Dialog? I haven't found any log which relevant to the issue, anyway to debug why it's not working?

0

There are 0 best solutions below

Related Questions in FLUTTER-CAPTCHA