Mastering Flutter Local Notifications: Step-by-Step Tutorial

by the end of this video you will be learning how to use local notifications in flutter starting from simple notifications to periodic notification and also scheduling a notification and we will also learn how we can move from one screen to another and pass the payload and display the payload in the new screen so let's start first let us create a new flutter project using flutter create command let's name the app as flutter local notifications tutorial Now navigate to the folder and open it on vs code now we will be needing some we will be needing the packages first package will be flutter local notification and then we will be also needing floated time zone and we'll also be adding RX Dart for making it reactive and changing from one screen to another use fluto and we the name of the package was flutter local notification and the second one was flutter time zone and third one was RX star so just paste it it will add the tree dependencies inside our project now we can see three dependencies are added now we need to come to the flutter local notifications package documentation here we need to follow some steps and complete the setup first we need to add this multi this enable feature just copy it and we need to add this inside app build.gradle so visit Android app on inside build.gradle here after Android ndk version paste it here just intend it correctly and then we need to add this code Library inside compile options paste it now we also need to add this dependency up to it and below this code line version paste it here now we are done next in the Android below Gradle we need to add this class path so copy it inside Android build.gov in this one your independencies below Courtland version paste this now we are good to go now we need to initialize the local notification plugin so for initializing just copy this code and Joe will create a new file inside our live folder it will be local notifications dot that you will create a class name it as local notifications you will create a static future init static future and it function that will be used to initialize the local notification plugin so we will paste this code here that we have copied from the documentation now we also need to import the local notification package so important here in on this receive notification for Darwin installation is this for iOS and Mac OS you for now we don't need to do anything so we'll just returning earlier and here we need to initialize for initialization setting that we have created here so for that just remove this we can create a new variable another local notification plugin like this a static final Slaughter local notification plugin let's name it as underscore flutter load call notification plugin and here we'll call and initialize the flutter local notification plugin to this variable and then instead of this we will use our variable dot initialize and this one is mandatory that did receive notification so for now we don't need to do anything we can simply pass null for now now if we call this future init function it will initialize our flutter local notification plugin and set everything now instead of app icon we don't have anything name as app icon for now we can use the icon that is already there so open Android manifest dot XML file and here we have our default icon this is min map IC launcher just twist it here I will show our default icon now to initialize it will be initializing in our main.dart file here first we'll make this async and then we'll use widget floater binding and show initialized it will initialize everything and then we'll call a width the name of the class was local notifications dot init and this will initialize inside our main function before we run the app now this is how we initialize the plugin now we need to write a function to show a simple notification so first showing a simple notification will create a static future function it will be show simple notification you will expect to pass the string title between body and string payload make it as an async function and then this is the code to display a simple notification just copy it and paste it here here we are just creating a new variable it will be Android notification details it is a return type of Android notification details here we provide our Channel ID our channel name Channel description and the importance and priority if we want to create a ticker then we pass a ticker and here we call the notification plugin to show and it will show our text body and notification and also the payload so our name of the variable was underscore notification plugin that we have created here and now since we are receiving a title body and payload we'll pass this as the title and pass this as the body that we are receiving and the payload so now if we call this simple notification function it will show a simple notification in our app here we have the demo floater code just remove this home page instead of that we are going to create a new homepage it will be home Dot make it as a stateful widget on now for the app bar give it a title as flutter local notifications and inside body we can have column will have some children's in column you will add our elevated button dot icon here the icon will be icon icons dot notification outline and on press for now let's not pass anything and the label will have text simple notification Now link our main dot dot coil with the home page that we have recently created and now we need to run our app so this is our UI where we have a simple notification button on pressing this simple notification button we would like to call our local notifications Dot show simple notification function and here we need to pass the title the title will be simple notification and here inside the body let us pass this is a simple notification and in now payload for now this is simple data now if we press this button it will call the show notification function and it will show a simple notification so let's write also simple notification and it's also giving us the body as this is a simple notification so this is how we show a simple notification now if we click it now see click it from outside it will open the app now let's write the logic for adding now here we need to write another elevated button similar to this it will be to show periodic notification and icons will be timer outline and here inside our local notification will write another function to show periodic location adds regular interval this one will be also a static future function it will be show Ed it notifications make it async and here you will use a weight underscore flutter notification plugin Dot periodically show and here we need to pass our ID title body repeat interval and notification details so like our previous one we can copy this and here we can paste it here we need to pass the channel ID and everything the description for now we are changing the channel ID to something different so that it gets different value foreign let's also accept a tidal body and payload and here the ID will be one and I'll repeat and here we need to provide a repeat interval at the interval that will repeat the notification again and again so for now let's provide a repeat interval as every minute it means that in every minute it will show this notification from the time we start so let's call this here we'll use flutter you will use local notification store show periodic notification and everything will be similar here will instead of simple notification it will be notific notification now if you press this and if you close this app after one minute we'll find a notification comment now you notice that this periodic notification came after one minute but if we close this notification it will not be closing after every one minute it will show this notification pop up so to close it we need to create another function by which we can close a specific notification depending upon the channel ID so let's create a function to remove the notification close a specific Channel notification now you see that I have not pressed anything but it's showing me a periodic notification it has been given the interval of every one minute it will keep showing notification every one minute until we close it so let's try to function to close a you know specific Channel notification or make it as cancel here we need to pass our ID channel ID make it to async and a weight underscore flutter notification plugin dot cancel Joe we need to pass the ID and this will cancel our periodic notification now we also need to add a button to close a specific non periodic notification for that let's add a button so close periodic notifications it will be a text button foreign notifications and here we will call our local notifications dot cancel and we need to pass the channel ID here in our periodic notification our Channel ID our Channel ID was one now if we press this button it will close the notification of Channel 1. now we can also write a function to close all tin notifications available it will be static future cancel all here we don't need an ID since we'll cancel everything it will be underscore local notification plugin dot cancel all if we call this it will cancel all the notifications foreign cancel all notifications and here will pass local notifications installed cancel all now if you haven't played suppose here we have the simple notification and if we press this cancel all notification it will close the simple notification so this is the way how we can cancel all notification here let's write the logic to schedule book notification like our previous one the name of the function will be sure schedule notification here will also pass the title body and payload and here we will use our flutter time zone so so your first you need to add flutter time zone slash data slash it will be latest dot dot as t z and then to add package time zone Prime Zone dot dot also has TZ now here first we need to initialize our time zone we'll use TZ dot initialize time zone it will initialize our time zone and then we will create a local time variable and we'll use teaser.local to get the local time let's create a let's create a static final on click notification variable here we'll add Behavior subject so this is a function of RDX Dot and we can use pass the return type also the return type will be a type of string and here we will also write a function on tap on any notification it's attic for it on notification tab foreign then we will add this inside on click notification on click notification dot add notification response will only add the payload here we need to add a null check otherwise it will not work what we are doing if we tap this notification we are we have created this previous subject property of on click function and we will add our notification payload here and we also need to call this on notification tab we can also add on background response will also perform this on notification tab it means that if we open the fold background notification then it will call This And if we use if you press test notification background it will also call this function now inside our home page we need to listen to any changes if it's happening for that reason we have made this as set state in our init state we will be creating a function to listen to any notification clicked or not let's name the functions listen to Notifications listen to notifications and here first let us just print listening to notifications and then we'll call notifications local notifications dot on click notification the RX start variable that we have created statically so that we can access it now we will stream over this and listen to any changes if anything changes if anything get added to the one click notification it means that we are adding a new payload that will navigate then we'll use Navigator dot push and we'll pass it to our another page that we have created using material page route on text another page here we need to pass the payload here so our payload was inside event now it's okay now we need to call this in our image State listen to notifications now what will happen if we restart this app and if we click on any notification like simple notification it will show a notification pop-up and then when when you click it it will open this another page foreign and instead we can only show the payload like this is simple data now you can do anything with this data you can pass to any other page or anything as you wish now let us try with schedule notification Fe also close the zap and if we open this okay now let's try with schedule notifications now if we run the upon background and click on this it will open to another page and sure I think that we have not passed any payload so we need to pass the payload here payload will be the payload and here also our payload will be below that we are passing now let's restart our app and try again now let's schedule a notification now if we click here it will show this is periodic data okay the ta will be scheduled data now let's try on schedule notification now if we click on this this is scheduled data and if we try to close all notification it will work let's add a container and give it a height as double dot Infinity and make this in Center also set mean access alignment to Center now it's okay we have successfully completed our flutter notifications integration so that's all thank you

Channel: Snehasis Ghosh

Views: 19,704

Keywords: Snehasis Ghosh, flutter, flutter tutorial, flutter local notification, flutter local notification background, flutter local notification schedule, Flutter Notifications, Flutter Notification Plugin, Flutter App Tutorial, Flutter for Beginners, Flutter UI

Id: --PQXg_mx9I

Length: 31min 35sec (1895 seconds)

Published: Sun Sep 24 2023