How to show a custom dialog in any screen in when notification arrived flutter?

Question

I am trying to show a dialog in any active screen when a push notification arrives in my app. While the app is running. I can show the dialog by user interaction, like clicking a button. But I want to show it without user interaction. If there is a notification arrive, only then the dialog should be triggered. I am trying to call it with background fetch. But couldn't find any solution. So, please help and thank you in advance.

Solution

I faced same problem before, i will show my solution and I hope it suits you

The main thing with the solution : we have page is not pop from Navigator stack when app is life like HomePage as ex, so we can use the BuildContext from this page

so by pass context of my StatefulWidget(Like Home Page) who must be still in stack of Navigator (not pop it when app is live) to your class who handle notification data when coming you can use it to show dialog

Let write some code now:

as ex we have NotificationManger class this class used to handle notification msg with static method

class NotificationManger {
    
   static BuildContext _context;


    
   static init({@required BuildContext context}) {
    _context = context;
    
  }

 //this method used when notification come and app is closed or in background and 
 // user click on it, i will left it empty for you
 static handleDataMsg(Map<String, dynamic> data){

 }

 //this our method called when notification come and app is foreground
 static handleNotificationMsg(Map<String, dynamic> message) {
    debugPrint("from mangger  $message");

    final dynamic data = message['data'];
    //as ex we have some data json for every notification to know how to handle that
    //let say showDialog here so fire some action 
    if (data.containsKey('showDialog')) {
      // Handle data message with dialog
      _showDialog(data);
    }
  }


   static _showDialog({@required Map<String, dynamic> data}) {

    
        //you can use data map also to know what must show in MyDialog
        showDialog(context: _context,builder: (_) =>MyDialog());


  }

}

Now we have this callback as top level or static (must be one of them ) inside class FCM of my app inside it

class Fcm {
  static final FirebaseMessaging _fcm = FirebaseMessaging();

  static initConfigure() {
    if (Platform.isIOS) _iosPermission();

    _fcm.requestNotificationPermissions();
    _fcm.autoInitEnabled();

    _fcm.configure(
        onMessage: (Map<String, dynamic> message) async =>
            NotificationManger.handleNotificationMsg(message),
        onLaunch: (Map<String, dynamic> message) async =>
            NotificationManger.handleDataMsg(message['data']),
        onResume: (Map<String, dynamic> message) async =>
            NotificationManger.handleDataMsg(message['data']),
        onBackgroundMessage: async =>
            NotificationManger.handleDataMsg(message['data']);


  }

  static _iosPermission() {
    _fcm.requestNotificationPermissions(
        IosNotificationSettings(sound: true, badge: true, alert: true));
    _fcm.onIosSettingsRegistered.listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
  }

}

For know more about callback fcm read this

ok now in our HomePage State well init our class inside initState method

 @override
  void initState() {
    super.initState();
  

    Future.delayed(Duration.zero,(){
      ///init Notification Manger
      NotificationManger.init(context: context);

      ///init FCM Configure
      Fcm.initConfigure();

     
    });


  }

as say before the homePage will be not pop when app is show , you can start another page but without close the homePage

i hope this help

Comments

[Jayant Dhingra]

I love you, Bro. If you were a girl I would marry you. Thankyou so much for the solution.

[Mahmoud Abu Alheja]

@JayantDhingra hhhhh sorry brother I'm a man, good luck marriage in another answer :P

[Manal]

@JayantDhingra the dialog did not appear to me, can anyone tell me what to do?

[Sandaru]

@MahmoudAbuElheja Thanks for the great answer! is it possible to show this dialog when the device is locked?