My Hexaville
Spead the Word
flutter push notifications with firebase cloud messaging

Flutter Push Notifications With Firebase Cloud Messaging


Hey, let’s continue working on Flutter Tic Tac Toe app. Today I wanna dedicate the whole post about Flutter Push Notifications with Firebase Cloud Messaging (FCM)

Next Step

So we’ve built a single mode with AI, it was relatively simple if you created Tic Tac Toe apps in other frameworks before. It’s time to start building a multiplayer with Firebase and one very important part of it is establishing a connection between users (inviting, accepting the invitation). I did it with Firebase Cloud Messaging before and going to do the same in this series

How it works is that you see a list of all existing users and invite a player you want to play with. In Firebase I store FCM tokens of each user, using this token you can send a push notification to that person once needed

So what we need to do today is learn how to retrieve these tokens (register user for push notifications). And some basic differences of Flutter FCM implementation

Platform Differences

Actually, first I wanna talk about the platform differences. If you want to write cross-platform apps with Flutter, you don’t become a 100% Flutter developer. No, you’re an iOS/Android developer who uses Flutter framework for building apps. You don’t have that complete abstraction over platforms. Under the hood, Flutter uses native libraries, which means you’ll have to deal with twice the number of bugs you’d face if you were just writing one native app. And you’re going to point the middle finger to the screen twice as much

Don’t believe me?

Most of us have just one device: ether Android or iPhone and you don’t realize how different those things are. Heck, they are just phones, what could be different? They just there to host apps.

Nope. The whole ideology is completely different. iOS is way more restrictive and “serious” compare to Android. Android started to be more restrictive from Marshmallow, but still has a long way to go till iOS. On iOS, you even need to ask for push notification runtime permission! On Android, you don’t even need to declare it in Manifest, but don’t worry, Android will come up with more and more restrictions in the future!

So since you cannot build iOS apps on Windows or Linux, you need a Mac. And preferably an iPhone because testing on simulators sucks

But, dude, I don’t wanna buy that shit!

Well, get it for free then. But seriously, the difference between platforms is so huge, that the sooner you start using the other platform – the better. And if you try to ignore the second platform and just develop in Flutter, testing on only one platform, what you’ll end up with is ignoring second platform settings because hell, you can’t even test it! And once you decide to publish this app for iOS – you’ll face 10 years of pain and will regret you didn’t test iOS in time

Android Setup

Alright, let’s get started. If you’ve used FCM before with native framework – that’s a great bonus. First of all, create a new Firebase project and a new Flutter project

Android setup is way easier. Open android/app/src/main/AndroidManifest.xml and copy package value

flutter push notifications with firebase cloud messaging

Open Firebase console/Project Settings, add Android app and paste package copied before into Android package name

flutter push notifications with firebase cloud messaging

Click Register app in the next step download google-services.json and paste in in android/app

flutter push notifications with firebase cloud messaging

Now open android/build.gradle, add this line

And in android/app/build.gradle, this as a last line

Next open AndroidManifest.xml from app/src/main and add this intent-filter to activity tag

That’s it for Android

iOS Setup

Now you can have a Virtual Machine running Mac OS on your Windows, but it’s better to have a Mac and an iPhone

I recommend doing the iOS setup in Xcode because using UI is easier than editing text files, which you might not understand

Open ios directory in Xcode and copy Bundle identifier

flutter push notifications with firebase cloud messaging

Now open FIrebase console, add iOS app for your project using that Bundle ID and download GoogleService-info.plist from the next step. Click continue for the next steps, just ignore them

Open Xcode and paste GoogleService-info.plist into Runner directory

flutter push notifications with firebase cloud messaging

It’s important that you paste it using Xcode, if you use just a file explorer there will be some missing setting that I think Xcode does for you and your app won’t work

Next open Capabilities tab and turn Push Notifications on

flutter push notifications with firebase cloud messaging

Now go back to the General tab and make sure you have Automatically manage signing on and select your profile, this is going to save you from taking an extra step

flutter push notifications with firebase cloud messaging

 

If you don’t have an Apple developer profile – set it up first

Now go to developer.apple.com/account, select Certificates, IDs & Profiles, select Keys/All and click a plus button

flutter push notifications with firebase cloud messaging

Give some description, check APN’s checkbox and click Continue/Confirm. Copy Key ID, open Firebase Console/Project settings/Cloud Messaging. In iOS part where it says APN’s Authentication key click upload and paste Key ID that you copied

Don’t close that FIrebase pop-up window. Now go back to Apple screen and download .p8 file

flutter push notifications with firebase cloud messaging

and then upload it to Firebase console pop-up

Now open Identifiers/App IDs and look for Bundle ID of your app, open it, copy Prefix string and paste it in the Firebase Console pop-up, now you can finally click Upload

That’s it for iOS setup. It’s a routine for iOS developers, but you can see how much more complicated it than an Android one

Flutter Part

Finally, we’re done with platforms and can write Flutter code.  We’re just going to use an empty template Flutter project, all I want is to retrieve an FCM token for this device

Add firebase_messaging flutter dependency in pubspec.yaml

Here’s the whole main.dart code

I’m putting my registration code (_firebaseMessaging.configure) in initState, I don’t understand the use of this lifecycle function yet. I’m not focused so much on Flutter details right now, that’s the way it was in the tutorial

There we provided three different handlers for callbacks. They all have a map of Strings to dynamic inputs. Take a look at this table, it explains what is being run in different cases

So if you’re not familiar with FCM, there’re two types of notifications: notification type and data message type. First one displays a push notification automatically on your device. The second one doesn’t and it’s up to you to do whatever you want with the data that you received

As you see, the most reliable way is the notification type. On Android, you don’t even get to handle data message type when app is terminated. Which is weird, because in native Android I’ve always used data messages and created notifications myself, it worked fine

On iOS you need to ask a permission to show push notification, _firebasMessaging.requestNotificationPermissions() is for it, on Android it does nothing

Sending From Firebase Console

Here’s my token that I received and I can send push notifications right from Firebase Console

flutter push notifications with firebase cloud messaging

Go to Firebase Console/Grow/Notifications and create a new notification to all devices or one device using the token you’ve retrieved

On Android, in order for you to handle onResume and onLaunch callbacks, you need to add this key-value pair in your data of a push notification

flutter push notifications with firebase cloud messaging

 

If you don’t include it, you won’t have onResume (triggered when app was in background and user clicked on a push notification), onLaunch (app was terminated and user clicked on a push notification)

After all of this, you’ll get your notifications. On iOS there will be a push notification permission request on app open

Send From App

Just run this endpoint from your Flutter code using default networking library. I personally prefer using cloud functions, simply because I had it before and prefer keeping backend logic outside of apps. Because I think serverless architectures are a mess

Alright, this wraps it up with Flutter push notification using FCM, you learned how to retrieve an FCM token that you can use to send  push notifications to a particular user and how to send messages both from  Firebase Console and using FCM server endpoint

You can get the source code here

In the next part, we’re going to use what we’ve learned today to invite users, but first, we’ll need to sign them up! Stay tuned

 


About the Author Ihor Klimov

Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!

follow me on: