Flutter Push Notifications using Firebase

hi welcome to this video in this video we are going to cover everything about flutter push notification using Firebase push notifications or notification camera from the server they are a very important feature in modern day application because they encourage your users to further engage with your application for this I created a new flutter project and I did some code cleaning so as you can see we are inside the basic counter application next we are going to create a new Firebase project for this we go to the Firebase console we create a new project I'm going to name it push notification we can either enable or disable Google analytics I'm going to disable it and now we wait for our project to be ready great our new project is ready so now we should link our existing flutter application to this Firebase project for this we have two options we can either follow the instructions here and do it manually for Android and the instructions here for iOS or we can use another tool which is the flutterfire CLI the flatter fire CLI is a tool helps you integrate Firebase into your application almost automatically we already did a video covering everything about the flutterfire CLI so please make sure to check it out do you want to learn flutter in a better and faster way then simply join our 12-week flutter training on heyflatter.com where you master all the flutter topics such as start your idea and State Management Firebase clean architecture databases and so on by watching our structured courses that help you for each topic to go from a newbie until an expert level in flutter okay so back into our Firebase console we are going to add Firebase into our Android flutter application for this we click here on this Android icon next we should find the Android package name so back into our source code we go into the Android folder app folder SRC Main and finally the Android manifest file this is the package name of our application so we copy it we paste it here we register the app next we should download this configuration file so I'm saving it here on the desktop great so we should put it into the correct location which is next to the SRC folder for this I'm going to drag and drop it great for the next step we should add the Firebase SDK for this we go to the project level build.gradle file which is this file here so we should make sure that we have the Google repository here if not we should add it and we should add a dependency here okay so I'm going to copy this slide and I'm pasting it here and again we should make sure that we have the Google repository as for the next step we move on to the app level build.gradle file which is this file here so we should apply some plugin here for this I'm going to copy this line and paste in it here and we should add some dependencies so we go here we copy this and paste in it here and that's it we are ready to use Firebase with our Android flutter application unfortunately I cannot show you the steps needed for iOS because I do not own an iOS development environment but we already did a video covering everything you need to know about iOS and Firebase so please make sure to check it out so now we are adding the Firebase packages for this I open a new terminal we go to the pubspec.yaml and we run this command plus report add Firebase core create as you can see Firebase score has been added next we run this command platform add Firebase messaging and as you can see Firebase messaging has been added successfully okay so before we proceed we are doing a small prevention for this we go to the Android folder the add folder and the build.gradle and in the default configuration we change the minimum SDK version to 19. this is super important in preventing our application from crashing in the future okay so now we are going to create the API folder for this we go into our lib folder we create a new folder we call it API and inside it we create the Firebase API file okay so inside this file we are going to create a simple Dart class responsible for all of our notification logic so first we create the Firebase API class inside it we create Firebase messaging instance of course we need to import the Firebase messaging package next we create the init notification method and we mark it as a synchronous inside this method we add this method for requested permission from the user on iOS this will show a dialog on Android it will return a value indicating whether the app notification are enabled or disabled by the operating system okay so the next thing we're going to do is we're going to get the Firebase Cloud messaging token this token is an identifier for our device in our application and we will use it later on for sending the notification to this specific device for now we are going to print it to the console however in real world application you would probably want to save this token somewhere in your database alongside your user entity to use it later on okay great so far so now we are going to jump into the main.dart okay so inside the main function we need to initialize Firebase by calling these two lines and then we need to call the notification class and Method we have just created and of course we Mark the function as asynchronous okay so now I'm going to save this and we are going to our project I have my phone plugged into the computer okay great so as you can see this is the fcm token printed to the console so now our application is fully integrated with Firebase and we can proceed okay so back to the Firebase API file we are going to add some code which allows us to receive a notification in the background in the terminated case so inside the init notification method we add this line on background message or the background Handler we pass a function to it please note that this function cannot be an anonymous function it must be a top level function meaning it's not a class method which requires initialization so I'm going to declare it here outside of the Firebase API class so we write the handle background message and we pass the remote message as a parameter to it so now I'm going to print the notification title body and the message data if exists okay great so I'm going to hot restart the application great so I'm going to copy the fcm registration token now we jump into our Firebase Castle so the engage tab the Cloud messaging Tab and we sent our first message the title can be push notifications and notification body can be are awesome and I click on this we add the fcm registration token because we want to Target this device and now I'm going to move my application to the background and we send the notification great as you can see we have just received a notification with the parameters we entered here okay so if we jump into our Diva console we can see the log that we expected title push notifications body are awesome and the empty payload okay so if we click on this notification we are redirected into our application great so now I'm going to terminate my application because we want to test the terminated case so as you can see our app is terminated okay so back to the Firebase console we are going to send another message to the same CM token great as you can see we received another notification with the parameters we wanted so if we click on it our application is open from the terminated State okay next we are implementing the navigation to a particular screen or notification click for this we need to create some UI for this I'm creating another folder inside the lib folder which is the page folder inside it I'm creating two screens first is the notification screen dot dot and for the next screen it is the home screen dot Dart okay so for the home screen we create a very simple widget just scaffold with an app bar for the notification screen it's almost the same we just add a named route to it okay so if we jump to the main.dart we add Navigator key for navigation purposes we change the material app into our own we import the missing files and finally we get rid of the existing widget so if I save this and I perform a hard restart this is our UI now okay so if we go to the Firebase class we are going to add some code here so we create the handle message method If the message is null we exit this method else we navigate to the notification screen with the message as an argument next we create this method for further organization of our code so we add this line which is very essential for the iOS foreground notification this will become more essential in the future we add this line which is the get initial message this is responsible for performing an action when the app is open from a terminated State via a notification so we pass the handle message to it meaning we want to execute the handle message method when the app is opened from a notification next we add this line the on message opened app which is the same but for background case meaning we want to execute the handle message method when the application is opened from the background State video or notification finally we but the background Handler remove it here for better organization of our code so inside the init notification method we called it you need push notification method here now we jump to notification screen inside the build method we add this line which is the argument we passed to this screen and we display everything from the argument here okay so if I had to restart my application so I'm moving my application to the background and I'm going to the Firebase console Cloud messaging tab as usual so I'm writing a title as background notification is here and I send the test message to this fcm so the notification is here I'm clicking on it as you can see we navigated not to the home screen but to the notification screen with the argument we passed so we have the title body and the empty payload so if I get rid of my application I change the title send the message the application is terminated as you can see we received an application we click on it this can take a while because the application is launching and we are navigated to the notification screen with the arguments we wanted okay so far so great but what happens when our notification arrives and our application is in the foreground in this case Firebase messaging is not enough we need another package which is the flutter local notification so we go to the pubspeak.yamo inside the terminal we run this command flutter path at flutter local notifications as you can see it has been added successfully next we go to the Firebase API class so first we need to create an Android Channel which is a sort of notification category we pass some settings to it and we need to register it inside the Android manifest file so we go to the Android folder inside the Android manifest file outside of the activity tag we add another tag we provide the channel ID and the channel importance to it so now we register our Channel and back to the Firebase API class next we need to create a flutter local notification plugin instance and now we are going to take advantage of an fcm method which is the on message listener this listener triggers whenever a message arrives when our application is in the foreground so we just add it into our init push notification method we extract the notification object from the message object if it is now re-exit our method else we show a local notification with the hash code titled body of the notification we have just received and we provide the channel ID name and description to it of course of the channel we have just created and we provide an icon to it as for the icon we need to go to the Android folder app folder SRC Main and rest folder so I'm just going to copy this image from the MIP map folder and I'm pasting it inside the drawable version 21 folder and I'm pasting it inside the drawable folder of course you can provide whatever image you want but you just need to provide the correct path to it okay so inside the Firebase API class as for the payload or the data we pass from the notification to the local notification it can only be a string not an object so we just need to transform it into a map and then we decode it as a Json string in order to preserve our object okay great so far so now we are creating another method which is the init local notification method so first we initialize iOS next we provide Android initialization settings and we provide a drawable icon we have just added next we put together both of the Android and iOS settings initializations and we initialize the local notification with the settings we provided for the on select notification method this is the method that triggers when a user clicks on a local notification so you just need to decode the payload we encoded earlier and we create a remote passage object from it which we need to pass to our handle message method in order to trigger navigating to the notification screen as we seen earlier now we need to resolve platform-specific implementation for Android for iOS this of course would be different and finally we create the notification Channel with the Android Channel we added earlier so now back to the init notification method we just add or call our init local notification method everything is good so far we just thought we start our application you may face some errors right now that is because we did a lot of work on the Android folder you just need to reinstall your application if you face an error and don't forget to copy the fcm token because it changes on every installation okay so back to the Firebase console and create a notification with the title foreground notifications are awesome I'm sending a test message to this fcm as you can see we have just received the notification while our application is in the foreground and if we click on it we are redirected to the notification screen with the data we entered so everything works perfectly as you can see we managed to get notification whenever the application is on the foreground background or terminated this was super easy thanks to Firebase I hope you find this video useful and I'll see you in the next one [Music] foreign [Music]

Channel: HeyFlutter․com

Views: 170,179

Keywords: android, engage users, fcm, firebase, firebase cloud messaging, firebase cloud messaging flutter, firebase console, firebase messaging flutter, firebase_messaging flutter, flutter, flutter fcm, flutter firebase messaging, flutter firebase notification, flutter firebase push notification, flutter firebase_messaging, flutter push notification, flutter push notifications, flutter push notifications with firebase, local notifications, programming, push notifications

Id: k0zGEbiDJcQ

Length: 14min 37sec (877 seconds)

Published: Mon Jun 05 2023