Complete Guide Flutter Push Notifications with Firebase Cloud Messaging
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2022
- 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/course/flutter-...
📕📕📕📕📕📕📕 Complete E-commerce app
• Flutter E-commerce App...
Get firebase FCM and Local Notification APK here
www.dbestech.com/tutorials/fl...
Buy me a coffee
www.buymeacoffee.com/dbestech...
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 - วิทยาศาสตร์และเทคโนโลยี
![[LIVE] : ONE ลุมพินี 73 | คู่เอก "วรพล vs พันฤทธิ์"](http://i.ytimg.com/vi/rrOljlqse3A/mqdefault.jpg)
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
yes, most welcome
Man I really love and appreciate what you are doing here, big support ❤
I appreciate that!
This video was very useful, just what i need. Thank you so much, man.
Glad it helped!
Needed one💥. Thank you so much.
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
Thank you so much
@@dbestech Background case, how we show notification without having to scroll down?
بارك الله فيك اخي العزيز BAREK ELLAH FIK MY BRO
This is great! Thank you so much!
You're so welcome!
thank you for this awesome video
Thanks for the video !
My pleasure!
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.
great.
@@dbestech Absolute pick #Sir
Naveed bro can u help me in this please, share your contact number.. It's urgent today
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?
Thank You! It really helps me a lot. JzakAllah
Glad to hear that
Thanks a lot man. (Subscribed just now)
You are most welcome
may the good God bless you sir
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?
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?
Hello sir! Thank you for this tutorial I have used it. I just want to ask also, can I use this in web build?
Thank you so much .
Love from Nepal ❤❤❤
My pleasure 😊
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?
Waalaikumsalam warahmatullahi wabarakatuh, nice to see your tutorial again my bro, this is what I'm in right now
Glad to hear that
Thank you so much bro 🔥🔥🔥🔥
No problem
This video is perfecto! Thanks for everything dude
perfecto is perfect in spanish 😅
My pleasure!
you are my best brother really love u
Most welcome
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
very informative tutorial thanks for sharing
My pleasure
For some reason my code is getting two instances of main, one of them "requestPermission" is returning as null.
hello, i want to ask. can we use it for scheduled notification?
in android, if i not allowing notification, it doesnt show popup request notification, is that the default behavior?
thank you so much
You're welcome!
Thanks for the video helped a lot.
Most welcome
onSelectNotification was deprecated with new updates , how to add click action to my notifications , could you help me about this ?
You are a gem from our country 🤩🤩
haha. Thanks. Do you know where I am from?
Bangladesh
@@srinivasanr9351 you got it
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 ??
nice video sir thank you so much 🙏🏼🙏🏼🙏🏼, but how to send msg to multiple user please reply...
Do you have any tutorial regarding FCM using Cloud Functions and HTTP V1 protocol?
If want to send to all device ,then what should I do?
just exactly what i need, Sir. big support ❤
subs +1
Awesome, thank you!
@@dbestech you are welcome, Sir
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
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.
I think app already shows notification as snackbar when it's on the background
hi pro code sours thanks !
You're welcome!
hello sir. Do you have any tutorial how to implement push notification for flutter with bloc state management? For example chatting.
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.
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.
You should store it every time.
Hai can flutter store the title of notification directly into firebase messaging?
Please how can i navigate to a specific screen that requires a uid
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?
android is like that. not much you can do
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.
This is the complete guide. It should work.
@@dbestech Perfect. Thank you!
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.
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
@@codewithsebastian Thanks, What of for user who uses another device to authenticate to your app? Then also the 2nd question.
can i send Notification from one device to another??
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?
yes, you need to declare the handler function out of the class in the main.dart at the very top
great work ... i have did all but notification not showing when click on button nothing happen ,,, please share code thank alot
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?
You can have all of your users subscribe to a particular topic, then you would message that topic.
Hello can i ask i should initialize on every screen i have or in just the main screen?
Main screen only
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.
Facing same issue
Did you get help?
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.
Hi, you maybe using the very latest version of it. try to use 9.1 something like that.
@@dbestech Professor, would we have any problems with the update?
I have same issue
@@iishiigamii Use this version it works
flutter_local_notifications: ^8.2.0
hey sir, how to navigate to a new page when it is on background mode(not terminated)? Thanks!
I already covered it in one of my tutorials
make a video on how to migrate from legacy HTTP to HTTP v1 to send push notifications
❤️❤️
thanks
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
Did you solve it? I am facing the same issue.
Use this version flutter_local_notifications: ^8.2.0
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!
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.
@@dbestech THX!!
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 ?
Maybe try to create a new firebase projects without choosing the analytics.
wa'alaikumussalam
github link please. it would really help me
hello my onSelectedNotificationSetting was said to be undefined, is there any way I can fix this?
What version of local notification are you using?
@@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
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.
It's a complex feature though
And what should I do when I have to send to specific group?
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.
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
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
@@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 ?
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.
It means no value in the payload
@@dbestech But it's working fine in iOS which means the payload is not empty. the issue occures only in android terminated state
@@samirok9340 terminated stat should do with background handler
@@dbestech Have you included that in this video? if so please mention the timestamp
Great tutorial but how do you connect this to your rest API?
Here I explained how to connect to rest api th-cam.com/video/jwTdm6fNx1I/w-d-xo.html
How to send device to device notifications? I mean when somebody likes my pic i how i get to know it
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.
@@dbestech can you please make a tutorial on that brother ...it really saves a lot of time and googleing for lot of people
'image' :"asdas.png"
I tried to send a picture, but the picture is not sent, do you know a way?
I haven't tried it
@@dbestech so how can i do it? can you help me?
How to connect Latest Firebase with flutter | Install and Run FlutterFire CLI
This way, work in ios also without developers account?
It wont' work without ios developer's account
Do you have github repo for this?
there's no repo for this
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.
This is the latest one.
i have get Double Notifications when get data
Maybe you are doining initialize twice
I had this problem too
Not worked, i tried many times, no errors, no exceptions but still notification not showing
android or ios?
Android
@@dbestech can u share your contact number!
12:40 is not working
⚠ 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.
yes, in production we do it from server. I have many tutorials for it. But the above tutorial covers the principle of sending notification.
@@dbestech Thank you for the reply and content. I just wanted to mention for whom just watches this content
any idea how to implement it with just using firebase and flutter? answer will be appreciated
@@redis6375 yes, you can do it
@@mcandan do you have any source to implement it? I’m kinda stuck right now
Firebase CLI reference flutterfire configure
th-cam.com/video/3lsP1jZNqjE/w-d-xo.html here is it
No GitHub sources? Aah... c'moon... 🤔
It's logn ago, did not preserve it
can i have the source code
Did not save the project.
im too dumb to understand i will stick to only my guitar
it takes time
this is outdated