📱Android Push Notifications • Flutter x Firebase Tutorial

hey what's up welcome back to another quick flutter tutorial in this one I'm going to show you how to implement push notifications for Android using flutter and Firebase [Music] so let's go to your Firebase console and let's create a new project here I'm just going to call it push nerdy tutorial and I'm just going to disable the Google analytics for now and let's just create a project awesome so now that you've done that let's come back to our code and I've opened up a brand new flutter project so you should just get this demo home page and I've got my Android emulator here on the right so before we do any of the code let's make sure to connect our flutter project to the Firebase so in the terminal I'm just going to say Firebase login first just to make sure that you've got the correct email address cool and then let's say dot Pub globalactivate and we want to activate the flutterfire CLI suite and on Mac it seems like we get this kind of issue so you just need to copy this and paste it in and the main thing we want to do here is flutter fire configure so you can see it's going to fetch the available projects and hopefully we can see our list of projects and that's the one that we just created so push 90 tutorial and select the platform so for this one I'm just going to do only Android and I'm just going to hit yes and that should be done so if you come back to the console and you refresh the page it should say that you've connected your Android app awesome so now let's come back to our code again and we want to add in a couple of packages so flutter Pub add and the first thing is Firebase core and we also need one more which is the Firebase messaging so if you don't know what we just did if you go to your project and you go to your pubspec.yaml this is where all of the packages and dependencies are going to be organized and you can see that we've added the Firebase core and the Firebase messaging here awesome now we can start coding so I'm going to delete everything below the main function just to create this from scratch so I'm going to create my app and let's create our material app and at the beginning let's go to our home page which we haven't created yet so in the library let's create a new folder called Pages just to keep everything nice and organized and I'm going to create our homepage.file here so this one let's just have a blank scaffold and if I come back to the main dot dot you can now see we can import what we just created cool and then if you save and run this it should just be a blank scaffold so just a blank white app now just so we know what page we're looking at maybe we should create a app bar and just say home page for the title now when we're working with Firebase we always need to go to our main function and just sort of initialize a couple things so we need to say widgets flutter binding Ensure initialized and we want this function to be an asynchronous function so that we can await and Firebase initialize app and in the options let's just say the current platform sorry I'm just going to kill the app and I'm just going to restart it just to make sure everything is connected and it's fine now I ran into this issue a lot when dealing with Android emulator and I figured out a solution for it so if you go to Android and your build.gradle file if you look at this number here if you just change this to 14 then we should be able to run the emulator again and honestly I'm not entirely sure why why we have to do that so if anyone knows just let me know below but we should be able to run our app now awesome so now that everything's done I'm just going to create a new folder called API and let's create a file called Firebase API dot dot and this is where we're going to handle all of the Firebase related Services now just before we code I want to just have a plan so that we know what we're doing so I'm just going to comment here the first thing is I want to create an instance of the Firebase messaging then we need to have a function to initialize the notifications and we need a function to also handle the received messages and then we might need another function just to further initialize some of the background settings so I'll explain what all of these are doing so just starting from the beginning we need to grab an instance of the Firebase messaging so let's just create that here and then we can create our first function so this is going to be a future and I'm going to call it init notifications so in here the first thing we have to do is we need to request permission from the user so this is going to prompt the user just to allow the notification and then we need to fetch the Firebase Cloud messaging token for this device so when you install the app on your phone each device is going to have its individual token and let's print the token just so that we can see it so normally you would send this to your server and so let's start creating this if you go to our instance so the Firebase messaging you can see we can request permission and then let's grab the token as well and then let's just do a Quick Print statement here so that we can see what this token actually is cool so if I save this and I just run it nothing's happening because we forgot to call this function we just created so let's go to the main.dot file and when the app fires up it's going to start off from this main function and let's just also get our Firebase API and then let's initialize the notification so that's the method that we just created awesome so let's just save this and run it again and you can see in the console that there's the token for this particular Android device right so if you just grab this token and you go back to your console if you go to this engage and you go to the messaging we can create your first campaign and let's get the notification messages and let's try to send our first notification so I'm just going to call this flutter app and you can send a little message here so I'm just going to say sending you a notification bro and you can click on this test and you can see it's asking for the token so let's just paste our token in and then I'm going to click test so let's see if this works if you come back to your home page so I'm just going to exit the app and you can see there's the little notification it just got received sweet there it is so if I click into it then we can go to our app on a very basic level this is how we send notifications using Firebase so now I want to show you when the user clicks into the notification how we can go to a very specific page to display that information so if you look at this next function that we're about to create the function to handle received messages that's all we're going to do so what we're going to do first is in the pages let's just create one more page and I'm just going to call that notification page and this would just be a very basic scaffold with an app bar and since we're dealing with a few different pages we're going to need to set up some navigation so what I'm going to do is let's define some routes and I'm going to call this notification screen and one useful thing is going to be a navigator key so if you just give this to your material app this will help us navigate between different screens very easily let's come back to our firebase.api and fill out that function so I'm just going to call this handle message and as a parameter we're going to have the message for the notification now if the message is null then let's just not do anything but if the notification has a message then let's go to that specific page when the user Taps on the notification so then you can see here that Navigator key that we just created earlier so let's just hit enter to import it and you can go to this current state and usually when we navigate we can use this push named to go to the route that we defined in the main.dot file and what's really useful here is you can see that we can pass through an argument so what that means is like pass through our message cool and then the last function to fill out here is just on ways to handle the background settings so handle notification if the app was terminated and now opened and also we want to attach event listeners for when a notification opens the app so I'll explain what this all means but starting with the first situation which is when the app is terminated and now opened if you go to the instance then we can get the initial message and then let's just handle the message so that's the function we just created and we can also say on message open app we can listen for any of these messages and pass through that same function so if you just save that and you come back to our notification page in this build method let's get the message and let's try to display it on the screen so I'm just going to call that final message you get the Moodle route and get the argument for the notification and so once we have this message then we can just say all right give me that notifications title and give me the body and also just give me the data as well so let me show you what we just coded up so we have this initialize push notifications and so let's just make sure to call this method at the very beginning and now if I restart this looks like we have another token because we installed it again so I'm just going to grab this and in our console maybe let's switch up the message and do another test so if I just add that token in again and I hit test then you can see there is the notification and now hopefully if I click into this we just navigate to the notification page and then we can actually display the contents of that notification in our app cool so we just did that with some test messages so if that's all working if you scroll down you can hit next and then we have to select the app and there's our Android app that we connected hit next and then you can schedule notifications so you can do it now or you can schedule it for a particular date and time you can see we can also do recurring notifications but I'm just going to hit now let's go to next and review and let's publish and so this is how you create a new campaign for notifications using Firebase so hopefully that was simple and clear to understand if you have any questions about any of the code just comment below and I'll try to come around and help but this is how easy it is to set up push notifications for your Android device using flutter and Firebase and now I'm going to try to figure out how to do it for iOS devices as well so look forward to that one and hopefully you learned something thanks for watching and I'll catch you guys in the next one [Music] thank you

Channel: Mitch Koko

Views: 48,806

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: A3M0N_B-CR0

Length: 12min 39sec (759 seconds)

Published: Sat Sep 02 2023