Adding Push Notifications in Flutter Applications with Firebase Cloud Messaging

Introduction

Push notifications are vital for re-engaging users and delivering timely updates. Integrating Firebase Cloud Messaging (FCM) with a Flutter app lets you send both data and notification messages easily. In this tutorial, you’ll learn how to set up Flutter FCM, configure your project, implement handlers, and test notifications on Android and iOS.

Setting up Firebase for FCM

1. Create a Firebase project
   • Go to the Firebase console and click “Add project.”
   • Follow the prompts, disable Google Analytics if you prefer, and finish setup.

2. Add Android and iOS apps
   • Android: Register your app with its package name (e.g., com.example.app). Download the google-services.json file and place it under android/app/.
   • iOS: Register using your iOS bundle ID. Download GoogleService-Info.plist and add it to Runner/Runner in Xcode.

3. Enable Cloud Messaging
   • In the Firebase console, navigate to Build > Cloud Messaging. Note your Server key (for testing) and Sender ID.

Configuring Flutter App for FCM

1. Add dependencies
   In pubspec.yaml, include:

   dependencies:
     firebase_core: ^2.0.0
     firebase_messaging
   
   

   Run flutter pub get.

2. Android configuration
   • In android/build.gradle, ensure com.google.gms:google-services is in classpath.
   • In android/app/build.gradle, apply the plugin:

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

   • Under <application> in AndroidManifest.xml, add:

   <service
     android:name="com.google.firebase.messaging.FirebaseMessagingService"
     android:exported="true">
     <intent-filter>
       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
     </intent-filter>
   </service
   
   

3. iOS configuration
   • In ios/Podfile, set platform to at least iOS 10:

   platform :ios, '10.0'

   • In Xcode, under Signing & Capabilities, add Push Notifications and Background Modes (Remote notifications).

Handling Push Notifications in Flutter

Initialize Firebase and FCM in your main.dart:

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

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print('Background message received: ${message.messageId}');
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: PushHome());
  }
}

In your stateful widget, request permissions and handle events:

class PushHome extends StatefulWidget {
  @override
  _PushHomeState createState() => _PushHomeState();
}

class _PushHomeState extends State<PushHome> {
  final _messaging = FirebaseMessaging.instance;

  @override
  void initState() {
    super.initState();
    _messaging.requestPermission();
    _messaging.getToken().then((token) => print('FCM Token: $token'));
    FirebaseMessaging.onMessage.listen((message) {
      final notification = message.notification;
      if (notification != null) {
        print('Foreground notification: ${notification.title}');
      }
    });
    FirebaseMessaging.onMessageOpenedApp.listen((message) {
      print('Notification clicked! ${message.messageId}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Firebase Cloud Messaging')),
      body: Center(child: Text('Waiting for notifications…')),
    );
  }
}

This snippet covers:

• Permission prompts on iOS

• Retrieving the FCM token (useful for targeting a device)

• onMessage (foreground) and onMessageOpenedApp (tap) handlers

• A background handler

Testing Push Notifications

1. Get the device token
   • Check your console for the printed token or log it visually in the UI.

2. Send test messages from Firebase Console
   • In Cloud Messaging > Send your first message, set notification title/body, and target your app via the token.
   • Click “Test on device.”

3. Use Postman or curl for data messages

   curl -X POST \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -H "Content-Type: application/json" \
     -d '{
       "to": "DEVICE_FCM_TOKEN",
       "data": {"key1":"value1","key2":"value2"}
     }'
   
   

   • Foreground: onMessage triggers.
   • Background: system tray displays notification.

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

You’ve learned how to integrate Flutter FCM into a Flutter app: setting up Firebase, configuring Android/iOS, implementing listeners, and sending test notifications. With Flutter Firebase Cloud Messaging configured, you can now deliver critical updates directly to user devices.

With FCM integration in Flutter complete, you’re ready to enhance user engagement and retention through timely push notifications. Happy coding!