How To Integrate Firebase Cloud Messaging in Flutter

Push notifications make the digital world go ‘round, but implementing them as a developer is often easier said than done. Fortunately, Google’s Firebase Cloud Messaging (FCM) tool allows you to set up these notifications across multiple platforms for less hassle. 

FCM is a game-changer for developers when paired with Flutter, Google’s cross-platform UI toolkit. With just a single codebase, you can implement seamless notifications for Android, iOS, and web applications. 

Whether you’re updating users about new features, sending personalized offers, or delivering critical information, integrating FCM with Flutter ensures your messages reach the right audience at the right time.

In this guide, we’ll walk you through the steps to integrate Firebase Cloud Messaging with Flutter and share best practices to optimize your push notification strategy for maximum impact.

In this article:

• What Is the Flutter Firebase Cloud Messaging Integration?
• How To Integrate Firebase Cloud Messaging with Flutter
• Turn Notifications Into Conversations
• Frequently Asked Questions

What Is the Flutter Firebase Cloud Messaging Integration?

Google developed Flutter as an open-source UI framework to build mobile, desktop, and web applications with a single codebase. While it does require learning the Dart programming language, Flutter is known for being fast and supporting high-quality user experiences. 

The Flutter Firebase Cloud Messaging integration allows you to set up push notifications in any application using Flutter with Firebase. FCM works on Android, iOS, and web apps, making it the perfect tool for Flutter apps, which are cross-platform by design. 

Adding Firebase to a Flutter app allows you to send push notifications to your users, sending timely reminders, updates, and promotions for less hassle. The Firebase Cloud Messaging Flutter integration also helps developers: 

• Simplify cross-platform integrations: Write your code once in Flutter and use FCM to send those notifications across all platforms. It’s way faster than rewriting code for every platform!
• Reduce setup time: Best of all, Flutter has plugins for Firebase, making this integration very straightforward. 
• Scale up: Flutter is already flexible, but adding FCM to the mix makes your app even more scalable without needing platform-specific code. 

How To Integrate Firebase Cloud Messaging With Flutter

Integrating FCM with Flutter is as simple as enabling a few permissions and customizing the connection to your liking. Follow these steps to integrate the two apps in just a few clicks. 

1. Set Up Your Firebase Project

Go to your FCM dashboard to create a new Firebase project. If you’d like the integration to work with an existing project, select it here. 

For Android, download the google-services.json file and place it in the android/app directory. Download the GoogleService-Info.plist file for iOS and place it in the ios/Runner directory.

From there, you’ll need to add the Firebase packages to your pubsepc.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_messaging: ^14.0.0

Don’t forget to run the command to fetch dependencies, too:

flutter pub get

2. Configure the Platform

At this point, the process will differ depending on whether you’re setting up the integration for Android or iOS. 

For Android, you need to add the Google Service Gradle plugin to android/build.gradle, which will look like this:

dependencies {
    classpath 'com.google.gms:google-services:4.3.10'
}

Next, apply the plugin:

apply plugin: 'com.google.gms.google-services'

For iOS, be sure to enable push notifications in your project settings. Next, add permissions to ios/Runner/Info.plist, which looks like this:

<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
    <string>processing</string>
</array>

3. Add Firebase to Your App

Using Dart, initialize Firebase in your app with this code:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // Handle background notifications
  print('Handling a background message: ${message.messageId}');
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

The groundwork is in place at this stage, and now it’s time to set up FCM’s listeners, which will help you handle incoming messages: 

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('Message received: ${message.notification?.title}');
});
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print('Message clicked! ${message.notification?.body}');
});

You also need to retrieve the FCM token, which allows you to send messages directly to users’ devices:

FirebaseMessaging messaging = FirebaseMessaging.instance;
messaging.getToken().then((String? token) {
  print("FCM Token: $token");
});

Now it’s showtime! Go to your Firebase Console to send a test notification. Test the integration on multiple platforms and devices to ensure everything comes across correctly.

If you’re testing web push notifications, check out webpushtest.com for a demo of standards-based push notifications across all platforms—even iOS.

Turn Notifications Into Conversations

As long as you know how to code in Dart, integrating FCM with Flutter is as easy as dropping a few lines of code into place. Flutter’s flexibility and Firebase’s messaging features help developers create feature-rich applications that maximize the user experience without stretching internal resources. This integration streamlines cross-platform notifications, saving developers a lot of time and energy. 

However, this integration has its limits. Why not press the Easy Button and save more time with MagicBell? With MagicBell, you can deliver seamless, real-time notifications across channels that keep your users informed and coming back for more. Create your free MagicBell account now and start creating better user experiences. 

Frequently Asked Questions

What’s the difference between notification messages and data messages in FCM?

Notification messages automatically trigger notifications on the user’s device. Data messages, on the other hand, require manual handling within your app and are better for background updates. 

Can I customize how notifications appear in the app?

Absolutely. Use the local_notification package in Flutter to customize titles, body text, icons, sounds, and images for your notifications. 

Does FCM work offline?

Yes. If a user’s device is offline, Firebase Cloud Messaging will queue the messages and send them once they’re back online.