Push Notifications

Installation

---

Firebase Cloud Messaging (FCM) is a cloud solution for messages on iOS, Android, and web applications. It provides a reliable and efficient connection between the server and devices that allow server applications to send messages to the client.

flutter pub add firebase_messaging

---

 

Foreground Notification

---

In the context of Flutter and Firebase Cloud Messaging (FCM), when we talk about "foreground notifications", we're referring to the notifications that are received while the app is actively in use and visible to the user (i.e., the app is in the foreground).

Handling foreground notifications properly is crucial because, unlike background or terminated-state notifications, the operating system won't automatically display them. Therefore, developers need to manage the display of these notifications themselves if they want to inform the user when a new message arrives.

FirebaseMessaging.instance.onMessage.listen((RemoteMessage message) {
  // Handle the incoming message data
  print('Got a message while in the foreground: ${message.notification.body}');
  
  // If you want to display the notification, you can use another package, 
  // like `flutter_local_notifications`, to show the notification 
  // while the app is in the foreground.
});

---

 

Background Notification

---

In the context of Flutter and Firebase, a "background notification" usually refers to receiving and processing Firebase Cloud Messaging (FCM) notifications when the app is not in the foreground. In other words, it deals with scenarios where the app might be completely closed or is in the background, and you want to process a notification or even perform a particular task upon receiving it.

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp(); // Ensure Firebase is initialized
  print('A background message was received: ${message.messageId}');
}

void main() {
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

---

 

Targeted Notification

---

Targeted notifications in the context of Flutter and Firebase typically refer to the practice of sending notifications to specific users or groups of users based on certain criteria or segments. This can be achieved using Firebase Cloud Messaging (FCM) combined with Firebase's other tools.

FirebaseMessaging.instance.subscribeToTopic('games');

String token = await FirebaseMessaging.instance.getToken();

---

 

Shell Route

---

A route that displays a UI shell around the matching child route.

When a ShellRoute is added to the list of routes on GoRouter or GoRoute, a new Navigator is used to display any matching sub-routes instead of placing them on the root Navigator.

To display a child route on a different Navigator, provide it with a parentNavigatorKey that matches the key provided to either the GoRouter or ShellRoute constructor.

// router
final GlobalKey<NavigatorState> _rootNavigatorKey =
    GlobalKey<NavigatorState>();

  final GoRouter _router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: '/a',
    routes: [
      ShellRoute(
        navigatorKey: _shellNavigatorKey,
        builder: (context, state, child) {
          return ScaffoldWithNavBar(child: child);
        },
        routes: [
          // This screen is displayed on the ShellRoute's Navigator.
          GoRoute(
            path: '/a',
            builder: (context, state) {
              return const ScreenA();
            },
            routes: <RouteBase>[
              // This screen is displayed on the ShellRoute's Navigator.
              GoRoute(
                path: 'details',
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'A');
                },
              ),
            ],
          ),
          // Displayed ShellRoute's Navigator.
          GoRoute(
            path: '/b',
            builder: (BuildContext context, GoRouterState state) {
              return const ScreenB();
            },
            routes: <RouteBase>[
              // Displayed on the root Navigator by specifying the
              // [parentNavigatorKey].
              GoRoute(
                path: 'details',
                parentNavigatorKey: _rootNavigatorKey,
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'B');
                },
              ),
            ],
          ),
        ],
      ),
    ],
  );

// build
ShellRoute(
  builder: (BuildContext context, GoRouterState state, Widget child) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Shell')
      ),
      body: Center(
        child: child,
      ),
    );
  },
  routes: [
    GoRoute(
      path: 'a'
      builder: (BuildContext context, GoRouterState state) {
        return Text('Child Route "/a"');
      }
    ),
  ],
)

---