FlutterFlow and Firebase Cloud Messaging integration: Step-by-Step Guide 2024

 

• Create a Firebase Project
• Navigate to the Firebase Console.
• Click “Add project” and follow the prompts to create a new project.
• Enable Firebase Cloud Messaging
• Within your project, click on “Project Settings”.
• Go to the “Cloud Messaging” tab and note down your Server key and Sender ID.

 

• Register Your App
• In the Firebase Console, navigate to the Project Overview page.
• Click on “Add app” and select the appropriate platform (iOS or Android).
• Follow the on-screen instructions to download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) file.
• Add the Configuration Files to Your Project
• Add the google-services.json file to the android/app directory.
• Add the GoogleService-Info.plist file to the ios/Runner directory.

 

• Android Configuration
• Open the android/build.gradle file and add the Google services classpath inside the dependencies block:

  dependencies {
      classpath 'com.google.gms:google-services:4.3.10' // Check for updates
  }

• In the android/app/build.gradle file, apply the Google services plugin:

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

• iOS Configuration
• Open the ios/Podfile and add:

  platform :ios, '10.0'
  use\_frameworks!
  use_modular_headers!
  
  target 'Runner' do
    pod 'Firebase/Analytics'
    pod 'Firebase/Messaging'
  end

• Install Pod Dependencies
• Run pod install in the ios directory.

 

• Update pubspec.yaml
• Add the following dependencies in your pubspec.yaml file:

  dependencies:
    flutter:
      sdk: flutter
    firebase_core: latest_version
    firebase_messaging: latest_version

• Run flutter pub get to install these dependencies.

 

• Initialize Firebase
• In your main.dart file, initialize Firebase:

  import 'package:flutter/material.dart';
  import 'package:firebase_core/firebase_core.dart';
  import 'package:firebase_messaging/firebase_messaging.dart';
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('FlutterFlow FCM Integration')),
          body: Center(child: Text('Hello World')),
        ),
      );
    }
  }

 

• Request Notification Permissions (iOS specific)
• Add the following to your AppDelegate.swift file:

  import UIKit
  import Flutter
  import Firebase
  import UserNotifications
  
  @UIApplicationMain
  @objc class AppDelegate: FlutterAppDelegate {
    override func application(
      \_ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
      FirebaseApp.configure()
      UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in }
      application.registerForRemoteNotifications()
      return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
  }

• Firebase Messaging Configuration in Flutter
• Update your main.dart to handle foreground messages:

  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
  
    FirebaseMessaging messaging = FirebaseMessaging.instance;
  
    NotificationSettings settings = await messaging.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );
  
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Got a message whilst in the foreground!');
      print('Message data: ${message.data}');
  
      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification}');
      }
    });
  
    runApp(MyApp());
  }

 

• Using Firebase Console
• Navigate to the “Cloud Messaging” section within your Firebase project.
• Click on “Send your first message”.
• Fill out the required fields, specifying your message details.
• Choose your app under “Target” section and click “Send test message”.
• Verify the Notification
• Run your Flutter app on a device or emulator.
• Ensure that you can see the notification when the application is in the foreground or background.

 

• Configure Background Messaging in main.dart
• Add a background message handler:

  Future \_firebaseMessagingBackgroundHandler(RemoteMessage message) async {
    await Firebase.initializeApp();
    print("Handling a background message: ${message.messageId}");
  }
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
  
    FirebaseMessaging.onBackgroundMessage(\_firebaseMessagingBackgroundHandler);
  
    runApp(MyApp());
  }

 

By following this guide, you should be able to successfully integrate Firebase Cloud Messaging with your Flutter application. This allows you to send and receive push notifications, thus enhancing user engagement with your app. Ensure that you test thoroughly and handle any edge cases, such as notifications received when the app is in different states (foreground, background, or terminated).