Push notifications (FCM) in Flutter - UI Render Trace

Component - Push notifications (FCM)

This component shows how a Flutter app integrates Firebase Cloud Messaging (FCM) to receive push notifications. It listens for messages and displays them as alerts or updates the UI when a notification arrives.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Center
   └─ Column
      ├─ Text (Notification Title)
      └─ Text (Notification Body)

The Scaffold provides the basic app structure with an AppBar showing the title. The body centers a Column that displays the notification title and body text stacked vertically.

Render Trace - 4 Steps

Step 1: Scaffold

Step 2: Center

Step 3: Column

Step 4: FirebaseMessagingListener

State Change - Re-render

Trigger:Receiving a push notification from Firebase Cloud Messaging

Before

Notification title: 'No notification yet', body: 'Waiting for messages...'

→

After

Notification title: 'New Message', body: 'You have a new alert!'

Re-renders:The Column widget and its two Text children re-render to show updated notification text

UI Quiz - 3 Questions

What widget centers the notification text on the screen?

A Column

B Center

C Scaffold

D AppBar

Key Insight

In Flutter, push notifications from FCM are handled by listening to message streams and updating the UI state. Using widgets like Center and Column helps organize notification content clearly and accessibly. Reacting to state changes ensures the UI always shows the latest notification data.

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