Firebase Push Notification in Flutter for Video Call 2023 -A-Z | flutter video call | FCM | Firebase

in this video we will learn about push notifications and Firebase Cloud messaging through device tokens so first create a flutter project gave it any name it's a push notification flutter the project is created foreign let's first run the emulator wait for a few seconds now let's test this app on the emulator wait till it builds successfully the app has been installed on emulator now go to Google Chrome search for firebase.com we will connect our app with Firebase so get started click on ADD project give the project any name continue default account for Firebase our project is creating foreign now here if you want to connect manually then click on this Android if you have set up our best CLI then just click on flutter if you haven't set up yet then in YouTube search for how to connect flutter with Firebase click on this video just follow the steps in this video and install Firebase CLI I have already installed the Firebase CLI so I have clicked on flutter icon click on next copy this and paste it here in terminal also copy this and paste it in terminal enter thank you because we want to connect our app for Android and iOS our app has been connected to the Firebase click on next now copy this and paste it here make this feature import Firebase options now we will import Firebase core dependency so copy this and paste it here in pubspeak.tml file Pub git git dependencies ignore it import Firebase core click on continue to console our app has been connected for Android and iOS now let's test this first on emulator it gives us this error so just choose widgets flutter binding Dot and field initialized run it again it has given us error again so let's terminate this first and we will rerun our app wait for a few seconds foreign build successfully let's remove this also these comments remove this from here call home page create a new DOT file homepage dot dot import material Dot create a home page class scaffold body we will create two buttons get token and send push notification so row and row we will use ankle widget on tape child container decoration box decoration color s dot teal with let's say 300 height 20 child text first button will be off token so get token now copy this you will create another button of send push notification make these constants let's run our app it has given us error so N Main dot dot import homepage dot dot constant region it is not looking good so let's give it some decoration quickly my next alignment dot space between make this 30 30 padding of five let's increase width to 60 and height to 50 100 120 make text Center text land text land Dot Center now it looks good we'll just create a sample a bar with title home page yes now we will also import Firebase messaging package so copy and paste it here we will also import awesome notification package you will not use this version because this is not stable yet we will use this version 0.6.21 copy and paste Pub git now in main. first remove this you will use awesome notification so awesome notifications Dot initialize like this null semicolon notification Channel key call underscore Channel channel name call Channel description Channel of calling default color colors Dot red accent it added colors dot White importance notification importance thought Max Channel show Bridge true logged through default ringtone type default ringtone type Dot ringtone you will also listen to background notification so Firebase messaging dot on background message background Handler we will create this function future world background Handler you will receive remote message in the argument title message dot notification dot title body message dot notification dot body make this nullable awesome notifications Dot create notification notification content id123 Channel key this key so copy and paste it here color colors Dot White title title body body category notification category dot call wake up screen true full screen and then true Auto dismissible false background color s dot Orange we will also create two action buttons so action buttons notification action button first button as of accept so key accept label accept call color colors dot green Auto dismissible true and another button of reject so reject reject call change color to red now here in init state we will listen to the notifications for ground notification actually so Firebase messaging dot on message dot lesson remote message message now copy this and paste it here import awesome notifications also copy this and paste it here let's run our app again it has given us error but first we will listen to the action buttons so awesome notifications dot actionstream dot listen if even dot button key pressed is equal to is equal to reject we will print call rejected you can navigate to any page if you want if the call is accepted then we are just printing call accepted else print on notification that's how to load it now here and engage go to messaging create your first campaign Firebase notification message now to send notification to the device we need device token so here in get token we will Trend the token so token await Firebase messaging Dot instance dot get token make this async Disney will print token that's how to load it click on get token it has given us missing plugin exception so first terminate this and run app again also change compile SDK version to 33 so Android app build.gradle make this 21 and Target SDK version 233 also change compile this together into 33. let's terminate this and run it again now it has been built successfully now click on get token so actually this is the token of the device so copy this and notification title calling calling from Firebase send test message paste device token here test and notification is received then when we click on when we click on accept call then call accepted as printing now let's test notification again now if we click on reject call then call rejected is printed let's return our app to remove These Warnings Let's test it again test notification is received reject call called rejected is printed now and send push notification button we will call a function send push notification we will create this function so for that go to flutterfixes.com letter fixes select flutter and search for push notifications click on continue reading copy this and paste it here change function name to send push notification remove these arguments import HTTP package copy and paste it in pubspect.tml file also copy this and paste it here now in message Android URL we will use https fcm Dot Google apis.com fcm slash send now for message key go to Firebase project setting Cloud messaging click on this icon enable it will take some time it has been enabled let's restart this page copy this and paste it here in message key import dot convert now in the body of notification we are sending name let's say Muhammad and entitled incoming call remove this N2 we will use the device token to whom we want to send notification so foreign copy this and paste it here let's run over it let's run it from second emulator to select second emulator click on run it will take some time now we will be able to see notification from one device to another device through device token now our app is installed on both emulators now we will send notification to this simulator first remove this notification click on send push notification from second emulator that is not received let's try to send from first emulator to Second emulator first we will need token of the second emulator so copy it from here and paste it here let's hot reload it on both emulators click on send push notification now the notification has been sent this is notification so when you click on eject call rejected as printing when you click on accept call accepted as printed now we will again use the token of first emulator so here paste the token of first emulator how to loaded on both emulators send push notification now the notification has been sent and it has been received in the first simulator now when you click on eject call yeah it is working accept call accepted now we will also test background notification so send push notification notification has been received we are receiving two notifications so for that go to app info notifications disable this now again remove this notification first send push notification yeah it is working in big round app also opens when someone clicks on the notification

Channel: Code Pie

Views: 16,082

Keywords: flutter firebase messaging, flutter push notifications, flutter fcm, firebase_messaging flutter, firebase push notification in flutter, push notifications in flutter using firebase, firebase push notification flutter android, firebase and push notifications in flutter, how to implement firebase push notification in flutter, flutter video call, flutter video call app github, firebase messaging, firebase push notifications, firebase push notification flutter

Id: VeygRpCWHbA

Length: 28min 25sec (1705 seconds)

Published: Tue Feb 07 2023