How to prevent tap on AlertDialog area from passing behind?

Question

I am using a WebView to show an embedded youtube video.

After that I show an AlertDialog that appears over that WebView and if I tap on the AlertDialog area, the behind video will handle the tap events, such as playing, pausing, etc.

How can I prevent the tap on AlertDialog area from passing behind?

Next you can see an image of that sample App and its source code. There is a floating button that launches the AlertDialog with the text "Ola Mundo". Then taping on the area of the AlertDialog will make the video start playing.

import 'package:webview_flutter/webview_flutter.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late double screenWidth;
  late double screenHeight;

  // Get the proportionate height as per screen size
  double getProportionateScreenHeight(double inputHeight) {
    // 812 is the layout height that designer use
    return (inputHeight / 812.0) * screenHeight;
  }

// Get the proportionate height as per screen size
  double getProportionateScreenWidth(double inputWidth) {
    // 375 is the layout width that designer use
    return (inputWidth / 375.0) * screenWidth;
  }

  Uri getYoutubeUrl(BuildContext ctx, id) {
    return Uri.dataFromString(
        '<iframe width="100%" height="${getProportionateScreenWidth(screenHeight)}"'
        ' src="https://www.youtube.com/embed/$id"'
        ' title="YouTube video player" frameborder="0" autoplay;"'
        ' allowfullscreen></iframe>',
        mimeType: 'text/html');
  }

  @override
  Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    screenWidth = mediaQueryData.size.width;
    screenHeight = mediaQueryData.size.height;

    return Scaffold(
      appBar: AppBar(title: const Text("Sample video")),
      body: SingleChildScrollView(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: getProportionateScreenHeight(screenWidth),
          child: WebViewWidget(
              controller: WebViewController()
                ..setJavaScriptMode(JavaScriptMode.unrestricted)
                ..setBackgroundColor(Colors.black)
                ..loadRequest(getYoutubeUrl(context, "HF05SHKi55g"))),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (ctx) => const AlertDialog(
                    content: Text("Ola Mundo"),
                  ));
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

---

Updated on 2023-03-01

Related to Flutter Issue PlatformView should support IgnorePointer widget on iOS