Implementing Push Notifications in Flutter With FCM

Introduction

Implementing push notifications in Flutter is a common requirement for modern mobile development. Firebase Cloud Messaging (FCM) provides a scalable, cross-platform way to send notifications to Android and iOS devices. This tutorial walks through the minimal, production-minded steps: FCM setup, platform configuration, runtime handling, and displaying notifications while the app is foregrounded.

Setup Firebase And Project

1) Create a Firebase project in the Firebase Console and register both Android and iOS apps. 2) Download google-services.json (Android) and GoogleService-Info.plist (iOS) and place them in the recommended locations in your Flutter project (android/app and ios/Runner respectively).

Add packages to pubspec.yaml: firebase_core, firebase_messaging, and flutter_local_notifications. Keep versions up to date and run flutter pub get. Initialize Firebase early in main.dart so messaging handlers can register before UI loads.

Example initialization and notification channel (main.dart):

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Configure Android And iOS

Android: Ensure android/app/build.gradle includes the google-services plugin and that android/build.gradle has the Google services classpath. Set minSdkVersion to at least 21. In AndroidManifest.xml add the WAKE_LOCK permission if needed, and ensure the default launcher activity is configured per Firebase docs.

iOS: In Xcode enable Push Notifications and Background Modes (Remote notifications). Add the GoogleService-Info.plist to Runner and update Info.plist to include permission descriptions for user notifications if you request alert/sound/badge access.

Request runtime permissions on iOS and optionally on Android 13+ where a notifications runtime permission exists. Use firebase_messaging to request permissions and check the returned AuthorizationStatus.

Handle Messages And Local Notifications

FirebaseMessaging delivers three message scenarios: foreground messages (onMessage), background messages (onBackgroundMessage), and when the app is opened from a notification (onMessageOpenedApp). Use a background message handler defined as a top-level or static function. Use flutter_local_notifications to show a visible notification when the app is in the foreground, since FCM data messages do not auto-display while the app is active.

Background message handler example:

import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> firebaseBackgroundHandler(RemoteMessage message) async {
  // Initialize services if needed and handle background processing.
  print('Background message: ${message.messageId}');
}

// In main: FirebaseMessaging.onBackgroundMessage(firebaseBackgroundHandler);

In-app (foreground) handling: initialize flutter_local_notifications with platform-specific settings, create a notification channel on Android, and then in FirebaseMessaging.onMessage show a local notification using the payload from message.notification or message.data. Additionally, listen to FirebaseMessaging.onMessageOpenedApp to navigate to specific screens when users tap a notification.

Key implementation notes:

• Prefer data-bearing messages for consistent behavior cross-platform. Data messages give you control to display notifications in all states.

• Keep the background handler lightweight. Heavy work should schedule background processing via platform APIs.

• Secure your server key and use Firebase Cloud Functions or a trusted server to send notifications.

Best Practices

• Token Management: Listen to token refresh events and send the FCM registration token to your server. Handle token rotation gracefully.

• Topics And Segmentation: Use topics for broadcast-style notifications, but use server-side groups or device lists for targeted messaging.

• Foreground UX: Don’t overuse intrusive notifications while the user is in the app; consider in-app banners or badges instead.

• Analytics And Testing: Use Firebase console for simple testing, but validate payloads with curl or server calls. Log deliveries and opens on your backend for diagnostics.

• Privacy And Permissions: Explain why you request notification permissions and honor user opt-out preferences.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

FCM integrates well with Flutter for both Android and iOS. The essential steps are Firebase project setup, platform configuration, initial Firebase initialization, background handler registration, and local notification display for foreground messages. Implement token management and follow best practices for privacy, segmentation, and lightweight background processing to deliver reliable notifications in your mobile development projects.