Push notifications (FCM) in Flutter

Introduction

Push notifications let your app send messages to users even when the app is closed. This helps keep users informed and engaged.

To alert users about new messages or updates instantly.

To remind users about events or tasks.

To send promotional offers or news.

To notify users about app changes or important alerts.

Syntax

Flutter

import 'package:firebase_messaging/firebase_messaging.dart';

FirebaseMessaging messaging = FirebaseMessaging.instance;

// Request permission (iOS)
await messaging.requestPermission();

// Listen for messages
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('Message received: ${message.notification?.title}');
});

Use FirebaseMessaging.instance to access FCM features.

Always request permission on iOS before receiving notifications.

Examples

This gets the unique device token needed to send notifications to this device.

Flutter

FirebaseMessaging messaging = FirebaseMessaging.instance;

// Get the device token
String? token = await messaging.getToken();
print('Device token: $token');

This listens for notifications when the app is running in the foreground.

Flutter

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('Notification received while app is open');
});

This handles what happens when the user taps a notification to open the app.

Flutter

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print('User tapped on notification');
});

Sample App

This app initializes Firebase, requests notification permission, and listens for incoming push notifications. When a notification arrives while the app is open, it shows the notification title on screen.

Flutter

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _message = 'No message yet';

  @override
  void initState() {
    super.initState();
    FirebaseMessaging.instance.requestPermission();

    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      setState(() {
        _message = message.notification?.title ?? 'No title';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FCM Push Notifications')),
        body: Center(child: Text('Latest message: $_message')),
      ),
    );
  }
}

Important Notes

Push notifications require setting up Firebase project and adding config files to your app.

On iOS, users must allow notifications in system settings.

Test notifications using Firebase Console or server APIs.

Summary

Push notifications keep users updated even when app is closed.

Use FirebaseMessaging to get device token and listen for messages.

Always request permission on iOS and handle messages in app.

Practice

1.

What is the main purpose of using Firebase Cloud Messaging (FCM) in a Flutter app?

easy

A. To create user interfaces with Flutter widgets

B. To send push notifications to users even when the app is closed

C. To store user data locally on the device

D. To manage app navigation between screens

Solution

1. Step 1: Understand FCM's role

   Firebase Cloud Messaging is designed to send messages or notifications to users' devices.

2. Step 2: Identify the correct purpose

   Among the options, only sending push notifications matches FCM's main use.

3. Final Answer:

   To send push notifications to users even when the app is closed -> Option B

4. Quick Check:

   FCM purpose = send push notifications [OK]

Hint: FCM is for messaging, not UI or storage [OK]

Common Mistakes:

• Confusing FCM with UI or local storage
• Thinking FCM manages app navigation
• Assuming FCM only works when app is open

2.

Which Flutter code snippet correctly requests notification permissions on iOS using FirebaseMessaging?

FirebaseMessaging messaging = FirebaseMessaging.instance;
// What code requests permission?

easy

A. await messaging.requestPermission();

B. messaging.getToken();

C. FirebaseMessaging.onMessage.listen();

D. await messaging.subscribeToTopic('news');

Solution

1. Step 1: Identify permission request method

   The method to ask user permission for notifications is requestPermission().

2. Step 2: Match code snippet

   Only await messaging.requestPermission(); correctly requests permissions on iOS.

3. Final Answer:

   await messaging.requestPermission(); -> Option A

4. Quick Check:

   Permission request = requestPermission() [OK]

Hint: Permission request always uses requestPermission() method [OK]

Common Mistakes:

• Using getToken() to request permission
• Listening to messages instead of requesting permission
• Subscribing to topics does not request permission

3.

Given this Flutter code snippet, what will be printed when a push notification is received while the app is in the foreground?

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('Message received: ' + (message.notification?.title ?? 'No Title'));
});

medium

A. Message received: No Title

B. Message received: null

C. No output printed

D. Message received: [notification title]

Solution

1. Step 1: Understand onMessage listener

   This listener triggers when a notification arrives while app is open.

2. Step 2: Analyze print statement

   It prints 'Message received: ' plus the notification title if it exists, else 'No Title'.

3. Final Answer:

   Message received: [notification title] -> Option D

4. Quick Check:

   Foreground message prints notification title [OK]

Hint: ?.title returns title or null, ?? provides fallback [OK]

Common Mistakes:

• Ignoring null safety and expecting 'null' string
• Assuming no output if title is missing
• Confusing onMessage with background handlers

4.

Identify the error in this Flutter code snippet for handling FCM token retrieval:

FirebaseMessaging messaging = FirebaseMessaging.instance;
String? token = messaging.getToken();
print('Token: ' + token!);

medium

A. getToken() returns a Future, so it must be awaited

B. token cannot be null, so ! is unnecessary

C. FirebaseMessaging.instance is not initialized

D. print statement syntax is incorrect

Solution

1. Step 1: Check getToken() return type

   getToken() returns a Future, so it must be awaited to get the actual token.

2. Step 2: Identify missing await

   Code assigns Future to String? without await, causing error.

3. Final Answer:

   getToken() returns a Future, so it must be awaited -> Option A

4. Quick Check:

   Async methods need await to get values [OK]

Hint: Async calls must use await or then() [OK]

Common Mistakes:

• Ignoring async nature of getToken()
• Using ! without checking for null
• Assuming instance is uninitialized without reason

5.

You want to show a local notification when a push notification arrives while the app is in the foreground. Which approach correctly combines FirebaseMessaging with Flutter Local Notifications?

hard

A. Use FirebaseMessaging.subscribeToTopic to trigger local notifications automatically

B. Only use FirebaseMessaging.getToken to show notifications

C. Listen to FirebaseMessaging.onMessage and call local notification plugin to display notification

D. Call local notifications plugin inside FirebaseMessaging.getInitialMessage

Solution

1. Step 1: Understand foreground notification behavior

   FCM does not show notifications automatically when app is open; you must handle it manually.

2. Step 2: Combine onMessage with local notifications

   Listening to onMessage lets you detect incoming messages and then trigger local notifications to show alerts.

3. Step 3: Evaluate other options

   getToken only gets device token, subscribeToTopic manages topics, getInitialMessage handles app launch, none show notifications directly.

4. Final Answer:

   Listen to FirebaseMessaging.onMessage and call local notification plugin to display notification -> Option C

5. Quick Check:

   Foreground notifications need manual local notification trigger [OK]

Hint: Use onMessage + local notifications for foreground alerts [OK]

Common Mistakes:

• Expecting getToken to show notifications
• Thinking subscribeToTopic triggers UI automatically
• Using getInitialMessage for foreground notifications