Complete Guide Flutter Push Notifications with Firebase Cloud Messaging

Complete Guide Firebase Messaging and Local Notification for Flutter. We covered the below topics, firebase messaging setup, send notification from firebase console and send from the device as well.
1. Init firebase
2. Send message from console
3. Receive message
4. Show notification
5. Send notification to specific user
6. Open notification
7. Foreground notification
8. Background notification
9. Redirect user to a new route
10. Get device token
11. Save device token.
1:06 Packages
3:25 Initialize
4:58 Test
5:45 Get device token
9:55 Save token for corresponding user
14:00 Dealing with icon
15:30 Handle remote message
18:56 Cloud messaging
19:34 Test message
📕📕📕📕📕📕📕📕Take my Udemy course on Real Time Chat App
www.udemy.com/...
📕📕📕📕📕📕📕 Complete E-commerce app
• Flutter E-commerce App...
Get firebase FCM and Local Notification APK here
www.dbestech.c...
Buy me a coffee
www.buymeacoff...
Learn software programming with us step by step. Make money from home by learning programming
Complete e-commerce app
• Flutter E-commerce App...
Complete app for beginners
• Flutter 3.10.0 Master ...
Firebase complete study app
• Flutter Firebase Maste...
Complete Gym App
• Flutter Gym App | BloC...
Traveling App
• Flutter Master Class T...
Learn to build an android and iOS app
• Flutter App Developmen...
Learn to build a video player app
• Flutter Video Player T...
Learn to build a website step by step
• Complete Flutter Web A...
Learn to build an ebook app
• Flutter Backend | Flu...
Build an audio app step by step
• Flutter Audio Player T...
Twitter @dbestech
Instagram @dbestech
What's app @dbestech
LinkedIn @dbestech
Buy a Macbook like me as I am using
amzn.to/3PsdUHW
Twitter @dbestech
Instagram @dbestech
What's app @dbestech
Timeline
0:25 Send messages to specific user
1:08 Install dependencies
1:30 Created MyApp
1:57 Created MainScreen
2:35 Run the app
3:08 Initialize firebase
3:47 InitState
4:12 Request permission from device
5:40 Get Device Token from Firebase for iOS and Android
7:24 Save Device Token
8:25 Print device token
11:55 Flutter Local Notification Plugins Initialize
13:15 Flutter Local Notification Payload
13:48 About Notification Icon with Custom Icon
15:19 FirebaseMessaging.onMessage.listen

[@codewithsebastian]

2 Months ago i couldnt quite get what you were doing in some parts. 2 months after that, i come again. this time everything works flawlessly. I can see my progress thanks to people like you

[@dbestech]

yes, most welcome

[@someshsahu4638]

nice video sir thank you so much 🙏🏼🙏🏼🙏🏼, but how to send msg to multiple user please reply...

[@ebraheemlabib5133]

Man I really love and appreciate what you are doing here, big support ❤

[@dbestech]

I appreciate that!

[@HammadKhanYT]

Awesome tutorial, well explained with good concepts. I am wondering if the same code will work with iOS if I get the developer account? Or I will need to do something extra (besides the obvious iOS configuration). Can you outline those steps, would be very helpful.

[@dbestech]

This is the complete guide. It should work.

[@HammadKhanYT]

@@dbestech Perfect. Thank you!

[@sykoz371]

Hey, I'm sending notifications to users using topics from Cloud Messaging. I want to build an in-app notifications screen, so am I going to have to store that notification data in my database to be able to show them?

[@naveedkaimkhami2695]

Man how u know what i need. I was just searching out firebase messaging tutorial since the past few days. And yeah here i got the best one.

[@dbestech]

great.

[@invisiblesmoke1544]

@@dbestech Absolute pick #Sir

[@MaazKhan-us7qj]

Naveed bro can u help me in this please, share your contact number.. It's urgent today

[@edwardphilipguarin6460]

