应用打开时在整个应用中显示 FCM 通知 (Flutter)

Posted 2023-02-23

【中文标题】应用打开时在整个应用中显示 FCM 通知 (Flutter)

【英文标题】：Show FCM notification thoughout the app when the app is open (Flutter)

【发布时间】：2020-11-25 10:33:29

【问题描述】：

我现在正在使用 FCM 向我的设备发送推送通知，它运行良好。但是，当应用程序打开时，我只有在该特定页面中时才会执行 onResume。无论用户在哪个页面（或类）上，我都想在顶部显示通知。 基本上我希望全局显示通知（显示弹出窗口）。任何帮助，将不胜感激。以下是显示通知页面的代码。

if (Platform.isios) 
     iosSubscription = _fcm.onIosSettingsRegistered.listen((data) 
    _saveDeviceToken();
   );

  _fcm.requestNotificationPermissions(IosNotificationSettings());
 else 
  _saveDeviceToken();


_fcm.configure(
  onMessage: (Map<String, dynamic> message) async 
    print("onMessage: $message");
    var temp = message['notification'];
    setState(() 
      title.add(temp['title']);
      body.add(temp['body']);
    );
   
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: ListTile(
          title: Text(message['notification']['title']),
          subtitle: Text(message['notification']['body']),
        ),
        actions: <Widget>[
          FlatButton(
            color: const Color(0xFF650572),
            child: Text('Ok'),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  ,
  onLaunch: (Map<String, dynamic> message) async 
    print("onLaunch: $message");
    Navigator.push(
        context, MaterialPageRoute(builder: (context) => MessageHandler()));
    // TODO optional
  ,
  onResume: (Map<String, dynamic> message) async 
    print("onResume: $message");
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => MessageHandler()));
    // TODO optional
  ,
);

【问题讨论】：

您是否设法修复它。我也在为此苦苦挣扎。您能否将工作代码分享为下面的答案。

【参考方案1】：

将您的 MaterialApp 包装在一个包装类中……让我们称之为 FCMWrapper。

class FCMWrapper extends StatefulWidget 
  final Widget child;

  const FCMWrapper(Key key, this.child) : super(key: key);

  @override
  _FCMWrapperState createState() => _FCMWrapperState();


class _FCMWrapperState extends State<FCMWrapper> 
  @override
  Widget build(BuildContext context) 
    return Consumer<YourObservable>(
      builder: (context, yourObservable, _) 
        if (yourObservable != null && yourObservable.isNotEmpty) 
          Future(
            () => navigatorKey.currentState.push(
              PushNotificationRoute(
                  child: YourViewOnNotification(),
              )),
            ),
          );
        
        return widget.child;
      ,
    );
  

我已将我的数据存储在一个单独的类的 observable 中。因此，当我收到通知时，我会更新我的 observable。由于我们正在使用该 observable，因此会调用 PushNotificationRoute。

PushNotificationRoute 只是一个扩展 ModalRoute 的类。

class PushNotificationRoute extends ModalRoute 
  final Widget child;

  PushNotificationRoute(this.child);

  ... //Override other methods to your requirement

  //This is important
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) 
    return SafeArea(
      child: Builder(builder: (BuildContext context) 
        return child;
      ),
    );
  

  ...
  @override
  Duration get transitionDuration => Duration(milliseconds: 200);

现在在 main.dart 中声明一个全局键，如

var navigatorKey = GlobalKey<NavigatorState>();

然后像

一样包装你的 MaterialApp

...

FCMWrapper(
          child: MaterialApp(
            navigatorKey: navigatorKey,
            title: 'Your App',

...

因此，现在每次收到通知时，您的 observable 都应该更新并推送一个模态路由，该路由将显示在应用程序的任何位置。

【讨论】：

哇，这太棒了。我想知道几件事。您能否告诉我您在哪个文件中添加了这些代码或任何示例代码。我也面临问题。我无法在消息或简历上显示警报。解码消息时也面临问题。

老实说，这看起来很麻烦，我只是最终使用了 local_notifications 包。

@ThatGuy 我什至在 local_notifications 包上苦苦挣扎。这让我很难过。你一定看到了我的问题。它仍然无法正常工作。