Send Push Notifications in Flutter with FCM

Unlock the Power of Push Notifications in Your Flutter App

User engagement is crucial to the success of any mobile application. Push notifications play a vital role in attracting user attention and contributing to major marketing success when implemented properly. In this tutorial, we’ll guide you through the process of integrating and delivering push notifications to a Flutter application using Firebase Cloud Messaging (FCM).

What Are Push Notifications?

Push notifications are clickable pop-up messages that appear on users’ devices, even when they’re not actively using your app. These notifications can inform users of status updates, message requests, reminders, alerts, and more.

Setting Up Firebase

To get started with FCM, you need to create a new Firebase project. Log in to your Google account, navigate to the Firebase console, and follow these steps:

1. Enter a project name and click Continue.
2. Disable Google Analytics (you won’t need it for this project).
3. Click Create project.

Integrating Firebase with Your Flutter App

Now that your Firebase project is ready, it’s time to integrate it with your mobile app. Since Flutter is a cross-platform framework, you’ll need to perform the initial Firebase setup for both Android and iOS platforms separately.

Android Setup

1. Click the Android icon on the project overview page.
2. Enter the Android package name and optionally, a nickname for your app.
3. Enter the SHA-1 hash (you can generate it using the command provided).
4. Register your app and download the google-services.json file.
5. Follow the instructions to add the code snippets to your project.

iOS Setup

1. Click the Add app button on the project overview page and select iOS.
2. Enter the iOS bundle ID and your app nickname.
3. Register your app and download the GoogleService-Info.plist file.
4. Open the ios folder of your project directory in Xcode and add the file.
5. Follow the instructions to complete the setup.

Installing Flutter Plugins

You’ll need the following Flutter plugins for this project:

• firebase_core
• firebase_messaging
• overlay_support

Add these packages to your pubspec.yaml file and install them.

Building a Flutter UI

Create a simple UI for your app with an AppBar and a Column to display the notification content.

Adding Push Notification Functionality

Define a variable for FirebaseMessaging and create a method called registerNotification() to initialize the Firebase app, request notification access, and configure messaging to receive and display push notifications.

Reacting to a Push Notification

Use the overlay_support plugin to show the notification on the UI. Wrap the MaterialApp widget with the OverlaySupport widget and use the showSimpleNotification() method to display the notification.

Handling Background Notifications

Define a top-level function called _firebaseMessagingBackgroundHandler() and pass it to the onBackgroundMessage() inside the registerNotification() method. This will handle background notifications and update the UI accordingly.

Sending Push Notifications

You can send notifications from the Firebase Cloud Messaging console directly. Enter a notification title, text, and name, and specify the target as either your Android or iOS app, or both.

By following these steps, you’ll have a solid understanding of how to integrate push notification functionality with a Flutter app using Firebase Cloud Messaging.