Step-by-Step Guide to Implementing Push Notifications in a Flutter App using Firebase Cloud Messaging

Implementing push notifications in a Flutter app using Firebase Cloud Messaging (FCM) involves several steps, including setting up a Firebase project and configuring your Flutter app to receive and handle push notifications. Here is a step-by-step guide to help you implement push notifications in your Flutter app:

Create a Firebase project:

Go to the Firebase Console https://console.firebase.google.com/

and create a new project.

Add your iOS and Android apps to the Firebase project:

In the Firebase Console, navigate to the “Project settings” and add your iOS and Android apps to the project.

Add the Firebase Cloud Messaging dependency to your Flutter project:

In your pubspec.yaml file, add the following dependencies:

firebase_messaging: ^7.0.3

Configure your iOS app for push notifications:

In the Firebase Console, navigate to the “Cloud Messaging” tab and download the GoogleService-Info.plist file. Add this file to your iOS app’s Runner folder.

Then, in your Xcode project, navigate to the Runner project settings, and in the “Signing & Capabilities” tab, add the “Push Notifications” capability.

Configure your Android app for push notifications:

In the Firebase Console, navigate to the “Cloud Messaging” tab and copy the “Server key” and “Sender ID”.

In your AndroidManifest.xml file, add the following code, replacing “YOUR_SENDER_ID” and “YOUR_SERVER_KEY” with the values you copied from the Firebase Console:

<meta-data
   android:name="com.google.firebase.messaging
           .default_notification_icon"
   android:resource="@drawable/ic_notification" />
 <meta-data
   android:name="com.google.firebase.messaging
          .default_notification_color"
   android:resource="@color/colorAccent" />
 <meta-data
   android:name="com.google.firebase.messaging
          .default_notification_channel_id"
   android:value="fcm_default_channel" />
 <meta-data
   android:name="com.google.firebase.messaging
         .fcm_sender_id"
   android:value="YOUR_SENDER_ID" />
 <meta-data
   android:name="com.google
         .firebase.messaging.server_key"
   android:value="YOUR_SERVER_KEY" />

Create a new class, for example, FirebaseNotifications and initialize FirebaseMessaging instance in the initState method.

Handle the onMessage, onLaunch and onResume callbacks to handle the incoming messages.

Request the user to grant permission to receive push notifications.

Send a test notification to your device or app from the Firebase Console to check if everything is working as expected.

You can now send push notifications to your app from the Firebase Console or from your server using the Firebase Cloud Messaging API.

Include these Function in your main.dart file

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // If you're going to use other Firebase services in the background, such as Firestore,
  // make sure you call `initializeApp` before using other Firebase services.
  await Firebase.initializeApp();

  print("Handling a background message: ${message.messageId}");
}



Future<void> main()async {
  WidgetsFlutterBinding.ensureInitialized();
  // await FirebaseMessaging.instance.setAutoInitEnabled(true);
  //
  await Firebase.initializeApp();

  FirebaseMessaging messaging = FirebaseMessaging.instance;
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  NotificationSettings settings = await messaging.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    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}');
    }
  });

  print('User granted permission: ${settings.authorizationStatus}');
  // final fcmToken = await FirebaseMessaging.instance.getToken();
  runApp(const MyApp());
}

Once you have set up your Firebase project and configured your app to receive push notifications using Firebase Cloud Messaging, you can send notifications to your app from the Firebase Console or from your server using the Firebase Cloud Messaging API. Here’s how you can send a notification from the Firebase Console:

Go to the Firebase Console

https://console.firebase.google.com/

and select your project.

Navigate to the “Cloud Messaging” tab.

Under “Send your first message”, select “New notification”.

In the “Notification text” field, enter the message you want to send.

Select the app(s) to which you want to send the notification.

Optionally, you can add target options like topic or device, but it’s not required

Click “Send message” to send the notification.

You can also send notifications to your app from your server using the Firebase Cloud Messaging API. The API allows you to send notifications to specific devices or to topics, which you can use to send notifications to groups of devices. You can use the API with any server-side language and it requires an API key and a device token or topic to send the notifications.

It’s also worth noting that you can send notifications programmatically using Firebase Cloud Functions, Firebase Cloud Messaging API, or Firebase Admin SDK.