Flutter Firebase 消息传递 - 应用打开时未显示推送通知

Posted 2023-02-23

【中文标题】Flutter Firebase 消息传递 - 应用打开时未显示推送通知

【英文标题】：Flutter Firebase messaging - push notification is not showing when app is open

【发布时间】：2020-12-31 20:04:44

【问题描述】：

我是 Flutter 的新手，我只是想在我的 Flutter 应用程序中接收 Firebase 推送通知。当应用程序关闭并在后台接收推送通知。但是当应用程序打开时，推送通知正在接收，但它没有显示警报通知（如果它已打开，我想在我的应用程序中将推送通知标题和正文显示为警报）。这是我的代码。

_fcm.configure(
      onMessage: (Map<String, dynamic> message) async 
        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(),
              ),
            ],
          ),
        );
        print("onMessage: $message");
      ,
      onLaunch: (Map<String, dynamic> message) async 
        print("onLaunch: $message");
        
      ,
      onResume: (Map<String, dynamic> message) async 
        print("onResume: $message");
      ,
    );

有人可以帮我解决这个问题吗？

【参考方案1】：

最后，我能够通过使用 overlay_support 包来管理我的问题

我参考了以下问题链接：

Flutter - Firebase Messaging Snackbar not showing

Flutter - how to get current context?

我按照以下教程和软件包解决了我的问题

教程：https://medium.com/flutter-community/in-app-notifications-in-flutter-9c1e92ea10b3

包：https://pub.dev/packages/overlay_support/install

我将MaterialApp() 小部件包装在OverlaySupport() 小部件中。

return OverlaySupport(
            child: MaterialApp(....
               
          ));

然后我将showOverlayNotification 添加到我的_fcm.configure --> onMessage:

_fcm.configure(
      onMessage: (Map<String, dynamic> message) async 
        print("onMessage: $message");
        showOverlayNotification((context) 
          return Card(
            margin: const EdgeInsets.symmetric(horizontal: 4),
            child: SafeArea(
              child: ListTile(
                leading: SizedBox.fromSize(
                    size: const Size(40, 40),
                    child: ClipOval(
                        child: Container(
                      color: Colors.black,
                    ))),
                title: Text(message['notification']['title']),
                subtitle: Text(message['notification']['body']),
                trailing: IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () 
                      OverlaySupportEntry.of(context).dismiss();
                    ),
              ),
            ),
          );
        , duration: Duration(milliseconds: 4000));

        print(message['notification']['title']);
      ,
      onLaunch: (Map<String, dynamic> message) async 
        print("onLaunch: $message");
      ,
      onResume: (Map<String, dynamic> message) async 
        print("onResume: $message");
      ,
    );

【参考方案2】：

您可以使用Get 包在应用处于前台时当用户收到通知时显示一个snackBar。

_fcm.configure(
  onMessage: (Map<String, dynamic> message) async 
    Get.snackbar("message['notification']['title']", snackPosition: SnackPosition.TOP,);
  ,
  onLaunch: (Map<String, dynamic> message) async 
    print("onLaunch: $message");
  ,
  onResume: (Map<String, dynamic> message) async 
    print("onResume: $message");
  ,
);

'snackPosition' 参数允许snackBar 显示在顶部，因此显示为警报消息。

有很好的解释如何结合FCM使用flutter_local_notifications包here

【参考方案3】：

FCM 为您提供了三个回调。 OnResume、OnLaunch 和 OnMessage。

当应用程序在前台时，onMessage 被触发，它让您有机会执行任何自定义操作。

为了在应用程序处于前台时显示通知，您可以使用 Flutter Local Notifications 包。

由于 onMessage 回调中缺少上下文，您可能无法看到警报对话框。尝试将_fcm.configure 包裹在里面

SchedulerBinding.instance.addPostFrameCallback((_) [_fcm.configure block] );

【讨论】：

嗨，我试过 SchedulerBinding.instance.addPostFrameCallback((_) [_fcm.configure block] );但仍然没有显示警报对话框

你为什么使用“showOverlayNotification”？您可以只使用 showDialog 并将警报对话框传递给 showDialog 方法。你试过吗？