Flutter Awesome Notifications - Create Local Notifications With Ease

notifications are an essential component of many apps local notifications in particular have many use cases though most commonly they're used to create scheduled reminders there is an endless variety of apps you can make with this as a core or an additional feature notifications are platform specific and require us to tap into native code to create them fortunately we don't have to become native developers to implement them into flutter apps thanks to the powerful awesome notifications plugin we can create notifications for ios and android with minimal effort [Music] hello everyone my name is ashley and welcome to risocoder our goal here is to provide top level education and teach you the skills needed to become an in-demand flutter developer don't forget to subscribe and hit the bell icon so you don't miss a single video let's get started in this tutorial we're going to build a mock plant care app the app will be able to display two types of notifications with various levels of customization notifications look and function somewhat differently on ios and android and we'll cover all the differences for both platforms in this tutorial let's take a look at how our app functions on an iphone simulator first when we run the app we're greeted with an alert dialog asking the user for their permission to let our app send notifications to the device when we tap allow we get a native dialog from ios asking for the same thing when we tap allow now notifications will be enabled we can create an instant notification by tapping the plan food button when we open the notification we can see it has a large image of a map a title with some emojis and some body text we can open or clear this notification if we exit the app and take a look at the launcher icon we can see a badge telling us that we have one unread notification if we open the notification first we're taken to the second page in our app that shows some mock plan statistics now that we open this notification we can go back to the launcher icon and see that the badge has disappeared now let's go back to the app we can also create a scheduled notification that repeats every week at a specified time when we tap on the water button we're going to see a picker that shows up for us to select a day of the week because i want the notification to show up now i'm going to select the current day of the week then we get a time picker and the time picker is set to display the current time plus one minute this is mainly for testing so we see the notification on the next minute this scheduled notification also has a custom sound and there you go it shows up at the schedule time when we open this notification we can see it has a title some body text and also an action button when we tap on it we're taken to the second page in our app as well now that we created a scheduled notification it is set to repeat every week to cancel all created schedules we can tap on the cancel button when we run the app on an android device we won't see the dialogue that we saw on ios and that is because on android notifications are allowed by default let's go to the app notification settings here we can see that the notifications are enabled and we have two notification channels let's disable them and let's close our app and run it again now when we run the app we are going to see the dialog and when we tap allow we're going to be taken to the notification settings where we can enable them and then go back to our app here we can create all the same notifications as we can on ios let's create the plant food one and here we have all the same stuff a title some body text and the large image of a map and we also have a custom notification icon if we go and take a look at the app launcher icon we're going to see this android specific badge and if we long press on the icon we're going to see more details about the notification if we dismiss this notification or even if we open it the badge will disappear same as before we can create a scheduled notification and this notification will also have a custom sound and there is this notification has a title a body and this is the action button on android here and there is one difference though from ios and that is that we cannot dismiss this notification so if we swipe at it it won't actually disappear to make it go away we have to either tap on the notification to open it or hit this action button so let's do that and we're taken to the plan stats page and the notification is now gone and same as before we can cancel our schedules by tapping this cancel button and be sure to check out the written tutorial from the link in the description where you can find all the code written in this video and go through this lesson at your own pace we're going to be working with a starter project so before we start coding let's get familiar with it our starter app is going to have this home page over here with an image these buttons which we're going to set up functionality for in the tutorial an app bar with the title and this button over here when we tap this button it takes us to the second page of our app which shows some mock plan statistics it has a title the image same as in the home page and these mock plan statistics here and we can go back to the home page so let's see how this all looks in our code now in the main.dart file we've got an app widget which returns a material app with some theme styling a title and it's got the home page in the home parameter the home page has a scaffold an app bar with the title widget which displays this title over here it's got an action button which is this one over here and the body has a centered column with this image a size box for spacing and a widget that displays all of these buttons over here these on press parameters we're going to implement during the tutorial now our plan stats page which is this one over here we're not actually going to be working with this file at all it's just meant to display all of the ui that's here then we've got this widgets.dart file which has all of these widgets that we use here like the page the plan stats the title and the app bar these buttons and you can go through this to see how these widgets are created but again we're not going to be working with this file either then lastly we've got this utilities.dart file and here we've got some helpful functions that we're going to be using to create our notifications the create unique id creates a unique id the pick schedule function will actually bring up that weekday picker and also the time picker and it's going to return a notification week and time object this object is going to be created using our custom class which is going to hold the day of the week represented by an integer and also the time of day object which we're going to get from the time picker so our starter project has several dependencies and also assets some of which are already used in the starter project and others we will be using later on in the tutorial so let's take a look at them now so in our popspec.yaml we've got the font awesome flutter dependency which we're using to have some specific icons in our app and they're already implemented so you don't have to worry about that and we've also got this flutter launcher icon dependency and the customizations for it here and this essentially creates our app icons so you can see there's this app icon right here and this one right here so this package takes care of that for us then when we go to our assets folder we've got some images here for example this image right here we're going to use it when we're creating our notifications and the other images here are used for things like app icons or the ui then on android we're going to have a custom notification icon and that icon is located in android app source main res and the drawable folder and it is right here and we also have a custom sound file which is also located in the res folder and inside this raw folder let's open this up a little so this res custom notification dot m4a is our custom notification sound that's going to be played on android devices and if you notice these assets here and the icon right here they're prefixed with res underscore and then the name of the file and this will actually protect your files from being minified on android so make sure to add this prefix if you're adding these native dependencies or native assets i should say okay now let's see what we've got in our ios folder go to ios runner and here we've got the same notification sound but in an aiff format and it's going to be here in this runner folder and then we've also got this assets.xca assets and that's going to be where all of the icons are stored if you get an error when you run your starter project on an ios simulator and if the error says that this file right here the custom notification sound file does not exist there is one thing you can do to quickly resolve this so to do that go to the project folder the ios folder and open this runner.xcode proj file out in xcode now when you open this up in xcode if this is the right error this sound file name should be displayed in red so if that's the case go back to the project folder go inside runner and copy the sound file out somewhere else to your desktop for example then go back to xcode delete the file that's displayed in red and then take the file you copied to your desktop or wherever and just drag it back into xcode into the runner folder and that should resolve your issue all right so let's finally start coding first we want to add the awesome notifications plugin as a dependency so let's go to our pubspec.yaml file and we can add it right below the font awesome dependency we have here it's going to be awesome notifications and we're going to be using version 0.0.6 plus 10 and save that now be mindful this plugin is in active development and they're even aiming to eventually have support for desktop and the web so just keep that in mind because there may be potential breaking changes with future updates now let's move on to our main.dart file and before we can create any notifications we need to initialize the plugin we're going to do that in our main function so let's convert this to a block body and we can initialize it right above the run app so let's say awesome notifications dot initialize and let's import the plugin now the initialize method wants us to pass in two positional parameters one is the path to the default icon which will be displayed in the android notifications and the other one is a list of notification channels let's take care of the icon first our icon is located in the native resources so we're going to provide the pathway in the following way we're going to type resource colon slash drawable slash res underscore notification underscore app underscore icon for android only very simple png formats are supported for the notification icons so you do have to create them in a special way for this project we actually used an android icon generator and to see the one we used you can check out the written tutorial which you can find the link for in the description so let's talk a little bit about notification channels you can create multiple notification channels for your app and then assign them to different notifications then those notifications will be displayed through the channel you assign it to officially notification channel separation became a thing with the release of android oreo as a way to declutter the notification drawer if you remember when we looked at our finished app you could actually go to the android notification settings for the specific app and see the separation of the channels and you can see them in this image here as well so you've got the scheduled notifications channel the basic notifications channel and then you can enable or disable the notifications for the specific channel as well when you tap on it you can change some of the settings for those notifications now on ios there is actually no channel separation so if you look over at this image right here you can see there's no channel mention at all and that's why you won't have these options when you create a notification channel you can configure it with um settings for the channel itself as well as the notifications that will be displayed through it so for example you can have custom sounds for the notifications and you can also have the channel name for the channel itself so with ios even though you don't have the channel separation the customizations you set on that channel will still take effect when a notification is displayed on an ios device through that channel to give you a bit of an example let's say you created a channel for reminder notifications and on that channel you want to be you wanted to have a custom sound when a notification is displayed through that channel on an ios device the sound will still play even though you don't have that separation in the settings and if this doesn't quite make sense right now don't worry about it when we create notifications it should make a lot more sense so let's go ahead and create our first notification channel first we're going to add a list to the second positional parameter of the initialize method and here we're going to add a notification channel object object has a lot of parameters you can specify values for and we won't get to all of them but we'll get to quite a few of the common ones so keep in mind also that not every single configuration will work on every platform or device for example you see you've got this led color so which you can specify to display a specific color on a device led when a notification is displayed through this channel but not every device has an led to do this so just keep things like this in mind for our channel we're going to specify a channel key of basic underscore channel and we're going to be using this key to assign this channel to different notifications then we're going to specify a channel name which is going to be basic notifications and this is the name that will be displayed in the android notification settings we're also going to specify a default color of colors.teal and this will be responsible to assigning this color to the android notification icon we set here now when our notifications are displayed we want them to actually show up on screen and on ios that is a default behavior but on android it's not so for our notifications to show up on screen when we're on android we need to specify the importance of our notifications so let's say importance and notification importance dot hi and that will ensure that this happens so you can set different levels of importance depending on how you want your notification to be displayed on android and you can check out the plug-in documentation to see how each one behaves for this channel we also want to make sure when we have notifications a badge is displayed on the on the app icon so to do that we're going to set channel show badge to true awesome now we've got our first notification channel all set up but before we create any notifications we're going to set up the functionality that can ask our user for permission to send them notifications to implement the notification permission functionality let's move on over to the file we're going to add this logic inside the unit state of the homepage state right above the build method so let's do that init state delete this generated text and here we're going to say awesome notifications dot is notification allowed and let's import the plugin so what this method is going to do it's going to go check if the notifications for our app are allowed on a particular device and then return a future pool with the results so we want to be able to do something with this result so we're going to use dot done and we're going to rename this value to is allowed now here we're going to check to see if this result is false so if is allowed is false then we want to show dialog and here you just leave the context as is and for the builder function we're going to have the context and we're going to return an alert dialog let's add the semicolon and do the formatting so our alert dialog will have a title which will be a text widget that says allow notifications it will also have some content text so we're going to say content and add another text widget that will say our app would like to send you notifications our dialog is going to have some buttons as well one is going to say don't allow and one is going to say allow the don't allow button will just close the dialog and the allow button will actually go ahead and ask for permission so let's add some actions and this is where our buttons are going to go so we're going to have a text button we will set up the on press parameter in a bit and the child will be a simple text widget with text of don't allow this text will have some custom styling it's going to have a color of colors.green and a font size of 18. now we can set up our on press functionality so when we tap this button we just want to close the dialog that's it so we're gonna say navigator dot pop context and that's it okay so now let's implement the button that actually gets the permission we need so it's going to be another text button and we'll implement the unpressed in a second here it's going to be another text widget this time it will say allow and we're going to add a little bit of styling here the color this time is going to be of colors dot teal font size of 18 and font weight of bold awesome so now let's take care of this on press parameter so here we are going to say awesome notifications dot request permission to send notifications and this method is going to request the user's permission and return a future bool with whatever the result is we don't really care about the val the resulting value but we do want to close the dialog when we get that permission so we're going to say dot done and we don't need this value so we can just add an underscore and now all we need to do is just say navigator dot pop that's it save that and go back take a look at everything so now when we tap the allow button we're going to request the permission to send notifications and when we get that permission we're going to close the dialog we just created awesome so let's run the app and see how everything looks when we run the app on an ios simulator we should see our dialog pop right up and if we hit don't allow it's just going to close the dialog if we tap allow it's going to bring up the native dialog so we can tap allow and now notifications are allowed awesome and let's see how this is working on our android device let me close this one okay so here we don't see a dialog because like we discussed the notifications are enabled by default on android but let's go check out our notification settings when we go to the notification settings of our app we can not only see that the notifications are enabled but we can also see that the basic channel we created is already here so awesome it's great to know everything we've done so far is working and if you want you can test out the dialogue here by disabling this and then restarting the app we're not going to do that right now you can go ahead and do that though okay awesome so we've done this part now it's finally time to create our first notification the first notification we're going to create will be assigned to the basic channel and that's the one we created earlier in this main.dart file so the first thing we're going to do is we're going to create a new file called notifications dot dart and here we're going to create some functions that will be responsible for creating our notifications and this is mainly to declutter this homepage.dart file so the first function is going to return future void and we're going to call it create plan food notification it's going to be an async function and here we're going to await awesome notifications dot create notification and let's import the plugin this create notification method has a content parameter to which we need to provide a notification content object this notification content object is going to hold all kinds of information regarding the notification we want to create first thing we're going to add here is an id and this will be basically the id for the notification we create so if you want to display multiple notifications of the same type you want to make sure that this id is unique if instead you set it to a hard-coded number let's say four and you tap this button no matter how many times you tap it only one notification will be displayed but instead if the size used unique every time you tap this button a new notification will pop up so to make sure that this is going to be a unique id we're going to use a function inside our utilities.dart file called create unique id so let's call it from here now create unique id and make sure you import the utilities.dart file here next we need to provide a channel key and this channel key needs to correspond to the channel key we've specified for our channel so for this notification it's going to be basic underscore channel then we also want our notification to have a title and we want this title to have some emojis awesome notifications plugin has a handy class called emojis that you can use to add some emojis to your text very easily so let's use string interpolation to do just that so we're going to say emojis dot money underscore money underscore bag and we're going to add one more emoji here so emojis dot plant underscore cactus and then add some text following these emojis by plant food triple exclamation mark amazing we also want this notification to have some body text and our body text is going to say florist at 123 main street has two in stock now we also want this notification to display a large picture with it and to do that we can specify an image path to the big picture parameter you can provide images from a various number of sources here but depending on which source you're using you need to make sure you specify the path correctly so we are going to be using an image from our assets folder so we're going to say asset colon slash assets slash notification underscore map dot png and you can check out the documentation for this plugin to see how you can specify paths for different sources now we want to make sure that this image is displayed correctly in order to do that we need to provide a specific notification layout using notification layout parameter and here we can specify notification layout dot big picture and as you can see you've got options from several layouts and again you can check out the documentation for different layouts as well so we're going to use big picture okay now we've got everything we need set up to display this notification and just one more thing i should note if you are using these emojis as per the documentation not all of them work so you have to make sure you test them before you make anything production grade so now we can actually go ahead and add this function into our homepage.dart file we gotta go down to where we have our buttons here the home page buttons widget and we can provide it to the on press one parameter since we want to assign it to the very first button so let's do just that let's delete this empty function and add here create plant food notification and we don't need the parentheses awesome so let's give this a save and let's reload our app first let's take a look and see how this looks on an ios device so let's go here and tap this button and there you go if you've done everything correctly up until this point you should see this notification pop right up and it's got the big picture the title with our emojis and the body text amazing we can leave that here for now so now let's take a look and see how this looks on android so let's go ahead and tap this button and there you go our notification shows up here as well and we've got the big picture title body text and also the custom icon we specified in our main dart file this one right here shows up as well and in the color we specified as you can see now let's go and take a look at the app icon and as you can see here we've actually got this little badge here and when we tap here we can or when we long press here we can see the details of this notification as well so awesome the badge specification is working as well and let's check it out on ios also so let's bring up the ios emulator we can minimize this one and let's go see the app icon and as you can see we've displayed one notification and so we have our badge here that says we've got one notification because of the way these badges work in ios they're set globally if we open or clear this notification now the badge will actually stay at one so we need to implement manual functionality in order to be able to decrement this badge number and that is part of what we're going to do next but before we move on there's just one more thing i wanted to mention let's go back to our notifications the dart file and here if we take a look at the notification content object it looks like the id and the channel key are optional but they're really not because if you don't specify an id and a channel key the notification won't actually be created furthermore if you don't specify at least a title or a body the notification will be created but it won't actually be displayed so make sure you keep that in mind when creating your notifications next we're going to take a look at notification streams when using the awesome notifications plugin you can listen to several notifications streams in this project we're only going to be listening to just a couple of the streams but we're gonna get familiarized with all of them so first let's go back to our homepage.dart file and scroll up to our init state right below the alert dialog setup now in order to listen to a stream all you have to do is say awesome notifications dot and then i'm going to type in stream just so we can see all of the suggestions here so you've got four streams you could listen to you've got the action stream so if you've got your notification and if you open it or if you have an action button here and you tap on that that will be considered an action and some information will come through the action stream the created stream fires off anytime you press this button for example and a notification is created the dismiss stream will get some data anytime you dismiss a notification and the displayed stream will get some data anytime a notification is displayed it is important to note that these streams will fire at different times depending on the state of your app as well as the platform your app is running on to get more information on this you can take a look at the plugin documentation and you can also take a look at the written tutorial where you'll have a direct link to that spot in the documentation that talks about this okay so let's listen to our first stream the first stream we're going to listen to is going to be the created stream so let's say created stream and here we're going to want to listen to it this event that we receive for the created stream is of type receive notification and it's going to basically hold all kinds of information regarding the notification that's created let's add a semicolon here and now here we can specify what we want to happen anytime we receive some information here let's change the name of this event to notification and now what we want to happen anytime we create a notification we want to see a snack bar that tells us which channel the notification was created on so let's do just that we're gonna say scaffold messenger dot of context and we're gonna say show snack bar and inside there we're going to create the snack bar so snack bar and our snack bar is going to have some content which is going to be just a simple text widget okay and the text is going to say notification created on and now we want to be able to get the notification channel dynamically so we can access that through this notification receive notification object here so let's use string interpolation to do just that and say notification dot and we're going to get the channel key now let's save this and make sure you hot reload your app now we can go ahead and tap on this button again and you should see the snap bar here with the basic channel displayed awesome this is also going to come in handy when we're creating scheduled notifications using this button because there's going to be a little bit of wait time between when we tap this button and the notifications displayed so when we see the snack bar we don't have to worry and we'll know that the notification was actually created all right next we're going to listen to the action stream we're going to use the action stream to be routed to the second page in our app whenever an action is taken on a notification we will also set up the decrementing functionality for the ios badges but first let's take care of the routing so we're going to listen to the action stream below the created stream so awesome notifications this time we're going to say action stream dot listen now one thing i'm going to point out is here the data that comes through the action stream is not the same as the data coming through the created stream here we get a received action object versus in the created stream we get a receive notification object the received action object holds all the same information that the received notification object does but it also holds some additional information about the action taken for example you can find out when the action on the notification was taken okay let's now go ahead and continue so in order to be routed to the other page in our app we're going to say navigator dot push and remove until and we're going to leave context here it's going to be a material page route oh one second material page route and we're going to have a builder but first let me format this so it's a little bit nicer okay we're going to say builder and we're going to get our plan stats page here okey-doke and here we're going to say round dot is first now we're doing it this way because if we open multiple notifications we will keep pushing the plan stats page route into the stack and we'll need to go back multiple times to get to the home page with this navigation setup when we open a notification it will only have the plan stats page and the home page in the stack now let's do something about those ios badges on android when there are no more active notifications so when all notifications have been opened or dismissed the badge automatically disappears but on ios the badge number that is displayed won't decrease or go away unless we specifically tell it to so let's implement that functionality now we're going to do it right above the routing first we need to check to make sure that the notification we're dealing with is coming from the basic channel so we're going to say notification which actually we need to rename this to notification so we're going to use this object here so notification dot and we're gonna get the channel key and we're gonna check to make sure it equals to basic channel since that is the channel that we enabled the badges on and we also want to make sure that the platform we're on is ios since this badge situation is only on ios so we're going to use platform and if you see here the auto suggestion says auto import from dart html that is not where we're going to import this from we're going to use dart i o so first let's finish typing this platform.is ios and now we can import dart io now if all of these things are true we're going to do the following awesome notifications dot get global badge counter and this is going to get the global batch counter for our app in ios it's going to return a future int so we want to be able to do something with this valley so we're going to use that then in our case so far we've created two notifications so this would return two so now we want to take this value and then here say awesome notifications dot set global batch counter so here now we want to take this value and then we want to set a new global batch counter with a value that we get but also with this value minus one so the decremented value so we're going to say value minus one so what this is going to do is when we open a notification that comes through the basic channel on an ios device the badge counter will be decremented by one now let's give this a save and test this out so here we've got two notifications so let's actually first let's see the badge and here our badge is set to two so let's try opening this notification and if everything is working right okay so it looks like we need to actually hot restart our app for this to work so let's do just that so i've restarted the app and let's give this another try so good we are taken to the plan stats page now and well since we dismissed the preview there were two notifications we dismissed one of them before we had this functionality implemented so that's why the badge is still at one but we did open the other notification when we already set this functionality up and restarted the app so it actually did decrement by one and we can try this one more time to make sure it really is working so let's create one more notification go back see it's back to two now let's open this up again and it's back to one if you want to completely reset this with our current functionality you can just you can actually go ahead and erase all the contents and settings from this device and then it's going to reset once you relaunch your app you can also implement similar functionality for when a notification is cleared but we're just going to stick to this in this tutorial so before we move on to creating our next notification we need to make sure that we dispose of our streams in the dispose method so so this is our init state and we can add the dispose method below that so let's override this pose and here we're going to say awesome notifications dot action and this time we're not going to say action stream we're going to say action sync and we're going to say dot close and that's going to dispose of our action stream and then we can also do awesome notifications dot created sync and close that one as well awesome so yeah just make sure you dispose of your streams when you're listening and creating them now let's move on to creating our scheduled notification so far we know how to create instant notifications but this kind of functionality is not going to be super useful in most cases realistically you want to be able to schedule your notifications so this section is rather exciting before we can create the notification itself we're going to create the notification channel for scheduled notifications so let's go back to our main.dart file and here we're going to add another notification channel below the basic channel so notification channel and we're going to give it a channel key of scheduled schedule channel a channel name of scheduled notifications and we're also going to give the same default icon color to this icon here so default color colors.teal on android we have the option to make notifications not dismissible that means that we cannot just swipe the notification away and must take an action on it for it to disappear to do this we're going to set the lock parameter to true we also want the scheduled notifications to pop up on the screen on android so let's give this channel a high importance like we did in the basic channel so we're going to say importance notification importance dot hi lastly we want our scheduled notifications to play a custom sound when they're displayed to do this we need to specify the sound source in the beginning of this tutorial we went over where all of the sound files for ios and android were located so make sure you store your custom files in the same locations for this to work it is also important to note that android and ios support different file formats for notification sounds android supports a wide variety while ios only supports a few so in this project we're using m4a for android and aiff for ios so we're going to specify the sound source in the following way it's going to be resource colon slash raw rus underscore custom underscore notification amazing now our scheduled notifications channel is all set up and we can finally go ahead and create the notification itself now let's go back to the notifications.dart file and create another async function that returns a future void we can add it below the function we already have here so it's going to return future void and we're going to call it create water reminder notification it's going to be async this function is also going to require us to pass in a notification week and time object and we're going to call this parameter notification schedule this is the object we're going to get back when we go through the weekday and time picker and it will give us all of that information that we need to be able to schedule our notifications the way we want first let's create the notification in a similar way we did over here in this function so let's wait awesome notifications dot create notification let's add a semicolon and here we're also going to add notification content and here we're going to give it a unique id create unique id we're going to specify the channel key here and it's going to be the channel key we just created so scheduled channel and we're going to give it a title we're going to add an emoji of a water droplet here so the emojis class from awesome notifications sometimes has incorrect spelling of the emojis so you'll see that here right now so instead of water droplet it's called weeder droplet but it's going to work and add some text add some water to your plant we're also going to add some body text saying water your plant regularly to keep it healthy let's delete that extra space and i missed a comma here all right and we're going to give it a notification layout of default so notification layout dot default so it's just going to be a regular notification so far so good but we still need to set up the scheduling so this create notification method has some additional parameters we haven't looked at yet the ones we're going to use will be action buttons and schedule so first let's add an action button to this notification and we're going to provide a list and to this list we're going to add a notification action button and here we're going to specify a key of mark done and a label that also says mark done but in the following way let's save and format this the key can be used to identify the button for example inside an action stream and you can then do something when the specific button is pressed the label will actually be the text that's displayed in the button itself so now let's work on the schedule we want our notification to be displayed every week on a specific date at a specific time so we're going to provide a notification calendar object to the schedule parameter and it's going to be after this action buttons one so schedule and notification calendar first we're going to set repeat to true so that we make sure that this notification repeats now we know that we want to display this reminder on a specific day of the week at a specific hour and minute so for that we can use the notification week in time object to pass in the data we need here so let's do that let's say weekday and use our notification schedule variable to access the day of the week and this takes an integer and this day of the week is represented by an integer then we're going to add the hour we want it displayed on notification schedule dot and we're going to use the time of day and we're going to get the hour and then for a minute again notification schedule time of day dot minute we also absolutely must set the second and millisecond parameters to zero if we don't set those to zero then the notification will keep popping up until the minute on the clock changes from the one that we specified another way to read this code is let's uh let's read it like this i want this notification to show up on this day of the week at this hour on this minute only when the second and millisecond is zero since in a given minute the second is at zero only once we will only see one notification during the specified minute if this seems a bit confusing i encourage you to play around with this and try setting different values for these parameters so you can get a better understanding of it now let's go ahead and set up our button for this notification let's go back to the homepage.dart file and head over to our home page buttons over here so here for the second button we need to do two things we need to display the weekday and time picker to get the notification week in time object and then pass this object to our create water reminder notification function so let's do just that we can do that inside this body over here and we're going to create a variable that's going to store the notification week in time object notification week and time and let's import that and it's going to be nullable because the user could do things like close the time picker and then in that case we're going to end up with a null value so let's call it pick schedule and it's going to equal to a weight pick schedule and this is the function one second let's format this this big schedule function is the one that's located inside the utilities.dart file and you can take a look to see how it's created but it essentially just brings up the weekday picker the time picker and then returns this object let's go back so now that we've got this variable and its result from this function we want to check to see if this variable is not null so we're going to say if picked schedule does not equal null then we want to call create water reminder notification and here we want to pass in the pick schedule awesome so before we test this out let's create a function that will be triggered by our cancel button over here and it's going to be able to cancel any schedules that we create we're going to create this function inside our notifications.dart file just below this create water reminder function and this one's going to be incredibly simple it's going to return future void we're going to call it cancel scheduled notifications it's going to be async and all we're going to do here is await awesome notifications not cancel all schedules and that's it when we run this function it's going to cancel any schedules we have created so in our case this is mostly useful for testing so we can create a bunch of schedules play around with the app and then cancel them all to reset it but in real life you will also want to give your users the ability to cancel any scheduled notifications they create so you can create a modified functionality similar to this in your real life app now let's go back to the home page and add this function to this third on-press parameter so cancel scheduled notifications and there we go excellent now let's hot restart our app and test it out on both platforms so first let's take a look at how our scheduled notifications function on an ios device so when we tap this button now and here if you want to test this out just choose your current day of the week for me it's tuesday and if you remember we discussed this before this time picker shows the current time plus one minute so in my case it's already 8 30 so i'm gonna have to add one more minute to this and then you can hit ok just make sure this time you select is in the future and not too far in the future if you don't want to wait too long for the notification to show up and let's tap okay now we can see with the snack bar that a notification was created on the schedule channel so amazing we know the notification is created so now we can just wait and see when it shows up amazing there it is and you can hear the custom notification sound is playing as well when we open this notification the title the emoji the body text everything is there as well as this action button and this is how it looks on ios so when we tap this action button we're taken to the plan stats page and that is because let's go back to our home page where we set up the action stream so here in the action stream we said anytime an action is taken on a notification we want to be routed to this page and so we are great and now we can also tap this button to cancel any future schedules because once we create this notification it's going to show up again next week at the same time cool so let's check out the android version so now i've got the android emulator open and we can do the same thing we did on the ios device tap the water button choose the current day of the week it is for you and then choose the time just one minute past the current minute and now let's wait there you have it custom notification sound check when we open it we've got the title body action button and well the notification custom notification icon is still there as well and if you remember when we set up the notification channel for the scheduled notifications we set the lock parameter to true meaning that on android we can't actually dismiss this notification if we try to swipe it away it just won't work so in order to make this notification go away we have to take an action on it so either tap on the notification itself or on the action button so let's do that and we're taken to the plan stats page and then we can go back and you can see the notification is gone and same as before we can press this cancel button and our schedules will be canceled congratulations give yourself a huge pat on the back because you made it through this entire tutorial hopefully you learned a lot and with some practice will be very comfortable at creating local notifications for your flutter apps the awesome notifications plugin has so many options that we couldn't possibly cover them all in this video i do strongly encourage you to go and play around with as many options as possible on your own to go through this tutorial at your own pace once again and to get all the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flutter developer who can build real apps for clients or at a job go to flutter.education where you can get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to the mailing list to get the best flutter resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this be sure to subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skills because here at risocoder we're determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer see you in the next one [Music] foreign [Music]

Channel: Reso Coder

Views: 21,529

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter notifications, flutter local notifications, flutter local notification schedule, flutter awesome, flutter awesome notifications

Id: JAq9fVn3X7U

Length: 63min 59sec (3839 seconds)

Published: Fri Aug 13 2021

Reddit Comments

[u/sunbreakwang]

https://github.com/woodemi/quick\_notify