Hello sir! Thank you for this tutorial I have used it. I just want to ask also, can I use this in web build?

[@karlkiyotaka]

Thank you so much bro 🔥🔥🔥🔥

[@dbestech]

No problem

[@easy_english_123]

1:06 Packages 3:25 Initialize 4:58 Test 5:45 Get device token 9:55 Save token for corresponding user 14:00 Dealing with icon 15:30 Handle remote message 18:56 Cloud messaging 19:34 Test message 31:10 Send message from device 32:00 Manifest file

[@dbestech]

Thank you so much

[@easy_english_123]

@@dbestech Background case, how we show notification without having to scroll down?

[@iqramrafien9981]

hello sir. Do you have any tutorial how to implement push notification for flutter with bloc state management? For example chatting.

[@motivaet5447]

Very great content, thank you. I have a question :- How can we customize the push notification sound and how to make the notification appear like a snackbar on top when the app is on background or terminated.

[@dbestech]

I think app already shows notification as snackbar when it's on the background

[@zizou2316]

بارك الله فيك اخي العزيز BAREK ELLAH FIK MY BRO

[@ninehichem5037]

thx sir for the tuto , i have question! i have e-commerce app and i want users to get notification when there is new product is added, and also when they click on notification they went to the page and display the product info ! how can i do it ! and 3rd question , in the port methode , if i remove the "to" key will the notification be sent to all devices?

[@redis6375]

hello, i want to ask. can we use it for scheduled notification?

[@Jiayoujiayoulalalla]

sir, can you release a video on how to implement geofencing feature on flutter? I was searching the tutorial all over the internet but did not found one.

[@dbestech]

It's a complex feature though

[@si11_ibrahim]

Thanks a lot man. (Subscribed just now)

[@dbestech]

You are most welcome

[@ugochukwuumerie6378]

Thank you so much for this. Quick one, in an authentication scenario, when is the best time to get device token, at registration time or when the user is logged in, and also, the user can login from other devices too? Can the device token string of a particular device change when you recapture the token of that same device, so one can update the device token of that particular device? Thanks.

[@codewithsebastian]

In that case, you may not need to be saving the device token with a document ID of a user's Auth ID. You can be storing the token when the user launches the app or as in the demo above. for me how i store the tokens uniquely is that i get the last 20 characters of the token and save them as the document ID

[@ugochukwuumerie6378]

@@codewithsebastian Thanks, What of for user who uses another device to authenticate to your app? Then also the 2nd question.

[@mawaisadil2505]

Should we store the device token in the database only once when the app is started for the first time, or should we store it every time the app is opened? The reason behind this is that I want to trigger notifications from the backend (using Laravel) using the device token. So, what would be the best approach according to your experience? I'm developing my first app for production, and your opinion is very important to me.

[@dbestech]

You should store it every time.

[@bonnyahmad2502]

Do you have any tutorial regarding FCM using Cloud Functions and HTTP V1 protocol?

[@williamkishore6570]

Needed one💥. Thank you so much.

[@Lil-Undercover]

Please how can i navigate to a specific screen that requires a uid

[@haiderjaafer8164]

great work ... i have did all but notification not showing when click on button nothing happen ,,, please share code thank alot

[@Sujith116]

Hy this was an excellent tutorial, and I have also seen your other videos they were awesome🤯 I have a doubt in this notifications, I saw your previous tutorials as well you only explained how to send notifications to a particular user using those tokens, but how to send notifications to all the users? For example, I made an Event app that shows all the events, and another events admin app where I can create new events, if an event is created it should notify all the users who have the Event app. Can you help me with this?

[@andyyork6471]

You can have all of your users subscribe to a particular topic, then you would message that topic.

[@codewithnishant3963]

Thank you so much . Love from Nepal ❤❤❤

[@dbestech]

My pleasure 😊

[@rezainfinite]

You are a gem from our country 🤩🤩

[@dbestech]

haha. Thanks. Do you know where I am from?

