Flutter Local Notifications, Instant and Scheduled Offline Notifications in Flutter

hey youtube this is prince from dc programmer welcome back to another exciting video i know i haven't been regular since quite some time but i plan to be very regretting this month and i suppose by the end of this month we will end up creating a complete social media application using flutter but right now let's talk about something that's a flutter local notification plugin something that can be used to so push notification your application even if it is offline and without using any cloud messaging services so let's dive deep right into it [Music] well as you can see i have already added this plugin in my powerspec.yaml file and i have fetched it and also add these users permissions as well as receiver details in your app manifest.xml file that's located under android app src main folder and my main dot dot you can see that i have imported this now to setup here i have this very basic application up and running with basic title theme color in something very fancy now to set up how to first create a variable of flutter local notification plugin i will name it as fltr and notification now you have to initialize the plugin with certain options so in my void init state i'll first call super dot init state and then i have to initialize the plugin so i have to first call the android initialization setting so let's say some variable android now i have to first call android initialization settings so i will set some variable initialize android with a new android initialization setting and here we have to pass an app icon so make sure that you save that app icon in your android then app then source then main here you will see this folder named as rest and here in the drawable add that app icon as a png this icon will be visible when you saw a notification then we will use initialize ios that will simply initialize the ios initialization setting and then we have to create a general initialization setting which will have initialize android and initialize ios and then we have to initialize the floater notification plugin so first the flutter notification plugin will be equal to new flutter notification plugin so our flood and notification is that and now we have to initialize the product notification that will be flutter notification dot initialize with the initialization setting and here we need an on select notification variable and what this does is that it tells which function or what to do when a notification is tapped that's on selected now since i don't have this function available right now i'll simply call it as a future since it should return something as future and i'll leave the entire function blank as of now and we can put it here because that accepts context as a parameter by default so i have to cut this and i have to put it in the complete wizard build so and also it accepts a parameter that's a payload and piloted some data that you pass along with the notification so i will just simply expect a payload parameter that's going to be on a string and now this wouldn't push any kind of errors now do that in my child i'll just cut the text and i will create um raised button and also an instant notification as soon as the raise button is clicked so let's just set the on press to null and here i have a child and the child is going to be the text that i just copied now let's just save it now i'll code a function let's say the name is going to be so notification and what that function is going to do is that it's going to show notification once this button is pressed so i have to just copy this and here in the place of ontrest i'll just paste it let me tell you something about this this plugin actually gives us better options to display our notification based on custom sound and a lot of other things but right now i'm going to go with the basic settings that how to work with the default system sound the default way a plug-in our notification is displayed so since we have to do that i don't have to make much changes and i don't have to make this complex so i have this function that's going to be called when somebody clicks on this button and this function will make sure that we get an instant notification now this is going to be an e-synchronous operation and it's going to return some dynamic value in the future we don't have to worry about that now here we have certain notification details from different platforms so let's say that we have the android details and this is going to be new android come on and android notification detail and in the under notification detail you first something that you need is a channel id you can just put your channel id then let's say you have to put your channel name and then you have to put a channel description [Music] and you are good to go the next thing that you have is the ios platform is specif the specific details so we have the ios details and that's going to be new ios details now here the android details gives us two extra options the first one is the importance so you can set what are the importance of this notification so it can be importance dot we have default high low max minimum none and and unspecified i'm sorry so and after that we also have the priority and now we need the general notification details i will say general notification details and come on i'll fix these issues later now typos so this is going to be new notification details and it will first have android details so we have android and then we have is so come on that's ios details okay so we have an issue it says that okay we don't have to set android notification channel we have to set android notification details and yeah now i think there isn't any issue now wait this was just the basic setup to actually so when um now wait this was just the basic setup to actually show notification we have to say await then we have to call our variable that's dealing with the product notification click plugin that's for notification and then we have to call the soap now so we'll ask for an id i'll simply set to zero then we have a title let's say task and then we have a body let's say you created a task and then we have the notification details that's going to come from general notification details that's what we said right now and now having done this we i think our complete thing is completed well i think our set is complete so let's just run the application and let's see what do we get out of it well as you can see our complete application is up and running i don't think there was an issue and let's test that when i click on this button you can see we get this simple notification that's test project task and i created a task this is how we can show a simple notification that is right now at an instant right next thing is handling this so we have already coded this function but we haven't done anything to handle this here let me simply show a dialog in the so dialog we have the context that will obviously be the context and the next thing that we need is a builder so the builder will take our context and this will return something for us let's say an alert dialog i'll just simply show some data it just says that okay we have something right here now alert dialog will have its own data i think we have the content i'll just simply put some text and i will say notification now let's save that and let's click on the floater notification let's click on this notification and as you can see here we get we get this um alert that says that the notification has been clicked so this is how we can deal with the data also if you want you can pass some extra p load in a real world the payload will be something like you know like if you have to show some post it will be it will contain the information of the post right now i'll simply say uh that this contains some task and now i'll save this here as soon as i saw this notification i can also show the payload so let's say pfi lod let's save this now let's click on floor notification i get this task when i click on this it says notification clicked and tasked the value that we have passed as a payload pretty amazing right let's talk about scheduling a notification using the same plugin so now instead of showing the notification i'm going to schedule it to schedule it we need a scheduled time okay and we have to first create that schedule time i will simply set that as a variable i will name this as said dual time scheduled time and now this time a very better way and actually the best will do that is to first get the time right now that's going to come from date time and date time dot now and this will give me the time right now and here i'm going to add some data i'm going to add some duration to that and that duration right i'm going to keep that in seconds so and let's say that this is uh five seconds right so now this is our scheduled time so whenever the notification will be clicked we will get the time from that we will get the time at that instant we will add five second to that and after five second i'm saying so actually not out of five second at right at that instant i'm saying that hey flutter notification just schedule a notification for me now schedule will again ask for the same data that we have working on let's say the title is um task the body is scheduled notification the next thing that we have the scheduled date so i will say uh scheduled time and yep the last thing is a notification detail that's going to be gender notification details i think everything is quick and running i'll just set the id to any random value right now and now once we have saved this right let's click on this button again for notification and okay we get a new task how to restart the application cool we get an issue it says can't find two matches really okay let's save this again now when i click on this button we don't get any notification right now okay but three two one and here is a notification now this notification has appeared after five second the same duration that we have added in our application pretty cool right also this notification too when i click on that notification this tool will show me the same uh so dialog button so if i click on this it shows me the same dialog button since i'm not passing any payload i can't see that payload right now now here i'm going to make some changes to our ui and i'm going to make sure that the ui will have our text input box and then we have to drop down one to a select time sec time which will basically been second winners and hour and the next the value of the time and then a button that will say that hey schedule this task with the notification so let me quickly just build that ui that i want to do so as you can see i have made all these changes let me just quickly walk you through about what we happening right here so now is in our body in our center we have a column instead of simply having a raised button in my column we have this text field and there is nothing fangs fancy around it it's just that when the value of the text field is changed we're assigning that value to this variable name task then we have this another row here we have two drop down button the first drop down button will help us with selecting seconds minute and hour we have the value as in string and the second drop down will help us in selecting the value that's how many seconds or how many minutes or how many hour i don't have too many values because this is not the best way to populate them anyway later then we have on change for both of the drop down that will set the value then again we have this raised button that says set task with notification pretty cool right so what i'm going to do is that i'm going to add some tasks and that task will be added as a notification so it's going to work with schedule time and here we have three different times of schedule times we have hour we have minute and we have second so we have to work with that too now here just pay some close attention we have the value at second minutes and hours so all we have to do is we have to iterate and check out if the current value is second minute or hour we can do that simply by saying something like if the underscore selected parameter right now is equal to hour that means the user has selected our i think this is correct right so if this is our that means user has selected our you have to simply copy this and else if the same value is minute that means the user has selected minute and else in the third case i'm not going to do any extra check that means the user has selected second although it won't be a good thing to do in that way anyway let's say we are going to be that going to go with that so when the user selects our all that we have to do is we have to fetch the value and set that as an hour so to do that i will first cut this and now this is simply going to be a variable an uninitialized variable and here you see we have this complete detail simply going to copy this and i'm going to paste this right here so this date time is going to be first it's going to come from the scheduled time and the schedule time is equal to date time dot now add duration now this is not going to be seconds this will be simply hour and this 5 is not going to be 5 this will be value this is the variable that will contain the data that's been selected from this drop down and then this simply colon the same thing we have to do everywhere so i will just simply copy paste and copy and paste now this is going to be minutes and this is going to be seconds so we are good to go right we have an if and else if and then an another if statement that will handle that scheduled time for us and then we have the complete data that the task schedule notification i want so the body has said notification let's say i just want to display the task that we have selected and yep i will simply just save this and this will be let's say times up now let me add some task i will say edit this video and i want to complete it in four seconds i know that's not possible but let's see i'll click on this now let's wait for four seconds two one and done we get this notification that says time's up edit this video will click on that nothing happens obviously we're not doing anything fancy right here if you want you can move to next screen i will post that source code in the description about how to move to next screen but that's simply pretty actually pretty simple you have to just use navigate and push and you can open a new screen with that data anyway this was all about using the flooded local notification plugin too so an instant as well as scheduled notification from our android phone now obviously there are different instances you might be using some cloud messaging we will talk about flutter cloud uh sorry firebase cloud messaging 2 in the next video most probably after the indie video but till then keep coding keep learning keep saying and peace

Channel: Desi Programmer

Views: 42,193

Keywords: desi programmer, desiprogrammer, desi programmer flutter, desi programmer github, desi programmer gitlab, desiprogrammer facebook, flutter notifications tutorial, flutter notifications permission, flutter notifications sound, flutter notification local, flutter notification api, flutter notification action, flutter android notifications, flutter firebase notifications android, flutter push notifications android, flutter notifications badge

Id: U38FJ40cEAE

Length: 15min 45sec (945 seconds)

Published: Tue Aug 04 2020