How to Integrate Push Notifications in Flutter Using Firebase

Push notifications are a crucial component of modern mobile applications, allowing you to engage and re-engage users by sending timely updates and reminders.

In this blog post, we'll explore how to integrate push notifications in a Flutter app using Firebase Cloud Messaging (FCM). Firebase Cloud Messaging is a powerful and user-friendly platform that enables sending notifications to both Android and iOS devices.

Before we begin, ensure that you have the following prerequisites in place:

In your Flutter project, open the pubspec.yaml file and add the necessary Firebase dependencies:

dependencies:
  flutter:
  sdk: flutter
  firebase_core: ^1.12.0
  firebase_messaging: ^11.1.0

After adding the dependencies, run flutter pub get to fetch them.

Open your main.dart file and initialize Firebase in the main function:

import 'package:flutter/material.dart';
 import 'package:firebase_core/firebase_core.dart';
 
 void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
 }
 

To receive push notifications, you need to request user permission. Add the following code to your main widget (usually MyApp):

import 'package:firebase_messaging/firebase_messaging.dart';
 
 class MyApp extends StatelessWidget {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
 
  @override
  Widget build(BuildContext context) {
  // Request notification permissions
  _firebaseMessaging.requestPermission();
 
  return MaterialApp(
  // ...
  );
  }
 }
 

Now let's handle incoming notifications. Add the following code to the same widget where you requested permissions:

class MyApp extends StatelessWidget {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
 
  @override
  void initState() {
  super.initState();
 
  // Handle incoming messages
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  // Handle the message
  print("Received message: ${message.notification?.title}");
  });
  }
 
  @override
  Widget build(BuildContext context) {
  // ...
  }
 }
 

To display notifications when the app is in the background or terminated, you need to set up a background message handler. Add the following code to your main widget:

class MyApp extends StatelessWidget {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
 
  @override
  void initState() {
  super.initState();
 
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print("Received message: ${message.notification?.title}");
  });
 
  // Handle messages when the app is in the background or terminated
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  }
 
  // Define the background message handler
  Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Handling a background message: ${message.notification?.title}");
  }
 
  @override
  Widget build(BuildContext context) {
  // ...
  }
 }
 

Now that your Flutter app is set up to receive notifications, let's test it by sending a test notification from the Firebase Console:

Congratulations! You've successfully integrated push notifications in your Flutter app using Firebase Cloud Messaging. You've learned how to request notification permissions, handle incoming messages, and set up background message handling. This capability opens up a world of possibilities for engaging your users and providing timely updates.

Firebase Cloud Messaging provides even more features, such as sending notifications to specific topics, customizing notification appearance, and handling user interactions with notifications. Explore the Firebase Cloud Messaging documentation to learn more about these advanced features and take your app's notification experience to the next level.

Happy coding!