[FIXED] Notification show twice on flutter

Issue

I'm stuck. My notification in the background show twice. But in the foreground only one notification. This is my code

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // If you're going to use other Firebase services in the background, such as Firestore,
  // make sure you call `initializeApp` before using other Firebase services.
  await Firebase.initializeApp();
  if(
      !AwesomeStringUtils.isNullOrEmpty(message.notification?.title, considerWhiteSpaceAsEmpty: true) ||
      !AwesomeStringUtils.isNullOrEmpty(message.notification?.body, considerWhiteSpaceAsEmpty: true)
    ){
      // print('message also contained a notification: ${message.notification.body}');
      
      String imageUrl;
      imageUrl ??= message.notification.android?.imageUrl;
      imageUrl ??= message.notification.apple?.imageUrl;
      print(imageUrl);
      if(imageUrl == null){
        var id = Random().nextInt(2147483647);
        await AwesomeNotifications().createNotification(
          content: NotificationContent(
            id: id,
            title: message.notification.title,
            body: message.notification.body,
            color: Colors.orange,
            customSound: 'resource://raw/alert',
            notificationLayout: NotificationLayout.BigText,
            channelKey: 'basic_channel_background',
            payload: {'data':message.data['payload']}
          ),
          actionButtons: [
            NotificationActionButton(
              label: 'Lihat Selengkapnya',
              enabled: true,
              buttonType: ActionButtonType.Default,
              key: 'background',
            )
          ]
        );
      }else{
        await AwesomeNotifications().createNotification(
          content: NotificationContent(
            id: Random().nextInt(2147483647),
            title: message.notification.title,
            body: message.notification.body,
            bigPicture: imageUrl,
            color: Colors.orange,
            customSound: 'resource://raw/alert',
            notificationLayout: NotificationLayout.BigPicture,
            channelKey: 'basic_channel_background',
            payload: {'data':message.data['payload']}
          ),
          actionButtons: [
            NotificationActionButton(
              label: 'Lihat Selengkapnya',
              enabled: true,
              buttonType: ActionButtonType.Default,
              key: 'background',
            )
          ]
        );
      }
    }
}
// End Background Message

and this is my foreground code

// Foreground Apps
Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  if (!kIsWeb) {
    await FirebaseMessaging.instance
        .setForegroundNotificationPresentationOptions(
      alert: true,
      badge: true,
      sound: true,
    );
    await AwesomeNotifications().initialize(
    'resource://mipmap/launcher_icon',
    [
      NotificationChannel(
          channelGroupKey: 'basic_tests',
          channelKey: 'basic_channel',
          channelName: 'My Cahaya Notification',
          channelDescription: 'Notification channel for basic tests',
          icon: 'resource://mipmap/launcher_icon',
          importance: NotificationImportance.High,
          playSound: true,
          soundSource: 'resource://raw/alert'
      ),
       NotificationChannel(
          channelGroupKey: 'basic_background',
          channelKey: 'basic_channel_background',
          channelName: 'My Cahaya Notification Background',
          channelDescription: 'Notification channel for basic tests',
          icon: 'resource://mipmap/launcher_icon',
          importance: NotificationImportance.High,
          playSound: true,
          soundSource: 'resource://raw/alert'
      ),
    ], debug: true);
    AwesomeNotifications().actionStream.listen((event) async{
      print('event received!');
      var data = event.toMap();
      if(data['buttonKeyPressed'] == "background"){
        SharedPreferences prefs = await SharedPreferences.getInstance();
        prefs.setString("Navigate", data['payload']['data']);
      }else{
        _navigateToItemForeground(data['payload']['data']);  
      }
      // do something based on event...
      // AwesomeNotifications().actionSink.close();
    });
  } 
  
   FirebaseMessaging.onMessage.listen((RemoteMessage message) async{
      RemoteNotification notification = message.notification;
      AndroidNotification android = message.notification?.android;
      if (notification != null && android != null && !kIsWeb) {
        if(!AwesomeStringUtils.isNullOrEmpty(message.notification?.title, considerWhiteSpaceAsEmpty: true) ||
        !AwesomeStringUtils.isNullOrEmpty(message.notification?.body, considerWhiteSpaceAsEmpty: true)){
        print("something");

        String imageUrl;
        imageUrl ??= notification.android?.imageUrl;
        imageUrl ??= notification.apple?.imageUrl;
        
        if(imageUrl == null){
          await AwesomeNotifications().createNotification(
            content: NotificationContent(
              id: Random().nextInt(2147483647),
              title: notification.title,
              body: notification.body,
              color: Colors.orange,
              customSound: 'resource://raw/alert',
              notificationLayout: NotificationLayout.BigText,
              channelKey: 'basic_channel',
              payload: {'data':message.data['payload']}
            ),
            actionButtons: [
              NotificationActionButton(
                label: 'Lihat Selengkapnya',
                enabled: true,
                buttonType: ActionButtonType.Default,
                key: 'test',
              )
            ]
          );
        }else{
          await AwesomeNotifications().createNotification(
            content: NotificationContent(
              id: Random().nextInt(2147483647),
              title: notification.title,
              body: notification.body,
              bigPicture: imageUrl,
              color: Colors.orange,
              customSound: 'resource://raw/alert',
              notificationLayout: NotificationLayout.BigPicture,
              channelKey: 'basic_channel',
              payload: {'data':message.data['payload']}
            ),
            actionButtons: [
              NotificationActionButton(
                label: 'Lihat Selengkapnya',
                enabled: true,
                buttonType: ActionButtonType.Default,
                key: 'test',
              )
            ]
          );
        }
      }
    }
  });
  runApp(MyApp());
}
// End Foreground Apps

and this is my screenshot screenshot

I've tried changing the awesome notification but the result is the same. Could you help me to solve that? I hope you can help me. Thank you very much

Solution

FCM payload

{
    "to":"_some_fcm_token_",
    //remove this
    "notification": {
        "title": "this is title",
        "body": "this is subtitle"
    },
    "type": "post_like",
    "data": {
        "model":{"id":"dsaflkdskfklgdkgjdksakdk"},
        "body": "this is subtitle",
        "title": "this is title",
        "click_action": "FLUTTER_NOTIFICATION_CLICK"
    },
    "priority": "normal"
}

The first one is manually created (locally), and the other one is automatic by Firebase.

When sending a message to your device, make sure it is a notification rather than data. The documentation mentions that if you send data it will likely be ignored as a push notification. Only use it to send packets of data to the app instead.

Answered By - Sahil Hariyani
Answer Checked By - Clifford M. (JavaFixing Volunteer)