#Google's Flutter - Local Notifications in Flutter (coderzheaven.com)

hello and welcome back to another clutter tutorial in this video we will be learning about local notifications so we'll be doing simple notification scheduled notifications repeated notifications notifications with attachments and many more okay so let's start so this is my main door dot file where I have set an empty container as ho now we will see what are the dependencies that we need to do local notifications in product so let's open the pub spec vml file so here we have four main dependencies hard start Cod provider CTP and clutter local notifications so you will see where we are going to use these dependencies ok so once you have added these dependencies make sure to call flutter packages get to integrate these dependencies into your project ok so if you are using vias code it should automatically - when you save the pub spec the ml file ok so let's create a new file I'm going to name it local notification screen dot dot which is going to be a stateful widget so let me name the screen and we need to import the mythical package from clutter ok let's create the state so the paid state should go down the state ok so you're all set now now let's go to the main door dart file and set this file as hope okay so that's our class which is set as home alright let's run the app in all connected devices with flutter on dash D space all ok now we will create a simple UI which is covered and a bar and title will say local notifications and the body with a cinder widget and we will have a button at the center of the screen ok so the child which is going to be a flat button and on press of the button we'll be calling on functions but let's leave it blank for now and channel which is a text widget I'm going to say send notification okay by the time our application is being built let's go and create a new file I'm going to name it notification plug-in dot dot so this is the file where we are going to write our notification related functions okay so our application is up now let's create the class notification plug-in okay so let me refresh the hap and show it in Android and is okay so it's up now so we need to get a handle to the plug-in and we need to initialize it here right so let's create a variable flutter local notifications plug-in okay and I'm going to create a constructor okay and a new function in it and inside in it I'm going to initialize the plug-in so clutter notification plug-in is equal to new plot of local notification plug-in so as you know in iOS you need to have a permission from the user to show the notifications right so let's get the permission from the user so let me import the dot IO and show file and platform so let's use a platform to detect the platform so if the notification is iOS we need to prompt the system to show the notification dialog right the called throttle notification plug-in dot and the Seoul platform specific implementation because it's going to work only in iOS and not in Android bus in the type i OS flutter notifications plug-in so let's get the permission from the user by calling request permissions and you can have different folders in iOS alert I'm setting it to false and badge I'm setting it to false and sound that set it to true or bad also it lets it into true okay and write a new function initialize platform specifics ok I'm going to call it in n it method okay and that's in July's the settings for each platform so first when he is for Android so called Android initialization settings and pass in the icon name for the notification so let's see how we can create a notification icon and Android studio so let me open the Android project okay so that's our Android studio and this is our Android manifest file now let's go to the plugin page and see what are the native settings that are needed for this plug-in to work so just go through it and those are just simple things to include the images and on ok and for should you notifications you need to have this permission will complete it and also don't forget to add this receiver in the Android manifest file ok and optionally you can add the vibration permission as well okay alright so I have already added it and these are the receivers so those were the native side settings for this plugin okay now let's go ahead and create the notification icon so go to our es folder and create a new image asset and select the notification icons and give it a name and other settings I am leaving it as default okay so once you hit finish it will be added to your project okay so let me show the icons that are added to a project okay so those are our icons okay okay now we are set with the icons so that's our icon name okay now we are done with Android and let's switch to iOS settings so let's create a new variable initialization settings iOS and call is initialization settings and we need to set different properties request under permission to true request batch permission so let's set it to true and the third one is request sound permission okay the next property is a callback on drill to see local notification so this notification this function will be triggered only in versions I used ocean is less than 10 okay so that's because in I use versions less than 10 the local notifications will not be triggered if your application is already running in foldout okay so if you want to handle that you can add this callback so let's create a new variable I'm gonna create a variable of type behaviour subject so let's before that let me create a class received notification and that's going to have ID which is a notification ID a title and a body also a string payload okay and let's create a constructive receive notification that is going to accept all these parameters okay so power required ID title body and payload okay now let's create a variable with type behavior subject okay so it's kind of a string but it's little different from a stream so it's going to how it is different is it's going to hold the last value that it is received as part of the stream okay so let's not talk about it right now and you can implement it in your own way you want so let me show you how to get how to implement this with the help of a strain okay the behavior subject okay and I'm going to create the received notification object with all those parameters that are received in the Haunted receive notification and I'm going to add it to that stream okay so if you want to get it we need to listen to that stream right so let's write a new function set listener for lower versions and pass in a function so if your class want to listen to this stream it can simply call this function and cause in its own function and inside this function we are going to listen to the stream okay so that will be there to receive local notification and subject dot listen okay so there we will get the data for the notification when it is added to the stream and we will call our function to send back the data okay now let's go to our platform specific function and I'm going to create a new kneadable initialization settings and call the method to initialize the plug-in width Android settings and I use settings and called flutter local notification plug-in dot initialize with the settings okay and it's gonna take another parameter the second parameter he is called on select notification which will be called when the user selects or tabs a notification okay so that's going to return the payload which we pass in with a notification okay so I am copying that function and I'm going to create a new function set on notification click and I'm going to pass in a function similar to the function above okay so any class can implement this function and get the notification data from the click okay so I'm making that vegetable global that initialization settings and I'm gonna remove this right okay we have already set it inside this function so let's call this function or not education click and we'll pass in we'll pass the data back with that function okay we need to make these functions a synchronous okay so let me do that okay so we are all set with our basic setup now let's go back to our UI that is the local notification screen and I am gonna implement these functions so a new function with the received notification parameter and second one is the on notification click with a payload parameter okay let me go to the notifications plug-in class and I am going to create an object of this class which is going to be a global object okay so that we can call the functions in this class using this object now let's go ahead and create the notifications I'm going to create a new function show notification let's initialize the platform specific settings first so first one for Android Android notification details with a channel ID channel name and channel description so what you need to keep in mind is that once you are you initialize a notification with a channel ID the settings the basic settings is not going to change okay I'll be showing what that means so so these are the settings that we need to set but for demonstrating that and I'm not going to set these parameters the importance and priority so these three are our Android settings okay and I'm gonna set the settings for iOS okay I'm leaving it empty and I'm going to create a notification details object with both Android and iOS settings and pass it to the flutter notification plug-in okay so called flutter notification plug-in dot show pass in the notification ID title body the platform specifics and also the payload okay alright now let's go back to our UI and call this function on press of the button okay sorry I forgot to initialize right so let's override the in-state method and initialize the callbacks so that would be notification plug-in dot set listener for lower versions and pass in our method and similarly notification plug-in dot set on notification player and pass in our method okay so let's call our notification method show notification okay so it's asking for permission right you can read through it and so that's describing all these values the alerts badges and sound so you can see we have the notification now so let's print out the payload okay let's try that again alright so we have the payload now now let's see what is happening in Android so you can see the notification is there but it's not coming on top right so that's because we have inset the importance and the priority right so let's try setting the importance and priority so it's in here okay importance importance dot hi sorry Matt's and priority still it's not working so let's set the priority to high okay so you can see still it's not working because I already told like this channel settings it's already being set right so you cannot change it once you set it so you can change the channel ID or you can reinstall the app so I'm reinstalling the app and let's see what happens so now the app is installed in a droid so when you click you can see the notification on top right okay so that's the idea so guys I have already shown how the Android net is set up for this plug-in will look like right so let's go to the plug-in documentation and see how the iOS setup will look like okay so let's go to the i/o section and you need to copy this code if you are using if you have lotta project is in Objective C so otherwise you need to copy the version okay so let me go to the iOS project okay open iOS and open the workspace project okay so I have already added it right okay so let's try out some other configurations so let me set the sound to true and the play sound - true and time out - five seconds timeout after so the notification will dismiss after five seconds so let's try that okay wait for five seconds okay you got dismissed all right okay now let's try setting the style information so style information to default style information that will accept two parameters the html4 format for content and HTML format for title okay and let's try changing the title to HTML let me set it to bold okay and let's restart the app and let's go to the Android emulator so you can see title is in bold now so when you try it on iOS it's not working because iOS doesn't support that so that's what we have said it for the handout channel specifics okay so let me remove that and I'm going to copy this function and paste it again and I'm gonna change it to schedule notification and we are going to show the notification at a future time so let me say day time dot now dot add let's add a duration of AI seconds so it's going to be fired five seconds from when it is to good okay I'm going to change the channel ID name and description okay and you can set the secondary icon as well make sure to include the image in the Android resources and the next thing is you can set the sound so you have to copy this my sound in your Android raw folder to create a folder a directory named draw and you have to copy my underscore sound in that folder and optionally can set the large icon and so you need to provide this icon also in the Android resources and optionally you can set so many other parameters the color and also LED color LED on milliseconds and led off milliseconds ok so you can try all those and let's set the highest channel specifics and setting the sound to my sound dot AIFF so that's that's a format from Apple you can you can provide your own sound make sure to call schedule in the flutter notification plug-in and give it the scheduled time ok alright now let's call this function from our UI so notification plug-in dot scheduled notification ok restart the app so after 5 seconds we should see a notification ok so there we have the notification and on clicking the notification we will get the test payload ok let's see yeah ok so that's working good now let's try a notification with attachment so I'm gonna so let's write a new function filter white show notification with attachment okay and we need to get the attachment from the internet so let's write a new method to download the let's say an image from the internet so download and save file and I'm going to pass in the URL and a file name okay so what directory is equal to now wait get application documents directory so we are going to download and save it in the applications document directory okay and let's define the file path so directly dot path slash file name okay and response is equal to await HTTP dot yet so let me import the HTTP package as HTTP okay so let me create a new file with that file path so wha file is equal to file with a file path and wait filed out right brightest whites and get the response dot body bytes okay now 225 path okay now let's get a URL from the internet so let me go to the Chrome browser and go to place photo calm and open the image in a new tab and let me try eight hundred by 120 or two hundred it's there okay it based it there and give the file name so let me give it as attachment it may start debug okay so it should download the image and root on the file path so let's set the iOS platform specifics so is equal to iOS notification details and pass in the attachments so that's an array so let's set the is notification attachment with the attachment picture path so it says to picture path okay okay yeah that's good enough okay now let us set the platform specifics for Android so attachment style information that is big picture style information and we need to give the file path Android bitmap and pass in our file path and content title let's set into attachment a test image in bold an HTML format content title to true so that makes the HTML content to show properly similarly for summary text as well now let's create a new variable and on channel specifics so that will be under notification details so similar to what we did earlier in the other function give the channel ID name description and also we need to set the importance and priority so importance to importance dot i and priority priority dot I and this style information is the big picture style information okay now we need to set these two channel specifics to the notification plug-in so bear in your variable notification details and pass in the handout channel specifics and iOS platform specifics now let's call the plot or notification plug-in to show the notification so plot our notifications plug-in dot show with not finished ID we'll set it to zero and title title with attachment body with attachments and the notification details okay now let's try this method I'm going to restart the app and let's see if that works click on send notification okay so you can see that right now now let's try in Android emulator okay so there is our attachment okay so it's working in both the platforms not good now let's try to do a repeat notification so let's go to the notification plug-in to add art and I'm copying the show notification method and renaming it to repeat notification so here we need to give a repeat interval right that's what repeat notification means so in the clutter plugin dot show method we need to give the repeat interval I'm going to give it every minute so the method should be it should not be show it should be let me try periodically show okay and give it the interval as every minute so it's going to fire every minute sorry I forgot to call this method okay restart the app click on send notification now we need to wait for one minute so I'm just fast-forwarding the video okay now it should appear okay so 856 we started at 8:55 okay let me change the title and body let's try that sir 856 now 857 ok so there it is so one thing I forgot to tell you is we can set the body of the notification to null okay so let's try that and see how it appears okay so you can see that all right now let's say we want to show the user a notification daily at a time so let's see how we can do that I'm copying the show notification method and changing it to show at daily daily at time okay and we need to define the time at what time you want to show it I'm just changing the channel ID name and description let's define a time variable and pass in the time to the show method that should be show daily at time and pass in the time so let's add time to let me check my system time it's 859 so let's set it to 9:00 o'clock that is 2100 oh I think I'm calling the wrong method yeah so let me call the show daily at time a third that is set to nine o'clock right so let me change it to nine one cuz it's already nine o'clock so click on send notification and when it is nine one it should trigger okay I'm clicking it again by changing the title okay so it appeared it's nine one okay but the time variable is wrong right so let me display the time so time dot power and time dot minute and time dot seconds okay so let's try that again changing it to nine two send notification it's already past those nine three so let's wait for it so by the time let's write another method show weekly at daytime so if you want to show a notification on a particular day in a week at a particular time we can do it like this so let's set it to ten o'clock and the method is show weekly at day hand time and we need to pass in the day so let me set it to Monday and pass in the time okay so let me try that here so it's nine five and my day is Saturday okay let's see if that works and commenting it and calling the new method okay so let's try that so it should be at nine five so it's nine for Saturday so okay so that is triggered okay so that's also working so the next thing is let's say you want to get the number of notifications that are pending to be triggered at some later time okay so let's get the count so for that let's call plot or notification plugin dot pending notifications requests so that's going to return a list of pending notification requests and we just need to get the length of it okay let's try that and see if there are any pending notifications in a raptor okay so let me declare a variable count and count is equal to a wait not occasions plugin dot gate pending notification count okay and we will show it in the button itself okay so it's zero or we will just print it out let's remove that okay so in the console you can see that it's one now that's because we have a notification to be triggered in the coming Saturday at nine five pm right that's why it's showing one so let's see how we can cancel those notifications those future set your notifications or how we can cancel a particular notification ID if we know it's ID so if you remember we have been setting a notification ID for every notification right so it should be unique so that we should be able to cancel that notification okay so assuming we have the notification ID so how we can cancel it so it's simple plot a notification plug-in dot cancel and pass in the notification ID if we go to some of the older methods that we wrote so you can see we set the notification ID has zero but it should be unique okay so that you can cancel it now let's try that called notification plug-in dot cancel notification okay now let's try to print out the pending notification count okay restart the app and click on the button okay earlier it was one so when we canceled it it became zero okay so that's canceling all right and under use cases if you want to cancel all the notifications okay so it's simple just change the cancel method to cancel all so that will cancel all the planning notifications okay so those were some of the methods and some of the functionalities of this plug-in but you can explore more in the documentation so let's say we want to show the notification data in a new screen okay so let me create a new file I'm gonna name it notification screen so when the notification appears and when the user taps on it we will be sending the data to the screen and displaying it there okay so let's create the screen create the state return the state okay and we will create a simple UI with a text field sorry a text and the screen he is going to accept string payload in the constructor okay so I'm going to create his coupled with an aqua title let me say notification screen and the body with a sender widget with just a text that's going to display whatever the payload that's coming in through the constructor okay so let's call navigator dot push with a context and the second parameter is the material based route okay it's going to take the Builder the Builder will have the context and we need to return the screen so return notification screen and we need to pass in the payload so payload and pass into payload okay so let's try that I'm calling the show notification method and if I click on send notification nothing is going to appear because we are cancelling it right away all right so let's comment that and let's try that again click on notification click on that so we are sinning the test payload so let me try with a new payload okay let's trigger that again so we're sending the new payload so that's also working all right so I'll be probably the link to the source code in the description so make sure you switch to the local notifications price when you download the source code from bit pocket okay so that's all for this video if you found the video useful please support by giving a like share the video and please subscribe to my channel thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 27,553

Keywords: Timer notification Flutter, Flutter notification channel, flutter tutorials, google flutter, flutter dart, local notifications in flutter, notification tutorial, flutter examples, flutter background services, flutter coderzheaven, mobile programming, mobile programmer, android tutorials, ios tutorials, flutter web notifications, dart local notifications

Id: PJ_AH61dTIc

Length: 36min 56sec (2216 seconds)

Published: Sat Jul 04 2020