[@srinivasanr9351]

Bangladesh

[@dbestech]

@@srinivasanr9351 you got it

[@nikkocapiroso3712]

Hello can i ask i should initialize on every screen i have or in just the main screen?

[@sanaishaq7306]

Main screen only

[@codein5]

Hey bro, for sending push notification from the app the legacy version used server-key but now it uses Oauth2 token how can I get that any idea?

[@jhonatanamortegui5852]

This video was very useful, just what i need. Thank you so much, man.

[@dbestech]

Glad it helped!

[@alexanderbarragan5837]

I followed your tutorial and everything worked as you showed except for one thing: In my case, the notification heads-up are not showing as yours. Instead, just a small icon app appears on the status bar and I have to expand the control section in order to see the notification. Do you know why this happens?

[@dbestech]

android is like that. not much you can do

[@matheusfigueredo7543]

Hey there. My IOS app is closing when gets a notification. Any idea why? BTW, i only uploaded APNs authentication key to Firebase flutter_local_notifications 12.0.4 firebase_messaging 14.1.4

[@vu4157]

i want to know, how to open a post in webview from the firebase message on flutter. i saw , in ur tutorial , we can go to new page. but how to open a link , in webview in the new page from the firebase notification. i have been searching for this , for very long time. any info is very helpful.

[@Bootngoals]

Great tutorial but how do you connect this to your rest API?

[@dbestech]

Here I explained how to connect to rest api kzbin.info/www/bejne/oKi3laBsm7OrZ6s

[@dirojasvera]

Hi, how are you ? I wanted to ask you something. I made the video and when I installed the app on two phones, the admin sends a notification to the client app using the sending mode "to": "/topics/myTopic1". The admin sends the notification but the client app does not receive the notification unless the client app also sends a notification. apart from if you receive the notifications that the admin app sends you... what could be the problem?

[@MohamedHassan-en8rv]

brother why i try to make notification but messaging.requestPermission is not functional and when starting i didn't get any request for permission what do u think the problem ??

[@sametdemirtop7578]

onSelectNotification was deprecated with new updates , how to add click action to my notifications , could you help me about this ?

[@MohandMahmoud-jl8uo]

thank you for this awesome video

[@rebel_king_yt]

Sir I want to send notifications while my application may be closed or running but these notifications are for some specific change in data in firebase how could I do that

[@flutter_crafter]

Thank You! It really helps me a lot. JzakAllah

[@dbestech]

Glad to hear that

[@bingxian1906]

Hai can flutter store the title of notification directly into firebase messaging?

[@prashant185]

Hi, its really helpful. thank you. everything working, but i am not able to pass title and body both on selectedNotification - I am receiving only body as payload in NotificationResponse object of onDidReceiveNotificationResponse... it is bit different in latest api.. would you please give a hint here how to pass both title and body

[@shibiliyaismail8068]

Did you solve it? I am facing the same issue.

[@xtramindglobal]

Use this version flutter_local_notifications: ^8.2.0

[@hiihii1538]

This way, work in ios also without developers account?

[@dbestech]

It wont' work without ios developer's account

[@maxoluwatosin]

This is great! Thank you so much!

[@dbestech]

You're so welcome!

[@braayangomez4630]

make a video on how to migrate from legacy HTTP to HTTP v1 to send push notifications

[@invisiblesmoke1544]

If want to send to all device ,then what should I do?

[@OrHava6562]

Thanks for the video helped a lot.

[@dbestech]

Most welcome

[@hashankannangara8723]

Thanks for the video !

[@dbestech]

My pleasure!

[@MohamedHassan-en8rv]

you are my best brother really love u

[@dbestech]

Most welcome

[@fanreza404]

in android, if i not allowing notification, it doesnt show popup request notification, is that the default behavior?

[@brcglog3808]

Waalaikumsalam warahmatullahi wabarakatuh, nice to see your tutorial again my bro, this is what I'm in right now

[@dbestech]

