Setting Up Firebase Cloud Messaging On Flutter (FCM Messaging)

What is flutter? Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Awesome right? 😎

Let’s get straight to it.

Photo by James Pond on Unsplash

You need to have a running flutter app, and a firebase application

Open android manifest under android/app/src directory and add the following code to get the payload

<application ...>
    <activity ... >

  <intent-filter>
      <action android:name="android.intent.action.MAIN"/>
      <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>

  <!-- Add below to ensure we get the payload when tapping on a notification -->
  <intent-filter>
      <action android:name="FLUTTER_NOTIFICATION_CLICK" />
      <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>

    </activity>
</application>

That’s all we need for Android.

Let’s look at the important parts for iOS. Make sure you have your certificates generated for Push Notifications and Have added the GoogleService-Info.plist file into your project. Those steps can be seen here under iOS Integration.

Open up your project in Xcode using the workspace. Select the runner in the Project Navigator and turn on Push Notifications, Background Modes and under Background Modes enable Background Fetch and Remote notifications.

Open up your AppDelegate.m file and add

if (@available(iOS 10.0, *)) {
  [UNUserNotificationCenter currentNotificationCenter].delegate = (id) self;
}

Thats all for the setup.

We can now add the firebase_messaging package to your pubspec.yaml from pub.dev

(time of publishing this article latest package is firebase_messaging: ^7.0.3)

We need to create a new file under the services folder called pushNotificationService.dart

then create a class called PushNotificationService in it to store a local instance of the FirebaseMessaging class

In this class we’ll have an initialize function that does the following things.

• Request the permissions for iOS if the platform isIOS.
• Configure the callback functions for when we receive a push notification

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging();

  Future initialise() async {
    if (Platform.isIOS) {
      _fcm.requestNotificationPermissions(IosNotificationSettings());
    }

    _fcm.configure(
//when app is open and it receives a push notification
  onMessage: (Map<String, dynamic> message) async {
    
    print("onMessage: $message");
  },
//when the app is completely closed and not running in the background, and opened directly from the push notification
  onLaunch: (Map<String, dynamic> message) async {
    print("onLaunch: $message");
  },
//when the app is in the background and opened directly from the push notification
  onResume: (Map<String, dynamic> message) async {
    print("onResume: $message");
  },
);
  }
}
Future getToken() async{
  return _fcm.getToken();
}

The onLaunch and onResume callbacks is where you would deserialize your message and navigate or use that information to do something in the app.

Next, we want to have the service running when we open our app (startup logic), on this case am using my stateful widget that handles the splash screen

final PushNotificationService _pushNotificationService = PushNotificationService();

create a function handleStartUpLogic on the stateful widget, to get the specific device token. you can now save this token to your database and schedule notifications to your customers or users

Future handleStartUpLogic() async {
  await _pushNotificationService.initialise();
  print("token is");
  _pushNotificationService.getToken().then((res){
    print(res); 
 });
}

then on the initState(); function, call the above function to initialize the fcm onto the application

@override
void initState() {
  super.initState();
  handleStartUpLogic();
}

Finally, Create an app on console.firebase.com and download google-services.json and place it on the root folder on android/app/

Now test using cloud messaging on the console as shown below

That’s it!