Push notifications (FCM) in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase in a Flutter app.

Flutter

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.[1]();
  runApp(MyApp());
}

Drag options to blanks, or click blank then click option'

AstartApp

BinitializeApp

CinitFirebase

DsetupFirebase

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent method like startApp or setupFirebase.

You must call Firebase.initializeApp() to set up Firebase before using its services.

2fill in blank

medium

Complete the code to request notification permissions on iOS.

Flutter

FirebaseMessaging messaging = FirebaseMessaging.instance;
NotificationSettings settings = await messaging.[1]();

Drag options to blanks, or click blank then click option'

AgetPermission

BaskPermission

CenablePermission

DrequestPermission

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods that do not exist like askPermission or enablePermission.

The method requestPermission() asks the user for notification permissions on iOS devices.

3fill in blank

hard

Fix the error in the code to listen for foreground messages.

Flutter

FirebaseMessaging.onMessage.[1]((RemoteMessage message) {
  print('Message received: ${message.notification?.title}');
});

Drag options to blanks, or click blank then click option'

Asubscribe

BonData

Clisten

DaddListener

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like subscribe or addListener on the stream.

The correct method to listen to the stream of messages is listen.

4fill in blank

hard

Fill both blanks to handle background messages correctly.

Flutter

Future<void> [1](RemoteMessage message) async {
  print('Handling a background message: ${message.messageId}');
}

FirebaseMessaging.[2]([1]);

Drag options to blanks, or click blank then click option'

AfirebaseMessagingBackgroundHandler

BonBackgroundMessage

ChandleBackgroundMessage

DsetBackgroundHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names like setBackgroundHandler or handleBackgroundMessage.

The background handler function is named by you (here firebaseMessagingBackgroundHandler), and you register it with FirebaseMessaging.onBackgroundMessage().

5fill in blank

hard

Fill all three blanks to get the device token and print it.

Flutter

FirebaseMessaging messaging = FirebaseMessaging.instance;
String? [1] = await messaging.[2]();
print('Device token: ' + [3]!);

Drag options to blanks, or click blank then click option'

Atoken

BgetToken

DfetchToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names like fetchToken or mismatching variable names.

You store the token in a variable (here token), get it by calling getToken(), and print the variable token.

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