Push notifications (FCM) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Handling Notification Tap Behavior

What happens when a user taps a push notification in a Flutter app configured with Firebase Cloud Messaging (FCM) using the following code snippet?

Flutter

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  Navigator.pushNamed(context, '/details', arguments: message.data);
});

A The app crashes due to missing context.

B The app closes immediately without any navigation.

C The app navigates to the '/details' screen passing the notification data as arguments.

D The app shows a toast message but does not navigate.

💡 Hint

Think about what the listener for onMessageOpenedApp is designed to do.

The onMessageOpenedApp listener triggers when the user taps a notification. The code navigates to the '/details' screen passing the notification data.

🧠 Conceptual

intermediate

FCM Token Usage

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

A It stores the user's login credentials securely.

B It uniquely identifies the device to send targeted push notifications.

C It is used to style the notification appearance on the device.

D It tracks the number of notifications received by the device.

💡 Hint

Think about how Firebase knows which device to send a notification to.

The FCM token is a unique identifier for each device, allowing Firebase to send notifications specifically to that device.

❓ lifecycle

advanced

App State and Notification Handling

Consider a Flutter app with FCM configured. Which callback handles messages received when the app is in the foreground?

A FirebaseMessaging.onBackgroundMessage

B FirebaseMessaging.getInitialMessage

C FirebaseMessaging.onMessageOpenedApp

D FirebaseMessaging.onMessage

💡 Hint

Foreground means the app is open and visible to the user.

onMessage is called when the app is open and running in the foreground and receives a notification.

🔧 Debug

advanced

Debugging Missing Notifications

A Flutter app with FCM does not receive notifications when the app is killed (not running). What is a likely cause?

A The onBackgroundMessage handler is not registered or missing.

B The Firebase project is not linked to the app.

C The app does not have internet permission in AndroidManifest.xml.

D The notification payload is missing the title field.

💡 Hint

Background messages require a special handler to be registered.

To receive messages when the app is terminated, onBackgroundMessage must be set up properly.

📝 Syntax

expert

Correct Syntax for Background Message Handler

Which of the following is the correct way to define and register a background message handler in Flutter with FCM?

Flutter

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // Handle background message
}

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

A

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // Handle background message
}

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

B

void _firebaseMessagingBackgroundHandler(RemoteMessage message) {
  // Handle background message
}

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

C

Future<void> _firebaseMessagingBackgroundHandler() async {
  // Handle background message
}

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

D

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // Handle background message
}

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

💡 Hint

The handler must be async, accept RemoteMessage, and be registered before runApp.

The background handler must be a top-level async function accepting RemoteMessage. It must be registered before runApp is called.

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