Show Or Schedule Notification in flutter. || Flutter Local Notification.

hello guys in this video we are going to see how you can show notification inside flutter application or in this video we will also see how we can schedule the notification at a certain date and time so before moving on to the video I would like to tell you that I will use flutter local notification package and this package will help me to send the notification and schedule the notification so make sure you added this package inside your pope.l file I will also provide the link of this package inside the video description from there you can go and just copy this dependency and rest you know okay so now let's move into the coding part here I have created a screen that consists of a notification title and a notification description and a button when the user Taps on this button we will show the notification first of all I will create a local instance of flutter local notification plugin so make sure you imported this plugin and then inside the init state for method of this class or the screen I will I will call the Android initialization settings and initialize it with the Android initialization settings and then I will pass the icon of our notification so our icon will appear here that is here this will be the icon and if you want to provide a custom icon just go inside the Android directory and then inside the app directory and then inside the SRC folder Main and resource and inside the MIP map just click on reveal in Explorer and add your and add your icon in all six MIP map files here it is add the icon in all six MIP map file and here we will use the default icon so I will leave it same I will not provide any icon I will provide the iOS initialization settings and then so now I will create a initialization settings for the Android iOS Linux and mac and I will call the initialize settings to initialize this initialization settings that we have created here and inside this initialization settings I will pass the Android initialization settings that we have created here and then also we will pass the iOS initialization settings that we have created here so now we will use this flutter local notification plugin to call the initialize function inside this plugin and we will pass the initialization settings that we have created here and inside the on selected notification so when the user selects the notification from the notification bar you want and you want to send the data you can use this to send the data that is in the form of a string so now I will create a show notification function inside this function I will check whether the title is provided by the user or the description is provided by the user if it is not provided by the user we will simply return and when both are provided and then we will create a Android notification detail instance and we will initialize this Android notification uh detail instance with the Android notification details and inside this it records the Channel ID and the channel name of the notification so these Channel ID and notification will appear in the app info of your application and it will displayed the channel name will appear like this so here it is the YouTube notification and the channel name is subscription so make sure you provide the valid name so it will appear in the app info of your application and we will provide the to be the high so we can listen the notification even it is in the DND mode and then it will same provide the notification iOS notification details inside this iOS notification detail we will provide present alert true present badge true present sound true and then we will provide the notification details and we will initialize this notification details with the notification details in Constructor and inside this we will provide the Android notification detail details that we have created here and then again the iOS notification details that we have created here and we are not initializing for the mac and Linux so we will leave it blank or provide the null and then and then we will call the show notification function that is available inside this flutter location flutter local notification plugin and using this instance we will call the show function so first of all is using inside this show function it requires the ID so I will pass the 01 for the ID and then it will ask for the title so our title is getting from the title text editing controller so we will use this title and description of this notification are coming from the same description text editing controller so we will use the description. text and then we will pass the notification details that we have created here so simply pass the notification detail here and now so now I will call this show notification function function so when the user Taps on this so I will use this show notification function and just paste it here so I call this show notification function here and when I click on show notification it will show the notification so just click on show notification and see whether it is working or not so now we got our notification and here it is simple notification H success ful shown here it is and our icon is appear here that we have provided here inside the Android initialization settings so in this way you can show the notification or the simple notification in flutter so let's see how we can schedule the notification at a certain date and time so now we will see how we can schedule the notification inside the flutter application so to schedule the notification first of all I added a new text field two new text field and first text field is for the date so when the user Taps on this text field we will show the show date peer dialogue and inside the time we will provide the same so when the user Taps on this watch we will show the time pickle and I have also created two text field for the date and the time I have also created a very instance of a date and time so it will hold the current date and time so I used this date and time to initialize the initial give the initial value to this date picker and now we will use this date and time to schedule the notification so first of all I will import the time zone do file as a TZ instance and then we will use this TZ instance and then we will use this TZ instance to initialize the time zone and now now we will use this TZ instance to call that TZ date and time instance to create the TZ date and time instance that is the scheduled app and then we will initialize this scheduled app with a teaser. DAT time. from and the date time that we have created above and it is the initial date time and we are updating this date and time instance when the user taps or changes the date and time so so to change the date and time what I have did so when the user tabs on this to change the date and time on the calendar app on the calendar icon to change the date and time so what I have did is to is I have shown a date picker dialogue and inside this I have passed the initial date is equals to the DAT and time that we have created above and the first date is starting from the now that is the current date and the last date is the 295 that is the year 295 and when the user selects the date that I have selected a date of five and when I click on okay it will provide the newly selected date and time inside the variable and then we will check whether the user Taps on the cancel button so when the user Taps on the cancel button our the newly our newly selected date and time is is equal to null and we will simply return because the date and time is selected not selected by the user and when it is selected by the user we will update the date and time that we have created above with the newly selected date and time okay and same inside the time so when the user Taps on this switch I have shown the show time picker dialogue and inside this it require the context so I have passed this context and the initial time that is happening right now so our initial time is the time do now that we that is currently running and when the user tabs on this and selects a time it will provide the selected time without the null value and when the user Taps on the cancel it will provide the selected time equal to equal to null and then we will return okay then we will simply return and when the user selects a time we will simply uh initialize we will select a Time and when the user selects a time so what we will do we will create a new instance of date and time and inside this we will pass that date time. year this date time is coming from the top that we have created and uh we will also use the month and we will also provide the day and inside this our selected hour and the selected time minute should be provided inside the this date and time Constructor and this date and time Constructor has an instance now inside the new DT and we will use this new DT to initialize the above date and time again and then what we will do so this is the full procedure for updating the time or getting the time inside the date and time instance that we have created above now we have got our schedule date and the time and now we will use the scheduled date time to schedule the notification at a certain interval so what why will so now what I will do so now what I will do I will call the zoom schedule function that is available inside the flutter local notification plugin and inside this June schedule first of all it requires the ID of the notification that I have provided 01 in the top as well as in here and then I will provide the title of the notification description of the notification and the date at or time where it is scheduled and the notification detail that we have created here and we will provide the UI local notification date interpretation and we will use UI local notification date interpretation. wall clock time and also we will provide Android allow while idle is equals to true and now we can schedule the notification so let's check whether it is working or not so inside the date I will select the today's date and inside the time I will select the time and it is just inside the minute section I will use 18 and then click okay and uh now I will click on show notification to schedule the notification so I will also change it instead of simple notification I will use skule notification and now I click on show notification and then I will close the application to check whether it is working or not so let's wait for 518 to get the notification 1 minute later so now here you can see our notification is now soon so when I click on this it will in the home screen so in this way you can schedule the notification inside the flutter so one thing I need to tell you so when the user Taps on the notification and you want to send the data you need to pass the payload and inside this you can send the data so I will show this is the data so here it is the data when the user Taps on this and you want to send the data so you need to provide it inside the payload section it is in the both section that is the show and the zoom schedule so make sure if you want to provide the data when the user Taps on the notification or send the data to the home screen or the any other screen so just pass the payload okay so in this way you can s the notification or schedule the notification in flutter using flutter local notification package if you like this video gives a thumbs up and make sure you subscribe to this Channel and till then bye-bye thanks for watching

Channel: Be Developers

Views: 4,489

Keywords: flutter local notifications, local notification flutter, flutter tutorial, flutter local notifications background, flutter notifications, local notifications in flutter, local notification, schedule notification flutter, schedule notification android studio, schedule notifications ios 15, push notifications, flutter notification, local notifications flutter, show notification in flutter, show notification in foreground android, show notification in foreground ios

Id: 85gxxGuqiAE

Length: 14min 1sec (841 seconds)

Published: Tue Jul 05 2022