Firebase – How to handle screen navigation in Flutter when clicking on a Push Notification?

I have made this file push_notifications.dart

import 'dart:io';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

const AndroidNotificationChannel androidSettings = AndroidNotificationChannel(
    'high_importance_channel', // id
    'High Importance Notifications', // title// description
    importance: Importance.high,
    playSound: true);

var iOSSettings = const IOSInitializationSettings(
  defaultPresentAlert: true,
  defaultPresentBadge: true,
  defaultPresentSound: true,
);

final FlutterLocalNotificationsPlugin localNotification =
    FlutterLocalNotificationsPlugin();

var initializationSettingsAndroid =
    const AndroidInitializationSettings('@mipmap/ic_launcher');

var initializationSettings = InitializationSettings(
  android: initializationSettingsAndroid,
  iOS: IOSInitializationSettings(),
);

var notificationDetails = NotificationDetails(
  android: AndroidNotificationDetails(
    androidSettings.id,
    androidSettings.name,
    importance: Importance.high,
    color: Colors.blue,
    playSound: true,
    icon: '@mipmap/ic_launcher',
  ),
  iOS: IOSNotificationDetails(),
);

class PushNotification {
  static final PushNotification _instance = PushNotification._ctor();

  factory PushNotification() {
    return _instance;
  }

  PushNotification._ctor();

  static init() async {
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    getToken();
    await localNotification
        .resolvePlatformSpecificImplementation<
            AndroidFlutterLocalNotificationsPlugin>()
        ?.createNotificationChannel(androidSettings);

    await localNotification
        .resolvePlatformSpecificImplementation<
            IOSFlutterLocalNotificationsPlugin>()
        ?.initialize(iOSSettings);

    await FirebaseMessaging.instance
        .setForegroundNotificationPresentationOptions(
      alert: true,
      badge: true,
      sound: true,
    );

    await FirebaseMessaging.instance.subscribeToTopic("topic");
  }

  static Future<void> _firebaseMessagingBackgroundHandler(
      RemoteMessage message) async {
    await Firebase.initializeApp();
    print("_firebaseMessagingBackgroundHandler : $message");
  }

  static getToken() async {
    await FirebaseMessaging.instance.getToken().then((token) {
      token = token;
      print("Token: $token");
    });
  }

  static void show(String title, String description) {
    localNotification.show(
      0,
      title,
      description,
      notificationDetails,
      payload: '',
    );
  }

  static listen(BuildContext context) {
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Just received a notification when app is in background');
      showNotification(message, context);
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('Just received a notification when app is opened');
      showNotification(message, context);
    });
  }

  static showNotification(RemoteMessage message, BuildContext context) {
    RemoteNotification? notification = message.notification;
    AndroidNotification? android = message.notification?.android;
    AppleNotification? ios = message.notification?.apple;
    if (notification != null) {
      if (Platform.isIOS) {
        localNotification.show(
          notification.hashCode,
          notification.title,
          notification.body,
          notificationDetails,
        );
      } else {
        localNotification.show(
          notification.hashCode,
          notification.title,
          notification.body,
          notificationDetails,
        );
      }
    }

    if (message.data.containsKey("screen")) {
      Navigator.pushNamed(context, message.data["screen"]);
    }
  }
}

I initialised it in main.dart like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // Initialize Firebase Cloud Messaging
  PushNotification.init();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final AppRouter router = AppRouter();

  @override
  void initState() {
    PushNotification.listen(context);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ThemeCubit(),
      child: BlocBuilder<ThemeCubit, ThemeState>(
        builder: (context, state) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            onGenerateRoute: router.generateRoute,
            supportedLocales: AppLocalizations.supportedLocales,
            navigatorKey: navigatorKey,
          );
        },
      ),
    );
  }
}

Push notification only pops up when the app is in background. And this is what I’m sending via firebase

Also I’ve done changes in AndroidManifest.xml

I want to navigate to contact-us screen. I have set the route and it’s working correctly with Navigator.pushNamed(context, 'contact-us');.
But somehow it’s not working with push notification.