alertdialog 位于 webview 下面，所以用户看不到 alertdialog

Question

我有一个使用 flutter 和 flutter_webview_plugin 库构建的简单 webview 应用程序。我正在尝试使用 firebase cloud messaging 添加推送通知。当应用程序在后台运行或关闭时，推送通知工作正常。如果该应用程序已打开，我将其配置为显示 alert dialog。但是这部分不起作用。

我删除了 webview 小部件，而是添加了一个 appBar 小部件，然后热重新加载了应用程序。 alert dialog 实际上在那里工作得很好。 webview 层似乎在 alert dialog 层之上。所以即使 alert dialog 确实正确弹出，用户也看不到它。

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

flutter_webview_plugin 包无法做到这一点，您必须切换到官方 webview_flutter 才能做到这一点...

flutter_webview_plugin 开发者也给了你这条警告信息：

警告：webview 没有集成到 widget 树中，它是 flutter view 之上的原生视图。您将无法使用小吃店、对话框...

祝你好运

Answer 2

您可以先使用此行隐藏 webviewplugin：webviewPlugin.hide();然后是运行创建警报对话框的代码：

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(),
                  ),
                ],
              ),
        );

alertdialog 位于 webview 下面，所以用户看不到 alertdialog

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

webview

android-alertdialog

flutter