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.