Flutter awesome notification click open specific page

Question

I am using Flutter awesome notifications. When the notification is clicked when the application is closed, I want to direct it to a special page within the application. What is the easiest way for me to do this?

Siddharth Mehra · Accepted Answer · 2022-03-25T12:49:51.860

8

To do this, firstly you need to initialize AwesomeNotifications before runApp and then simply put a listner to listen to the notification click:

Initialize:

AwesomeNotifications().initialize(
        'resource://drawable/logo_circle_notification',
        [
          NotificationChannel(
              channelGroupKey: 'normal_channel_group',
              channelKey: 'normal_channel',
              channelName: 'Normal Notifications',
              channelDescription: 'Notification channel for normal notifications',
              defaultColor: const Color(0xFF9D50DD),
              ledColor: Colors.white
          ),
        ],
        channelGroups: [
          NotificationChannelGroup(
              channelGroupkey: 'basic_channel_group',
              channelGroupName: 'Basic group'),
        ],
        debug: true
    );

Listen:

listenActionStream(){
        AwesomeNotifications().actionStream.listen((receivedAction) {
          var payload = receivedAction.payload;
    
          if(receivedAction.channelKey == 'normal_channel'){
            //do something here
          }
        });
      }

you can put that lister in the initState of your splash screen or something before navigating to Home Screen of the app.

edited Mar 25 '22 at 12:49

answered Mar 25 '22 at 12:42

Siddharth Mehra

1,691
1
9
32

really thank you :) I have been trying this for days. – zey Mar 25 '22 at 13:23
pls how do I use default call ringtone as notification sound? – easyscript May 23 '22 at 09:10
@easyscript use `defaultRingtoneType: DefaultRingtoneType.Ringtone` in `NotificationChannel` when you `initialize` Awesome Notifications. – Siddharth Mehra May 23 '22 at 09:24
@SiddharthMehra Thank you, I really appreciate, Now I have two challenges, (1) How do I pass and receive additional data? it seems to have title and body only but i have user data I want to use. (2) I receive background notification using AwesomeNotifications().createdStream.listen and in it I navigate to specific page, is working BUT my app remains in the background, pls how do I bring the app to foreground without user clicking notification? – easyscript Jun 01 '22 at 09:30
@easyscript (1) you can pass the payload when creating a notification and also receive it in the listener when clicking on the notification. (2) please explain more about what you want to archive exactly. I think I've misunderstood what you asked. – Siddharth Mehra Jun 01 '22 at 09:41
(2) When app is in background and notification is received using AwesomeNotifications().createdStream.listen, I want to bring up the app to foreground. I dont know if my explaination is clear – easyscript Jun 01 '22 at 09:56
Okay, understood, I am not an expert on this but I don't really think it is possible without any user interaction. – Siddharth Mehra Jun 01 '22 at 10:05

score 0 · Answer 2 · answered Aug 20 '23 at 01:05

since actionStream isn't available anymore in AwesomeNotification() i would like to propose a different solution

NotificationController

class NotificationController {
  static ReceivedAction? initialAction;
  static Future<void> initializeLocalNotifications() async {
    await AwesomeNotifications().initialize(
      "resource://drawable/ic_bg_service_small",
      [
        NotificationChannel(
          channelKey: "notificationChannelId",
          channelName: "channelName",
          channelDescription: "channelName",
          playSound: true,
          onlyAlertOnce: true,
          importance: NotificationImportance.High,
          defaultPrivacy: NotificationPrivacy.Private,
          defaultColor: Colors.blue,
          ledColor: Colors.blue,
          icon: "resource://drawable/ic_bg_service_small",
        )
      ],
      debug: true,
    );

    // Get initial notification action is optional
    initialAction = await AwesomeNotifications()
        .getInitialNotificationAction(removeFromActionEvents: false);
  }

  static Future<void> startListeningNotificationEvents() async {
    AwesomeNotifications().setListeners(
      onActionReceivedMethod: onActionReceivedMethod,
    );
  }

  @pragma('vm:entry-point')
  static Future<void> onActionReceivedMethod(
      ReceivedAction receivedAction) async {
    if (receivedAction.actionType == ActionType.SilentAction) {
      if (receivedAction.payload != null) {
        //////////////////////////////
        print(receivedAction.payload!["payload"]!);
        ////////////////////////////
      }
    } else {
      if (receivedAction.payload != null) {
        ////////////////////////
        print(receivedAction.payload!["payload"]!);
      }
    }
  }
}

Main

Future<void> main() async {
  await NotificationController.initializeLocalNotifications();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  late ReceivedAction? receivedAction;

  @override
  void initState() {
    NotificationController.startListeningNotificationEvents();
    receivedAction = NotificationController.initialAction;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: receivedAction!.payload == null
          ? NotificationPage(
              receivedAction: receivedAction,
            )
          : HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home page"),
      ),
      body: const Column(
        children: [
          Text("Home page"),
        ],
      ),
    );
  }
}

class NotificationPage extends StatelessWidget {
  const NotificationPage({super.key, this.receivedAction});
  final ReceivedAction receivedAction;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Notification page"),
      ),
      body: Column(
        children: [
          Text("Notification page: ${receivedAction!.payload}"),
        ],
      ),
    );
  }
}

I would advice to save payload in SharedPreference and clear it after the NotificationPage

Flutter awesome notification click open specific page

2 Answers2

Initialize:

Listen: