Flutter Dynamic Theme Change | Local Push Notification | Get Storage | Beginners App iOS | Android

[Music] so [Music] so we'll get started with a new flatter tutorial and in this tutorial we'll learn how to use flatter local notifications with the theme mode so change the theme based on user click as well as sql crud so we will use sql creation update and delete method as well as we'll see how to use get storage package to save information on on your phone as well as we will use sql to save information on the database in our phone locally so without further ado let's get started okay so i'll create a new flatter project over here and i'll save it somewhere over here and i'll call it [Music] flutter to do app yeah flutter to-do app to do app and it'll cover the features as i told you okay now let's go ahead and create it and it's creating and we need to wait a bit okay so i'll choose here open new window so you can skip this one this is my old project okay now here we are with this new flatter project and uh the device has been selected so what i'll do i'll just go ahead and i guess i'll run it okay and let's move it over here and it will run very soon okay and as it runs we can do a bit of other things so this is the main file over here okay and in the lib folder so over here [Music] uh okay well let it run and at the same time we'll create a folder over here and we'll call it ui because we'll have a lot of pages in this project so we'll save them differently okay and now within it we'll create another file and we'll call it home page dot dart okay all right and over here we'll create a stateful widget and we'll call it home page okay once you do that you might need to import some of the libraries let's go ahead and do it okay and over here let's come to our main file and we want to delete last two sections so now here we are with this and over here we also want to delete this because we'll use this file the file we created in our ui folder okay so we want to use this file and this file's name is as you can see from here it's a home page so we'll do home page okay all right and we need to import the library and let's import it okay now let's go ahead and run it would be able to right now it's dark screen uh black screen okay and a few of the things that we can delete from here now actually what we'll do we'll delete uh we'll delete this section we also don't need this one for now okay let's save it hot reload nothing changes and well it's black here because we have an empty container we are returning a container uh but we want to return a container we want to return a scaffold widget okay and within scaffold we'll set up our app bar and we do a bar and a bar is no i mean empty for now not much things there i will have body sections and the body will have a column okay for now a lot of the things will change later column would take children we know that column needs children okay and now let's define some child we'll do text here and write theme data and uh for now we just want to set up a simple style so that what we do would say uh font size okay we'll do fonts i said 30. okay now let's go ahead save it and run it okay here we are and now back to our main file over here and over here we want to close this debug thing i don't like it so debug this one to do it false okay now it's gone all right yeah now let's understand what is a theme data okay now well theme data well as you can see from here it is a long list and it's a class theme data class and it tells you that how your app should look like okay so using theme data this constructor you can set it you can do some settings and you can also change the default setting okay so theme data tells you what should be the color of your app the background color the app bar color and text color if you have button those buttons color once again using theme data you can change how your app should look like the app color sorry the upper color the text color if we have button and things like that okay different kind of bars notification buttons as well as toggle bars so different buttons we we can change them okay so now in flatter we have in general two kind of themes one is default theme which is this one and then there is a dark theme okay so we have both so let's go ahead and call dark theme and we'll once again sorry call theme data okay and for now it's also empty but in general default it falls back to this one not this one okay now let's take a look at this default one the default one has some property so primary color i think the primary color is colors.blue okay so that's that's what they have okay i'll explain what it does very soon now the primary color in general is responsible for changing the color of your abba and buttons not the text okay once again primary color changes the color of your app bar and the button color things like that okay so just now as you saw so this is the default settings for example if i comment it out uh hold on if it commented out the color didn't change so this is the default color okay which color which is blue now we can change the default color to say amber okay now change it as you see it changes so we are changing the default setting over here all right yeah so with primary color that's what you change now how to change this text color now in general when you play with the theme data you don't want to change the text color directly over here but you set up a parameter over here a property which is called brightness okay so you can change the brightness so do we'll call brightness [Music] brightness dot light okay now let me change it to blue which is our default setup for now and once again so these are actually the default setup even if you don't write this thing for example you take it out it is still like that okay so either you write it you don't write it it's the same thing because it's the default so now put it back but once you write them definitely you can change them from here okay now what does this brightness do well now the brightness compares the background color with your text color but in general the background color is say well white which has to do with this light light means bright right okay so if your background color is white so in in in that case it the text color should be black otherwise you can't see that but once so this light which means bright so which has to do with the background color in this case the background color and light they're the same thing okay but now let's see let's change it change it to dark okay now which tells it the background color should be dark okay so background color not the ab bar remember okay so now as as the background color became dark because of this now of course you can't have a dark text because if you have dark text you can't see that right so what flutter does it automatically change the text to white or related things okay it's not only just text many other things mostly the text change to white color so in this case flatter is very smart so it detects for you what is the brightness of your background in our case the brightness of our background is black so the text is white hopefully it makes sense so these are the default i mean we change the default settings of course you can also change it here now once again i said primary color is responsible for a bar all right so so this one doesn't have to do with the app bar this one has to do with the upper and this has to do with the text color hopefully it makes sense text color and background okay but now as you see we don't want this thing to be dark so let's put it back to light that's fine now once again we'll copy this thing and put it over here okay now let's save it of course nothing will change after this one changed because we set it to light so background color is bright light means bright here okay now in general this is the default setup not the dark theme okay dark theme what is dark theme dark theme is like your main background color or app main app color is dark okay that's what it means and with the theme your main app color is light which is bright okay now of course we can change the default settings okay so there is another property that's called theme mode this one okay theme mode uh the default setup is a theme mode dot light let's prove it okay so this is the default setup you take it out it's the same all right you put it back it's the same so even if you don't write it there it's still this uh this i mean falls back to this one falls back to this kind of settings okay all right now of course you can change it okay uh so we'll change it to dark so theme mode is dark which means it'll call this property okay of course now we can change over here to understand it better say for example yellow all right and over here say dark okay so now let's save it perfect so you see because primary color set to yellow it became yellow and now it became uh dark so our default color is dark and the background color became dark and the text became white but of course the amazing thing about flatter is that you can put it light no problem okay even though we are in dark mode but the brightness is light in this case the text color would automatically go back to um black color so once you change the settings here so it takes the uh related property either this one or this one so this is the main section right so if we can find a way to uh toggle this value uh through a boolean variable we and then we'd be able to change the theme color dynamically because right now we are changing manually over here but that's what we don't want we want our user to every user to be able to click on a button say over here and based on that would be able to change the uh uh theme okay or the theme theme mode of our app okay so that's what we want to do so well now one thing we will do we don't want uh to put this uh code and logic over here we'll put it to a different file okay so that's why we'll declare another file within our ui directory okay and we'll call it theme dot dart okay over here all right and we'll create a class over here and we'll call it stems all right okay now a lot of the work we already done what we can do we can just copy this one this one over here and put it there and [Music] this one over here and put it there okay but of course we need to organize really not like that here we'll create a static variable would call static final and light mode okay so we'll save this constructor in a variable uh let's see theme date we're getting an error i think over here we need to import libraries okay so now we have these variables but i didn't think we need this one and not this one because underscore means this is a private variable but this is not actually private variable because we want to access this variable from outside world from this file okay over here now remember we had a property which is called a theme and over here we'll call themes dot let's say light li ght light and i think we need to import it okay so if you have a static variable you want to access that variable from other file what you need to do just call the class name as well as the variable name with the dot parameter so in our case this is the static variable and the class name is the theme so we are calling it okay all right and of course we don't want dark mode now we want the light mode theme dot light theme mode has two values one is the mode dot light and that is the mod.dark so you're using the light one let's go ahead and save it and see the result okay so now we are falling back to uh this all right of course we can change it to blue color okay yeah and let's run it yeah so it's blue color okay yeah so well that means it's working and for how about this one so this one over here let's change it to uh dark mode okay and but if you run it it won't work i guess because you you need to define your dark theme here okay so now do it uh themes.dark which is coming from file over here okay now you change it it would work okay do you remember that our theme color was the app color was yellow okay but now it looks bit ugly so we don't want to use this color so what we'll do we'll first go ahead and define some colors so i'll go ahead and define some colors over here so i already defined this color but looks like we have an error so it doesn't want the this color value over here what it wants is uh this kind of value okay so ox f4 242 so 800 is this one what do just go ahead and change it four two four two four two okay perfect uh so now because we already have defined the primary color which is bluish color so the primary color is more like the app bar color okay so instead of calling this would call here primary color remember this is the primary color and this is the variable that's taking the value and the value is initially created over here okay all right and over here for primary color let's see we can define it to dark over here like which we already have here okay dark gray color maybe this one okay yeah for now or maybe in future if we need we'll change that and the mode is definitely dark mode okay now let's come over here make sure that everything is working so we are in dark mode right now okay perfect so the primary color bar is dark okay and the background is dark so the text should be white so which is working and over here now let's the change the theme mode to light over here so let's go ahead and check it okay perfect everything is working as we expected now this value we want to toggle the theme mode as i said earlier we want to create a button over here and uh toggle it okay well now to be able to create a button we can change some of the things our home file okay so home page over here okay so uh just now we had this app bar but we want to create our default app bar okay we want to create our default app bur not the one i mean a customized number i'm sorry not the one is given from flatter okay so over here we'll create this method we already called it over here so let's go ahead and create this method over here fbar okay and here we will return an ember once again why we are doing that because we want to create our customized app bar as well as the button over here okay so that's what we want to do okay now ever takes few properties so one of the properties it takes is called leading okay so leading put things over here okay not in the middle not over here at the beginning of a bar okay now within this will return a constructor which is called gesture detector because we want to be able to click and change like that okay yeah so now it takes on type property well for now on tab is empty and now over here what we could do we could uh change icon all right we can set up an icon over here text child and within child we can set up icon to do icons dot say night light let's see ght night light i guess this one the moon okay all right the moon and we'll use the size over here we do size 20 okay all right and let's go ahead and save it hopefully we'll see something over here right okay and let's see over here so ever we have already the leading and it ever has another property which is called actions okay so now use action so once you put something actions it goes from this like left side okay put things from the left side as you can see it takes a list which means you can put a lot of them okay now over here once again we'll put an icon so we can just copy paste this section to save our time uh and uh we don't want the same icon to go and we don't need this child all right now let's save it perfect uh but as you see it's too much to the left so over here we can inside this we can create a size box and we can do width so let's put it 20 so it will create 20 pixel distance from left okay all right so it makes sense okay now come back to our home and uh change this to dark and see what happens yes okay so things are fine now change it back to light okay perfect well now so far with this and what do we want to do over here because we have this untapped event well there's nothing there we can put a debug log here it's a print tapped okay so if you tap on it you'd see over here tapped okay so we want to click on this button we want to be able to change all right well now to do that we need to declare some logics as i said earlier we want to toggle this mode okay toggle this one using a variable okay and based on that variable status we'll change it to light or dark okay well to do that we want to move this logic this logic to a different file using a very with a very boolean variable together okay so what we'll do we'll create a new folder over here directory and we'll call it services and within services we'll call um we'll create a new file and we'll call it themeservices.dart okay now over here we'll create a class once again we'll call it theme services okay yeah so that's what we want to do and now here's the interesting part so we need to create a boolean okay and boolean will have either true or false this two states okay and these two states we need to be able to keep track of them okay and based on that we'll make changes over here okay now we want to save them somewhere okay because only if we save then we'll be able to change them okay to save them we well we can save them locally to our phone and to do that we need to install a package so we'll come over here to this file and over here let's say over here we'll install packages over here first one is get storage get storage package and second one is get package uh we'll use get x for uh doing navigation as well as taking care of our sql crud and many other things and get a get storage value just for saving information locally in the phone all right okay uh so now over here we need to initialize this one final uh i mean get storage this thing okay yeah initialize and get a value from there and use that value later on so we'll we'll save it in a variable called box i will call get storage okay oh yeah one more thing though because we change it so we need to install it click over here and it will install the packages for you and it's doing there okay perfect all right it's done and now over here just import the file okay well now get storage saves information in a key and value pair in this manner so there would be a key and for that key there would be a value so it's more like uh json file i mean if you work with json file you know that it's like they say id id is the key and it will have a value one is the value things like that so more like in json file format manner okay like that okay so well this is the variable where we want to uh save our some of the information our boolean status we want to save here okay but first we need to create a key so we'll create a key and we'll call it key and the key could be any random string name in our case we'll call it is dark mode okay all right remember all these things we are doing here because we want to change it dynamically so we need to do some setup all right okay now over here let's create uh another function okay so this function will return boolean okay so we'll call it load theme from box okay and we'll use arrow function which will return immediately in one line okay so this arrow function you can save some coding time because you don't need to have this brackets this and that okay so over here we'll call box and we'll try to read so once you create a variable using get storage that variable has a property or method actually method called read okay now box dot read now over here we read what read the key key okay so actually what do we do here over here uh i think i'm missing this yeah so what it does we are trying to read the value of the key okay yeah that's what we're trying to do over here so you have a read method and in the method you supply a argument and this argument's name is key and it will check that for this key if there is a value or not so that's what we are doing okay yeah so if there is a value so with the first question mark we say if there is a value and if there is a value with the second question that means use that value otherwise just return false sorry if there is a value and what it does is that this double question mark means that if there is a value okay return that value as a true so it's pretty much like that okay yeah whatever the value is there return that one but if it's not minus in this in our case it will return actually true okay it will return true so that's what it does so if there is minus or negative value it will return false okay so that's what it doing here all right so now we need to find a way to call this thing call this thing from our uh file over here okay so what we'll do we'll go ahead and create a method another method and we'll call it void okay and um no we don't want to call it void let's see uh we'll return it theme mode over here get and theme now over here we'll return so let's see i guess we need to import this package okay now over here we'll call this function so now we'll call this function this function we'll see what it returns if it returns it true then we'll be fall back to dark mode dot dark if it returns false then we'll return fall back to light mode so let me explain what's happening here i'll explain this section a little later first think about our app in our app initially there is no value for this right because we didn't set up any value there's just key so once you call this function definitely this will return false this function right now we know that in flatter this a tenary operator is a true or false thing right so well if it returns false then fall back to this section okay if it returns true then fall back to this section hopefully it makes sense okay yeah no because we are going to use get x over here okay in our in our package we'll use get x so that's why we did get okay so if you have get actually you can call that variable from somewhere without creating extra or without importing extra uh packages like this okay now because we need to return a theme mode okay so that's why we are returning here theme mode okay yeah like that so now what we need to do we need to call this one from our main file okay so where is our main file this one now over here we'll call it so how can you call it we'll call it theme services i think our file name is the service okay theme service dot theme okay let's go ahead and check it well it means it worked over here because there is no error and that's what we wanted so what's happening here it's falling back to our uh light mode it's falling back to our light mode over here because remember when you first call it when you first call this value from here this will return false because there is no value for it as there is no value okay one once again you call this function from here it will return this one light like this light boolean uh variable and based on that because it's false okay so it's setting the theme mode to light mode okay like that hopefully it makes sense and uh what else so now of course we can go ahead and click on this and we'll see that nothing still changes okay so we need to write another function to change it dynamically okay right now using this whatever the setup is there we get it but this is still static okay so we don't want the static method okay so uh we want a dynamic method okay because that dynamic method will use over here okay yeah so now let's come over here so here we'll call a function create a new function we'll call switch theme okay and over here we'll say get dot change well i think we need to import our get package okay stop dirt now we would be able to access some other properties get from get package get dot change theme mode okay so we will change the theme mode because this is the function will help us to change the theme mode okay now let's go ahead and call it called of this function so now what's happening here you're calling it okay and we'll see once you call it if the theme mode is a true or false that's what we want to check okay if the theme mode is a true then we'll fall back to the mode dot light and if it is false then we'll fall back to the mod.dark okay what's happening here let me call you we'll call this let me tell you we'll call this function from somewhere and once we call that function definitely at first it will return false okay so that means it will follow it to this one what does it mean it means that we are toggling the value so remember we set it the default value to thin light okay so that means over here this will once return false from here this would be dark value from this function okay all right perfect we're almost done now let's come over here so what we'll do what we'll just call this function okay so the theme service dot let's see switch name this one okay yeah let's see and i guess we are good now let's go ahead and check it okay and what we'll see okay uh another this arrow that's because uh now we started to use this uh get storage right now we created an instance over here locally okay but now this get storage also has to be initialized from our entry point of our app okay and entry point of our app is this one so what it once from here we'll initialize the whole get storage but we'll not really create any instance over here we created an instance but here we'll just do initialization okay all right so we'll do a wait otherwise you'll get this error okay would do a weight and we'll call get storage dot init get stories has a method which is init method okay and it is asking us to import the library and because we are using a weight we need to use a sync but this might also throw error so until this is initialization this initialization has been done we want to wait okay so there is another function that we can call okay widgets um flutter binding dot ensure initialized so what will happen here until this is initialized this run app over here it won't run okay it'll make sure get storage has initialized first okay otherwise we'll get an arrow like this so let's go ahead and rerun it and let's see over here use get material app we still have the missing plugin so if you get this kind of error what we could do maybe we can run flutter clean let's see and wait for it okay and it will throw a lot of error now and it's we need to install the dependencies once again and over here yes okay now let's go ahead and run it let's see if we have error or not uh well so over here actually what i did i uninstalled my app and reinstalled from here and looks like the problem has gone okay so now let's go ahead and click it but one more thing that we already did here know that uh we are using get material once again we already installed the package over here as you see all right okay now let's go back to the most exciting part over here now as you see the theme change automatically once we click okay but now if you click it it doesn't get back okay because we need to really save it we are not saving this uh somewhere okay so what do you do we'll just go ahead and save it over here okay and how to save this thing and uh let's see so we'll create a new function over here uh let's call it uh save theme to box okay i need to take a boolean variable local variable we'll call it dark mode okay and over here we'll write it okay whatever value is passed to it will write and save it to the box this is the box we created okay and with the right method and what is the key when you write you need to mention the key so this is our key so that's what we do and over here we'll mention the variable that has been uh past dark mode okay that's it does all right so over here we'll call it once we switch it we'll call it okay switch this one all right now we need to pass a boolean variable as you can see it takes a boolean so it take it it saves the value of key okay as i said earlier the either the value is either true or false right so now here we need to change the value but we can't really do true or false like this we need to change this dynamically so do remember first time when we have this app okay definitely this returns false okay right as we said early so now as it returns false we fall back once we click on the button we fall back to theme mode okay right so over here we need to change the save the value and we need to do the opposite we do this one okay so we are saving we are saving so we are passing here true so we'll send it to true okay save it over here as a true so next time when you click on the button so this will return false if it returns false sorry this will return let's see uh yeah this will return true so if it returns true will fall back immediately to light method or light mode okay so whatever the uh status right now here you pass the opposite one for future okay because the future you want to return you want to change based on the value that was created early so hopefully it makes sense okay now let's go ahead and restart okay now do it change it change back change to dark mode change to light mode perfect so now we are successfully able to change the theme mode okay so next we'll see how to create a notification once user click on this button okay that's what we want to see work with notification first we'll create a file over here okay and let's call it notification services dot dart and here we'll create a class class notify helper okay yes now we did the class and well for android and ios we need some special settings okay now let's go ahead and see the ios settings first you have to come to this folder in the runner folder then this file okay so well if you open it you in your case if you're on ios you'll not have this one so you need to copy paste this line and put it right here here so there is a link for this there is the link below in the video description so you can go ahead and copy it so i also mentioned over here so as you can see that uh so this is the link and the copy so this is the uh code that you need to copy so you can just copy from here directly and put over there which i already did that okay so that's for ios and for android we also have android settings so let's come to the end so if you are in android folder or in android device uh you want to run it so you need to come to this driver folder from app source main res and drawable and put an icon over here okay i can image so that's the app icon image without this we will have a crush in our app and which i already done it which i've already done it so it's over here let's take a look so this one okay so you can put your app icon over here without it will get error all right so that's the first thing that we need to do for notification now there are a few other things of course we need to do now come to this class so over here we will use notification and create initialization of notification services but to do that we need to use some plug-ins so here we are come to this pub spec so go ahead and install this [Music] two plugins one is for notifications and there is for time zone because we'll also send notification based on time or time schedule so you try to use the latest version that's what i'm doing over here okay yes and now over here there are things that we need to do but there are this is a lot of code and long names that i don't want to do it like this so what i'll do i'll go ahead and directly copy some of the code let's see from from here and i'll explain what is happening so come over here and uh copy it and put it over here of course it'll throw errors so what you need to do you need to go ahead and uh import the library for now we don't need this thing we'll deal with this two arrows little later uh let me tell you what's happening here so first we initialized an instance from flutter local notification plugin okay the plugin installs so this is the instance so this is the one that would be using soon okay so we declared a function which is called let's see which is called initialization initialize notification this is a function that we declared and later on we'll call this function from our home page somewhere uh over here okay we'll create any state method anyway so this is the function that will get called first now it takes another function and that function is a function of this instance it's a flat note local notification plugin so this function name is initialization it takes at least two parameters i think it does more than that but two parameters are enough so first parameter is for initialization and second parameter is for showing the uh content once someone click on notification you know that bar so there's two parameters it takes well now the first one initialization settings this initialization settings is the settings for both ios and android okay yeah so this is over here we have this ios settings so in general at the beginning when the app gets initialized we set everything to false like sound badge and alert okay and this is the fallback function for ios older version okay and we need to implement them as well as this one otherwise we'd be getting an error okay all right okay so now of course this initialization this variable is this one and this one takes the initialization variable for ios but of course we also need to define for android so let's go ahead and define for android i'll just copy paste and write here android and android this will save us time android and of course we don't need this thing for android the minimum setting that we need that's uh the icon just now i showed you the app icon so that's what you want to pass the icon name the image name okay all right now we need to pass it over here this is the initialization function that sits within uh this initialize function okay all right so we'll call here android and over here we'll just copy paste and put it here it will save our time okay all right so once again this is the main entry function for uh plugin setup and it takes initialization first parameter and this parameter consists of two parameters in our case ios and android but there is another one that's called mac for the desktop version but we don't need that one so with this one these two devices get initialized okay and those two devices are being initialized over here this and this one all right hopefully it makes sense these are all wrapped in a function called initialize notification this one of course we still have these two errors now this one okay now we need to create this function so what i will do i'll just copy from the website check out the link once again there's a link in the video description so this is the link uh sorry this is the code so i'll copy it and i'll put it here as a new function and here i'll be using get x as i told you so i don't need the show dialogue over here so uh first go ahead and let me import get x package package [Music] let's see package get this one all right okay now over here we can call get.show or dialog this one as you say it takes a widget so i'll pass a text widget welcome to notification welcome to flatter to flatter that's it okay now error is gone okay so because with flutter get x package uh showing dialog becomes much easy if you don't want to use get x go ahead with this section which i already un commented out but i'll use getting okay so this error is gone oh no we still have error here now this error because of this uh null safety thing now it depends on version in some version it might work just like this the header should be gone and if it's not gone all you need to do make sure tell the compiler that this could be null in future okay so now compiler will have better idea what's going on so now the error is gone once again this is for ios older version newer version like web f10 ios 10 we don't need this one but if someone is on very old phone you need this one okay i think it shows the message once someone taps on the uh uh notification okay taps the notification it shows the message as you can see from here all right okay anyway so now we have this another select notification this is also the same so this is also for showing notification once someone clicks on the notification so we need to uh create this function once again the function is already defined let's see somewhere over here so just let's go ahead and copy paste so i'll put it as a new function over here all right and once again this is the error because of this uh null safety thing okay so over here now over here is gone and now this is for now we'll just pass empty container okay and maybe you will say color colors dot white for now we are happy so once someone click on this notification it will take us to a new page okay yes like that of course we can also i think do the same here instead of showing a message we can go to our new page all right like that anyway so that's it now the error is gone okay and uh let's see um what else we need to do uh now we can come to our file over here and create the init method so let's override the state method and we'll call init state okay now over here we'll create a variable first we'll call it ver notify notify helper okay now here notify helper will create an instance from notification service okay and the class name is notify helper this is the class name if you want to make sure there's the class name all right okay now over here well we are ready with this one okay so once uh this home page gets called this one our plugin will initialize so let's go ahead and check it okay well but of course nothing is happening okay uh now do remember that at the beginning everything is false it's not even asking you for permission okay during initialization but after the initialization has been done we want to ask for a permission so we need to use a new function so this function is i guess permission functions let's see this one okay just go ahead and copy paste this is for ios okay and over here i'll keep it once again a separate function so this is the function and once again we are calling different things like uh whether this things has been initialized or not okay so that's what it does yeah so what we'll do we'll just go ahead and call it so notify dot so it's the function name let's see our function name this is the function name now i went ahead and uninstalled the app uh let's see uninstall the app and reinstall it and then i got this notification the one you saw early let's see if we see it or not this time no we are not saying it right so if it doesn't work what you could do you can just go ahead and uninstall it okay and let's install it again and once you do that hopefully you'll see that it's working so we need to wait a couple of minutes uh sorry a couple of seconds as things are getting initialized yes so it means our notification is has started to work now we'll say allow all right okay so if you don't have this one it won't work especially with the new ios version so you have to have this one okay all right so now next once we click on this we want to get a notification immediately and where is this happening this is happening over here right so over here we'll call a function okay we'll call a function would say display notification okay now once again i already have this [Music] once again i already have this one over here the function so just directly copy paste it let's see so display notification this one okay and we'll come back to this file and over here okay so now we need to call this display notification function uh well what's happening here first tell you so uh this is the core part of this thing okay and it takes uh once again this show function is coming from our plugin and it takes parameters a few parameters like what you want to show like title and body of the notification and this is the sound okay what kind of sound you want to show when someone clicks on here so this is the default sound we'll use and what is this so this is some platform channel specification like for ios and android okay so with android like there is a priority of every notification it depends on the battery so battery decides that the notification should be displayed immediately or not and for ios we're just using default ones so we're passing nothing there and using this two we create a new variable okay so we are passing using android and ios over here and that variable we are passing over here so the actual function is dot show this function anyway so we need to call this function and pass this parameter to it right so what we'll do we'll go ahead and come here so we'll call uh notify helper dot display well looks like it doesn't recognize immediately so what i'll do i'll copy paste this one and put it over here all right yeah now of course it takes the parameters two parameters as you saw earlier title and body right so title will say right here notification theme changed okay and now body put the body all right now body would tell either it's a dark theme or light theme okay now here's interesting thing because we are using gatex package get x keeps the track of the theme that is being used right now at that moment okay so there is a variable called is dark mode okay as you can see if you hover over on it you'll see it's coming from uh get x okay so we are using that one and now this is a boolean variable that's we are going to check okay so we'll see so we'll check with this one if it returns a true so it means that uh it is using dark mode otherwise it's using light mode okay now activated say dark theme okay activated light thing that's it so we are passing this and this over here okay so now let's go ahead and run it once again okay now what do we want this time once we switch the theme hopefully we'll be able to see a notification okay well you click on this and it still doesn't work because actually i made a stupid mistake we supposed to initialize it we are supposed to call this one right we are still not calling this that's why it's not working so we'll call notify helper dot okay now let's go ahead and run it and click on this as you see so now it changes immediately right you click on it once again it changes again all right but what about the messages that we set over here um over here this one so we are already passing it but we are not using it so like over here they're already in let's see uh title and body right so these two parameters so we can just change over here to type title and here body okay now let's go ahead and change it and run it hopefully we'll set yes so now here's the message has some problem we need to fix it okay now dark theme activity so we see the opposite so from my understanding what happens here so because this is even though now activate dark mode but i see the opposite message that's because this dark mode is coming from our get x package not really get storage okay like we said early so get storage and get x they're different so get x doesn't say what this one saves okay so they work differently so all we need to do we need to change the messages okay so because get x package just tells you the current package so current it's black right or dark so it checks that one so if it's dark now we are activating if i click on it will activate it to light so that's the message we want to see right so get x just see whatever is there it's it doesn't take care what's stored over here okay so they work differently so it just takes the current thing what is the current is dark so you're going to activate the light thing so it would return false so if it return false then we'll we'll show this i mean if right now it's a dark mode right so is dark mode would return true okay if it returns a true then we'll go back to this one if it returns false then we'll go back to this one okay okay activated light same activated dark thing okay so our messages are also working once again this just depends on the current theme it has right now before you click okay hopefully it makes sense all right so the next thing we want to do we want to create a scheduled notification right here so once user click on something click on this button we want to see a notification five seconds or ten seconds later or any any any amount of time later okay well for this one we already have a function schedule notification so what we'll do we'll just copy paste this one and we'll come over here and put it once again as an independent function all right but now it has some dependencies okay so we need to import some uh uh libraries but those libraries would be coming from here we already installed this one okay so we need to go ahead and import some libraries let's see if we can import manually no it looks like not okay yeah let me import them manually over here okay and now schedule notification it takes a function so that's within the plugin itself zone schedule so it takes other information we saw which we saw early like that and but this is the most important one this is where you set up your time okay uh like how many seconds later you want to call it and these are the information dynamic information you can pass it down to them and change them later okay you can pass down here and change them it doesn't matter so here this is the time is the most important thing so now if we go ahead and call this function it won't work because we need to initialize the time zone so remember earlier this time zone initialization so we can activate it over here right now and now let's go ahead and run it of course nothing will happen because uh nothing will not we'll see nothing after five seconds later because we are not calling this okay so we need to call it so what you could do we can come here and call it over here okay would call it notify once again it doesn't recognize so what we'll do i'll just copy paste directly from here okay and hopefully it should work okay so now let's run it okay looks everything is okay click on it this is the immediate notification let's see if we see another notification yes that's the notification five seconds later it's working right yes perfect now we'll see another one soon perfect so our notification is working perfectly and well if you have problem with android you can contact me on facebook or on youtube or on my twitter so i'll try to help you but the way we did so far it should work both on android and ios okay and if your android doesn't work you can always come and check solution over here because i'm updating this page all the time okay okay anyway so next we'll see we'll create a okay we'll create ui like this and we'll create task and task will have timers a certain timer happens or the certain time appears based on that we'll send notification to our user okay

Channel: dbestech

Views: 11,943

Keywords: flutter local push notification, flutter get storage, flutter dynamic theme change, flutter light and dark mode, flutter local notifications, flutter notification, flutter change theme dynamically, flutter ios and android app tutorial for beginners, flutter iso and android push notification, flutter local storage, flutter app development tutorial, ios and android app tutorial for beginners, flutter tutorialj, flutter scheduled notification

Id: 2L8maZUY2hU

Length: 67min 37sec (4057 seconds)

Published: Sun Sep 19 2021