Glad to hear that

[@robertf4046]

Hi, thank you for the tutorial!! I want to integrate push notification functionality into my app. When a person uses the app, their device token will be saved in Firestore. How do I automatically save each unique token in Firestore? At the moment, each new device is saved as ‘User1’. I want each new device to automatically generate its own document in Firestore. Ideally, as I use Firebase authentication, I would like to have each new device linked to its authenticated user. THX IN ADVANCE!

[@dbestech]

the one I did here was a demo. You need to have user registration and during the registration you can save user name and device it. Next time user logs in check for user name or things like that.

[@robertf4046]

@@dbestech THX!!

[@syedharis2771]

can i send Notification from one device to another??

[@PiPe884]

This video is perfecto! Thanks for everything dude

[@PiPe884]

perfecto is perfect in spanish 😅

[@dbestech]

My pleasure!

[@Shon90az]

Thanks i really do appreciate it but for some reason im having issues with the line FlutterLocalNotificationsPlugin().initialize(initializationSettings, onSelectNotification: (String? payload) async. it says the named parameter 'onSelectNotification' isn't defined.

[@dbestech]

Hi, you maybe using the very latest version of it. try to use 9.1 something like that.

[@dirojasvera]

@@dbestech Professor, would we have any problems with the update?

[@iishiigamii]

I have same issue

[@xtramindglobal]

@@iishiigamii Use this version it works flutter_local_notifications: ^8.2.0

[@zerocoll20]

For some reason my code is getting two instances of main, one of them "requestPermission" is returning as null.

[@maxdegreat566]

may the good God bless you sir

[@wenwen4564]

hey sir, how to navigate to a new page when it is on background mode(not terminated)? Thanks!

[@dbestech]

I already covered it in one of my tutorials

[@invisiblesmoke1544]

And what should I do when I have to send to specific group?

[@andyyork6471]

subscribe these users to a topic to achieve this. The topic can be anything you like, such as "topic-users-teachers". I would suggest that you do this when receiving authorization. Also, note that the only way to remove the user's subscription to the topic, is by unsubscribing from the exact topic. Uninstalling an application will not unsubscribe them from that topic. For this reason, I would suggest storing the topic subscriptions somewhere, such as in a user's document in the firestore.

[@sanaishaq7306]

Notifications aren't visible(in terminated and background) as popup like I get in foreground. I have to slide down the notification tray to see the notification. Pls help

[@dbestech]

If you are in android, terminated and background would not really work, to be able to work with them, you need local storage and server side set up

[@sanaishaq7306]

@@dbestech if you can pls make a video for that or share any article here for quick help. Will these work on iOS (background terminated state)with all the setup you taught in iOS setup ?

[@rananomantariq4593]

Hey bro can you pls make a proper video for notification,? Because firebase notification metods are changed now .i hope u will make a new video related to notification.

[@dbestech]

This is the latest one.

[@prashantmangale5033]

On Android 12, notification arrives on application on foreground it throws an error as "set PendingIntent flag to mutable or immutable". Please help me to show foreground notification using flutter_local_notifications plugin.

[@xtramindglobal]

Facing same issue Did you get help?

[@devetips]

very informative tutorial thanks for sharing

[@dbestech]

My pleasure

[@MohamedHassan-en8rv]

brother i do all what u do as video but i get this error Unable to log event: analytics library is missing what can i do to fix ?

[@dbestech]

Maybe try to create a new firebase projects without choosing the analytics.

[@farshadsilent356]

sir I have error {Unhandled Exception: 'package:flutter_local_notifications/src/platform_flutter_local_notifications.dart': Failed assertion: line 1018 pos 12: 'callback != null': The backgroundHandler needs to be either a static function or a top} how can fix?

[@dbestech]

yes, you need to declare the handler function out of the class in the main.dart at the very top

[@samirok9340]

Hey, Iam getting "null check operator used on null value" error while clicking on notification in terminated state (android only). everything else works fine. help would be much appreciated. Thanks.

[@dbestech]

It means no value in the payload

[@samirok9340]

@@dbestech But it's working fine in iOS which means the payload is not empty. the issue occures only in android terminated state

[@dbestech]

@@samirok9340 terminated stat should do with background handler

[@samirok9340]

@@dbestech Have you included that in this video? if so please mention the timestamp

[@manashejmadi]

github link please. it would really help me

[@xyzsaid3223]

How to send device to device notifications? I mean when somebody likes my pic i how i get to know it

[@dbestech]

You need to get thier device id when they like your pic. And then from server side you may send push to firebase console. if you just use firebase as backend then you can store that info in the firebase database and get the device and send notification.

[@xyzsaid3223]

@@dbestech can you please make a tutorial on that brother ...it really saves a lot of time and googleing for lot of people

[@jesussalamanca596]

thank you so much

[@dbestech]

You're welcome!

[@grassenjoyer8470]

hello my onSelectedNotificationSetting was said to be undefined, is there any way I can fix this?

[@dbestech]

What version of local notification are you using?

[@grassenjoyer8470]

@@dbestech Version 11.0 , I have found the solution I change the onSelectedNotificationSetting to onDidReceiveNotification and the String into NotificationResponse. Btw thank you so much for replying to my comment and for this tutorial video

[@duasepuluh3419]

just exactly what i need, Sir. big support ❤ subs +1

[@dbestech]

Awesome, thank you!

[@duasepuluh3419]

@@dbestech you are welcome, Sir

[@mcandan]

⚠ Sending notifications directly from app is not safe. Because anyone can listen local network and see your auth token. Then change "to" field and send notification to everybody. You should handle this at backend.

[@dbestech]

yes, in production we do it from server. I have many tutorials for it. But the above tutorial covers the principle of sending notification.

[@mcandan]

@@dbestech Thank you for the reply and content. I just wanted to mention for whom just watches this content

[@redis6375]

any idea how to implement it with just using firebase and flutter? answer will be appreciated

[@mcandan]

@@redis6375 yes, you can do it

[@redis6375]

@@mcandan do you have any source to implement it? I’m kinda stuck right now

[@hadjmohammedbahamida786]

hi pro code sours thanks !

[@dbestech]

You're welcome!

[@emmanuelonwumah915]

Do you have github repo for this?

[@dbestech]

there's no repo for this

[@fatihyilmazz]

'image' :"asdas.png" I tried to send a picture, but the picture is not sent, do you know a way?

[@dbestech]

I haven't tried it

[@fatihyilmazz]

@@dbestech so how can i do it? can you help me?

[@faisalfotoh1909]

How to connect Latest Firebase with flutter | Install and Run FlutterFire CLI

[@heripurwanto2351]

wa'alaikumussalam

[@MaazKhan-us7qj]

Not worked, i tried many times, no errors, no exceptions but still notification not showing

[@dbestech]

android or ios?

[@MaazKhan-us7qj]

Android

[@MaazKhan-us7qj]

@@dbestech can u share your contact number!

[@Yonas-fq4cx]

i have get Double Notifications when get data

[@dbestech]

Maybe you are doining initialize twice

[@dbestech]

I had this problem too

[@peshawaamin3083]

❤️❤️

[@dbestech]

thanks

[@chihab3829]

12:40 is not working

[@AgitPermana]

No GitHub sources? Aah... c'moon... 🤔

[@dbestech]

It's logn ago, did not preserve it

[@faisalfotoh1909]

Firebase CLI reference flutterfire configure

[@dbestech]

kzbin.info/www/bejne/aZ3WgWSgj7OkoKc here is it

[@k.m.hasiburrahmansrijon4848]

can i have the source code

[@dbestech]

Did not save the project.

[@ruzgaredit169]

im too dumb to understand i will stick to only my guitar

[@dbestech]

it takes time

[@iishiigamii]

this is outdated