alertdialog lies below webview, so the user cannot see the alertdialog

Question

I have a simple webview app built with flutter and flutter_webview_plugin library. I am trying to add push notification with firebase cloud messaging. The push notification works fine when the app is running in background or is switched off. If the app is on, I configured such that it shows an alert dialog. But this part does not work.

I removed the webview widget and instead added an appBar widget then hot reloaded the app. alert dialog was actually there working fine. It seems like the webview layer is above the alert dialog layer. So even though alert dialog did pop out correctly, the user cannot see it.

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'dart:io';
import 'package:firebase_messaging/firebase_messaging.dart';

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

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

  void firebaseCloudMessaging_Listeners() {
    _firebaseMessaging.getToken().then((token) {
      print(token);
    });

    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
                content: ListTile(
                  title: Text(message['notification']['title']),
                  subtitle: Text(message['notification']['body']),
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Ok'),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                ],
              ),
        );
      },
      onResume: (Map<String, dynamic> message) async {
        print('on resume $message');
      },
      onLaunch: (Map<String, dynamic> message) async {
        print('on launch $message');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: SafeArea(
          child: new WebviewScaffold(
            url: "https://m.url.co.kr",
            hidden: true,
          ),
        ),
      ),
    );
  }
}

Answer 1

You can first hide the webviewplugin using this line: webviewPlugin.hide(); and then run the code to create the alertdialog as such:

webviewPlugin.hide();
showDialog(
          context: context,
          builder: (context) => AlertDialog(
                content: ListTile(
                  title: Text(message['notification']['title']),
                  subtitle: Text(message['notification']['body']),
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Ok'),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                ],
              ),
        );

Answer 2

This is not possible with the flutter_webview_plugin package, you have to switch to the offical webview_flutter in order to do this...

The flutter_webview_plugin devs also give you this warning message:

Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. you won't be able to use snackbars, dialogs ...

Good luck