繁体   English   中英

Flutter - 如何像 whatsapp 一样在通知栏外显示 FCM 通知

[英]Flutter - How to display FCM notification outside notification bar like whatsapp

我使用 FCM 实现了 flutter 推送通知,它在应用程序处于前台、后台以及应用程序关闭时完美运行。 但我正在寻找一种显示我的通知的方式,当你不在它的应用程序中时,Whatsapp 显示弹出通知的方式就像浮动在顶部(这次不在通知栏中。)见附图:

在此处输入图像描述

正如您在上图中看到的,用户在设备上的图库应用程序中,并且显示另一个应用程序的弹出通知消息。 下面是我在 flutter 中的工具的样子:

   FirebaseMessaging.instance.getInitialMessage().then((message) {

            print(message);
        });
   FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {

            print(message);
        });

FirebaseMessaging.onMessage.listen((RemoteMessage message) {

            print(message);
});

我的 android 清单如下所示:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app_name">
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
    <uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
 

    <application
        android:allowBackup="false"
        android:label="app_name"
        android:icon="@mipmap/ic_launcher">
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"></action>
            </intent-filter>
        </receiver>

        <service
            android:name="MyNavigationService"
            android:foregroundServiceType="location" >
        </service>
        <receiver
            android:name="app_name.FirebaseBroadcastReceiver"
            android:exported="false"
            android:permission="com.google.android.c2dm.permission.SEND">
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            </intent-filter>
        </receiver>

        <!--service
            android:name="app_name.java.MyFirebaseMessagingService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service-->

        <service
            android:name="app_name.service.MyFirebaseInstanceIDService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
            </intent-filter>
        </service>

        <meta-data android:name="com.google.android.geo.API_KEY"
            android:value="A......"/>

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:exported="true"
            android:showWhenLocked="false"
            android:turnScreenOn="false"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
       
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/launch_background" />
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
            <intent-filter>
                <action android:name="FLUTTER_NOTIFICATION_CLICK" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

        </activity>
         <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

我的 flutter 版本是: firebase_messaging: ^13.0.4

我能够解决一个解决方案,以防万一有人访问此页面寻求解决方案。 我能够使用awesome_notification解决它 它是 flutter 中的本地通知 pub.dev,我在我的FirebaseMessaging.onBackgroundMessage中实现了它 因此,当应用程序在后台运行并触发 FCM 时,将调用未来的 function 包装 awesome 通知,如图所示以下:

在下面打电话

void main() async{

 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

}

我的_firebaseMessagingBackgroundHandler如下所示:


Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  bool isAllowed = await AwesomeNotifications().isNotificationAllowed();
 if (!isAllowed) return;


  await AwesomeNotifications().createNotification(
      content: NotificationContent(
          id: -1, // -1 is replaced by a random number
          channelKey: 'alerts',
          title: message.notification.title,
          body: message.notification.body,
          bigPicture: 'https://storage.googleapis.com/cms-storage-bucket/d406c736e7c4c57f5f61.png',
          largeIcon:'https://storage.googleapis.com/cms-storage-bucket/d406c736e7c4c57f5f61.png',
          notificationLayout: NotificationLayout.BigPicture,
          payload: {'notificationId': '1234567890'}),
      actionButtons: [
        NotificationActionButton(key: 'REDIRECT', label: 'Redirect'),

        NotificationActionButton(
            key: 'REPLY',
            label: 'Reply Message',
            requireInputText: true,
            actionType: ActionType.SilentAction
        ),
        NotificationActionButton(
            key: 'DISMISS',
            label: 'Dismiss',
            actionType: ActionType.DismissAction,
            isDangerousOption: true)
      ]
  );

}

请注意在main.dart中实现这个

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM