DEV Community

Cover image for ๐Ÿ”” Flutter Push Notifications (Foreground, Background, Terminated) โ€” Complete Fix Guide
Codexlancers
Codexlancers

Posted on

๐Ÿ”” Flutter Push Notifications (Foreground, Background, Terminated) โ€” Complete Fix Guide

Push notifications in Flutter look easyโ€ฆ
until you actually try to implement them.

Everything seems fineโ€Š-โ€Šuntil:

  • Notifications don't show in foreground
  • Background handlers never trigger
  • And terminated state? Completely broken.

If you've been thereโ€ฆ yeah, same

We've faced all of this while working on a production app, and this guide is the exact setup that finally worked.

Firstโ€Š-โ€ŠUnderstand Notification States (This is where most people go wrong)
Before writing a single line of code, you need to understand this:

Types of notifications

๐Ÿ‘‰ Each state behaves differently. And if you treat them the same, things will break.

Basic Setup

1. Add dependencies

// pubspec.yaml

firebase_core: ^4.6.0
firebase_messaging: ^16.1.3
flutter_local_notifications: ^21.0.0
Enter fullscreen mode Exit fullscreen mode

2. Initialize Firebase

Before using FCM, initialize Firebase when your app starts:

await Firebase.initializeApp();
Enter fullscreen mode Exit fullscreen mode

3. Request Notification Permission

This step is mandatory on iOS and Android 13+.

FirebaseMessaging messaging = FirebaseMessaging.instance;

await messaging.requestPermission(
  alert: true,
  badge: true,
  sound: true,
);
Enter fullscreen mode Exit fullscreen mode

Why is this important?

Starting from Android 13, Android requires explicit notification permission, similar to iOS.

If permission is not granted, notifications won't appear.

Android Notification Channel (Must for Android)

Without this, notifications may not show or may appear silently.

const AndroidNotificationChannel channel = AndroidNotificationChannel(
  'high_importance_channel',
  'High Importance Notifications',
  description: 'This channel is used for important notifications.',
  importance: Importance.high,
);

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

await flutterLocalNotificationsPlugin
    .resolvePlatformSpecificImplementation<
        AndroidFlutterLocalNotificationsPlugin>()
    ?.createNotificationChannel(channel);
Enter fullscreen mode Exit fullscreen mode

iOS Foreground Notification Setup

iOS requires this to properly show notifications in foreground:

await FirebaseMessaging.instance
    .setForegroundNotificationPresentationOptions(
  alert: true,
  badge: true,
  sound: true,
);
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Without this, notifications may not appear even if everything else is correct.

Foreground Notifications (Most Common Confusion)

The problem

You send a notification and nothing shows when the app is open.ย 
Feels like it's broken, right?

The reality

FCM does NOT display notifications in foreground.

The fix

You must show it manually using local notifications:

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  showLocalNotification(message);
});
Enter fullscreen mode Exit fullscreen mode

๐Ÿ’ก This is where most developers get stuck initially.

Background Notifications

This is where things start working automatically, but only if you do it right.

Works automatically IF your payload includes:

{
  "notification": {
    "title": "Hello",
    "body": "World"
  }
}
Enter fullscreen mode Exit fullscreen mode

โš ๏ธ Using data-only payload?

Then you MUST handle it manually:

FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
Enter fullscreen mode Exit fullscreen mode
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp(); // Required in background isolate
  print("Handling background message");
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Also, this function must be top-level.
(Not inside a classโ€Š-โ€Šeasy mistake.)

Terminated State (Most Confusing Part)

This is where most implementations fail.

The issue

User taps notification โ†’ app opens โ†’ but nothing happens.

The fix

Handle the initial message:

RemoteMessage? initialMessage =
    await FirebaseMessaging.instance.getInitialMessage();

if (initialMessage != null) {
  handleNotificationClick(initialMessage);
}
Enter fullscreen mode Exit fullscreen mode

Also listen when app is opened from background:

FirebaseMessaging.onMessageOpenedApp.listen((message) {
  handleNotificationClick(message);
});
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Without this, deep linking or navigation won't work.

Navigation Tip

handleNotificationClick() should:

  • Read payload data
  • Navigate to a specific screen

Local Notification Setup (Required for Foreground)

Without this, your foreground notifications will never show.

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

void showLocalNotification(RemoteMessage message) async {
  var androidDetails = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    importance: Importance.max,
    priority: Priority.high,
  );

  var generalNotificationDetails =
      NotificationDetails(android: androidDetails);

  await flutterLocalNotificationsPlugin.show(
    0,
    message.notification?.title,
    message.notification?.body,
    generalNotificationDetails,
  );
}
Enter fullscreen mode Exit fullscreen mode

Common Mistakes (From Real Experience)

  • Not asking notification permission (Android 13+ especially)
  • Expecting foreground notifications to show automatically
  • Using only data payload and expecting UI
  • Background handler inside a class (won't work)
  • Forgetting getInitialMessage()

๐Ÿ‘‰ We've personally hit almost all of these ๐Ÿ˜…

Final Thoughts

Push notifications in Flutter are not plug-and-play.
They require:

  • Proper setup
  • Understanding of app states
  • Correct payload structure

Key Takeaway

If your notifications are not working, 90% of the time:
๐Ÿ‘‰ You didn't handle foreground manually
๐Ÿ‘‰ OR your payload is wrong

If your notifications are not working on iOS or APNs token is not generating, check this:
๐Ÿ‘‰ Flutter APNs Token Not Generating (Complete Fix Guide)

If this saved you hours of debugging, consider following for more Flutter deep dives.

Top comments (0)