Flutter Local Notifications & Sqflite Explained Step by Step | Part 3

[Music] [Applause] [Music] hello everyone assalamualaikum and this is the third part of this series and so far what we have done here in this tutorial well we have created this task controller and this controller is responsible for having a list and having some values that user creates from here and then we created this method called get task and which is responsible for getting all the values from our database and save it in a list called task list which we declared early and at the same time we have created this database table over here so our table name is a task and the database name is task.db but of course they don't have to have the same name they can have very different names and when we initialized it we created this table and after that we have this two method insert and query so they are related to the method in over here in our task controller which is add task calls insert and get task calls this query method okay now of course those two methods are here they are get called from our home page okay all right now we are back to our home page so so far we are able to create a task and save it in the database okay so now it's time to show them on our home page over here all right okay well now to do that first we'll declare a method over here and we'll call it sorry um we'll call it show tasks all right now we'll go ahead and define the body for this okay we'll do show tasks all right so now whatever the records are in the database in our sqflight database we want to show them over here in a scrollable manner okay yeah so we want to wrap everything inside the expanded widget okay so we do return expanded all right okay now as we're returning we can return over here this one uh well it takes child right okay now this child would be pretty special because our expanded widget would contain all the values from our database in a list like this but those lists are observable which means those list will have state because those lists are saved in task list as we saw earlier okay yeah so now because it's observable so what do we need to do we need to wrap this list whatever comes from here inside and there's special keyword in get x that's called obx all right now you should use obx around your observable variables okay so our observable variable variable is task list so that's why we are using obx but of course obx wants you to return something okay so what we'll do we'll return here a widget and we'll return here list view dot list listview.builder okay all right and a text function over here okay and first it takes a container but we are not passing anything and now we return like this okay as we are returning we need to use semicolon uh and of course over here you also need to return for now we're returning null okay uh anyway so here we do have three return statement which could be scary for beginners while the first return returns the widget over here do remember that column takes children so this expanded is columns child so we need to return it and now obx also wants you to return things okay so that's why we need to return obx could return anything in our case we are returning the widget okay now this is another function inside list builder of course list builder if you have a function you also need to return otherwise you won't get the value whatever happens from here so that's why we have this three return statement but it could be scary for beginners though all right now over here instead of null we could just simply do container okay yeah returning a container say with say 100 and height say 50 and say color colors dot gray or green all right so that's what we are returning just for now we'll change them very soon okay so over here now the list builder takes number of items so how many items we have so we need to use the property called item count now previously we declared a controller variable task controller once again this is coming from over here this one task controller okay this one is related is simply this one okay so initially instantiated an object which is a task controller and because of this would be able to access all the underlying properties or fields so we want to access this one task list do remember task list contains all the values from our query okay so now let's go ahead and access the property which is called task list and now we want to access the length of it okay so whatever the values are there would be accessing them all right okay and now so they do contain uh values okay so what you could do now uh [Music] we could go ahead and create a print statement okay first we want to see how many items are there so just to simply go ahead and do it you do this one okay so we can go ahead and print and let's see what happens and uh while it did print seven well i created some for test purpose though anyway uh but they're not very obvious so what it'll do we'll create a margin it adds in the instance bottom 10 and let's go ahead and we'll see that we have the separated spaces now so this also means that we have seven items in our database anyway you're gonna create more actually i did more just for test purpose now we'll create one more and we'll see something weird say test and just put it there okay no this is still seven right so it didn't get updated automatically now that's because uh it has to do it over here now let's go ahead and find this button where it says add task let's see okay this is the button so it takes us to the task page and that's it and then it returns but we don't want it to happen like this so well we'll wrap it around a second bracket over here this one and let's say yeah this one okay and of course we need this one semicolon and here we'll await okay wait until this returns okay now if your function has a weight we learned that we also need to use a sync modifier so here we need to use a sync so now the error should be gone so until it returns we await here so as soon as this returns we want to create uh not create we want to refresh the list okay the list with the one we have here in our controller this is the list so in flatter get x if you have a list you need to refresh it to get the new value and to refresh it we can just simply call this one okay so why we need to refresh it let me tell you because every time we create this one actually uh instance in our database i guess it still stays in the database it doesn't update automatically this one okay so that's why once we call this one what happens it gets all the query again and put in the list and replace with the old one that's what it does when you do assign all it replace the old one as you can see replaces all existing items on this list with the items that you get from here so when you create item over here it's just in the database table but it doesn't refresh our list so we so we'll call this one once more in return it will call this and once you get returned from this one it will update our list hopefully it makes sense okay so that's why we are waiting over here we click it and wait wait wait once until this task is done and then if the task is done it returns and after returning immediately we can call task controller dot task list okay sorry get task and so with this we'd be able to update our list do remember this one updates our list okay so now let's go ahead and run it one more time okay but of course uh this get refreshed that's why you see the updated one but now we will create one more once again one more again and let's go ahead so this is the newest one okay so now things are getting pretty excited so now we are able to read things from a database and now simply to be more to make it more interesting what you could do uh over here sorry let's find our show task method yeah show task over here simply we can create a child over here okay with the child and now here inside we can uh put the title of our each list when we create it okay so we'll access a using like this task list and then we can access each of the list in this list using index index is let's see i think i'm i'm sorry i'm doing it wrong it should be index over here not the context is this part anyway so i mean you can write context but it still work as index so now we'll access the property so do remember the first property of this object is a title okay now if you don't know where it's coming from once again now let's see this is the title okay id we don't need to access we'll just access the title now let's come over here okay so now let's see what's the issue so the argument type string cannot be assigned to the parameter type string so maybe you could do it to string and let's see and the error is gone okay so we are we what do we want we want to print out the title name over here just to make it interesting okay all right so these are the different titles that we had we can create one more so it'll show up down there okay and let's go ahead the last one okay right here too that doesn't matter okay so now our list gets updated automatically each time so perfect uh and another thing you need to see that it's too close to this top part so over here i guess we can assign a size box and we'll do height say 10 and it should be better okay now it's much better but now anyway so it is working though but there are too many of them so first we want to do we want to click on them and remove them okay all right so that's what we want to do uh so to do that we need to come over here our task controller okay so over here we'll create a new method um we'll call we'll create a new method over here okay so this method would be responsible for deleting okay so we'll call it delete okay okay now this one would once again call another method from dbhelper okay over here okay but there is no method like this so we do static we'll call it delete method and we'll do it okay so now from here we want to pass an object so how to delete that uh so let me walk you through the structure over here for now we'll wrap this around a container which would be say for example wrap it around the container and we'll call it gesture detector this one and we already know that gesture detector takes an event on tap event on tap okay all right so we have here this on tap event okay now onto the event from here uh we'll call this uh taskcontroller.delete method so we'll call taskcontroller.delete okay now as you call it we'll pass this task instant over here so instance so we do index so it'll take that it'll take this let's see what's going on here okay so it'll take this instance based on this index and then it will call this method delete in task controller which is this one but of course it's showing error because we are not passing any argument so we need to pass it here so we'll grab the task task so we are passing an object of type task and the object name is a task of course you can name it anything and now the error should be gone so we are passing an object to a method delete method okay now we'll pass down this method sorry this object to the method over here over here okay so it's the same as this one over here as we passed object and received over here we need to do the same for this one so we'll call and we'll call this method delete and pass down the object okay so what we could do we could go ahead and call uh divi helper this one dot delete okay so we declared delete a static method so we can call the method using the class name directly anyway so here we'll pass this task object over here and now come here and take task task all right okay so now the error should be gone so what's happening from here once you click on one of the containers it will grab the object based on the index and then call the delete method so this delete method is sitting over here right to there so we'll get the task object now we'll pass it to the dbhelper okay over here so now we have access to the object that's being passed down from here okay so now we'll call our database instance object which is uh this one okay all right so we'll call db dot now it has also a method called delete so that's what we want to call okay now if you see hover over on it uh well first it's asking you to do a null check if there is no check or if it's null okay and then if you hover over on it you'll see it takes a string strings the table name and it takes condition where and the objects you also need to pass to it okay now first our table name is table name we created a table before like using this name for task so the table name is tasks okay all right so we come over here and it takes another parameter which is called where and here you need to mention the sorry where so you need to mention the i think it's called column name so our column name is id okay this is the column name and at the same time you need to use another parameter which is called arg where args and over here you need to pass down the id itself okay yeah so do remember every task object we created early over here okay they have an id okay so we are capturing that id in our over here from this object okay and based on that id we delete it but of course this id would be looked for this column so it will find the column id and look use that id to delete that okay now let's see hover over on it now it returns the future okay so if a function returns the future you need to use a weight keyword instead of in front of it and then you also assign a sync for the caller function okay now the arrow should be gone okay so now let's go ahead and see the procedure so over here we are calling the delete method delete method is here over here and then we call over here this one okay all right so now what we'll do uh we'll go ahead and run it and we'll see if we have error or not okay so just now we saw that each of our container over here is wrapped around this gesture detector that means we'll be able to tap on them and delete them right okay so let's go ahead and tap on this one okay so we tapped on this but nothing happened so here most probably it's it's got deleted all right okay we can do a printing statement over here now if you come over here you see okay now here here it says that it returns in once the delete operation is done it returns in and what it returns i do believe it returns that number of ids has been deleted things like that so anyway so we'll we'll we'll see what it returns so so over here we'll use the return statement return okay now we'll come over here and we'll put the value in a variable ver uh val okay and we'll print val okay all right let's go ahead and refresh it okay all right of course that's gone but it didn't refresh automatically now let's click on this and instead of future so it does return an instance so it does return something but it doesn't return error though okay so now it doesn't refresh it doesn't get refreshed automatically so the old problem is here so we need to get we need to refresh the list immediately okay taskcontroller.gettask using this one okay so now we launch it let's see so that is gone but now if i delete on this click on this it would get updated automatically it doesn't matter where you click it doesn't matter where you click it it updates our list immediately so isn't it exciting okay well of course for now we are not going to use this gesture detector okay it was just for the demonstration purpose because i think we are all excitedly waiting for this interesting things to happen so what i'll do i'll keep this section container and i'll uh delete this part and this part over here and everything else let's see it should be good and i guess it should return uh it should use a return statement okay uh by the way in future uh later down this road we still need this delete method so we can still keep it here we don't need to delete it because sooner or later we are going to delete them anyway so you need the delete method so for now it looks cleaner okay all right so now let's go ahead and run it make sure things are good okay so now we are successfully able to [Music] access the data in the list okay now this is not how we want to present them we want to present to them more beautiful way okay so to do that we need to install a plugin uh let's see come over here to your project and come to this pop spec file and within the spec file over here uh i already have installed this one this one okay so if you don't have this plug-in go ahead and install it okay just do pub get and you should be good to go all right so now here instead of directly returning a container instead of container we can return a staggered animation list like that so what i'll do we'll just remove this one and we'll return animation animation configuration configuration staggered list i guess this one okay all right so it does take child and the position and now the position is the index okay well it tells you where to start from so you're gonna start from index okay and now child over here will use another widget inside staggered animation list so that's called slide animation okay all right now slide animation also takes children so we'll do here child now here within it would fade in animation okay all right let's see and fade in animation of course text child otherwise it will show you an error sorry okay now within child we'll be using row and row text children we already know it okay now within row we'll have gesture detector let's see yes we need to have this one and we within row now we'll have gesture detector okay so gesture detector takes on tap event and for now we'll print tapped and the other one is a child now child here i'll pass task tile and we'll pass the instance so copy paste this one over here and we'll grab the index and then we'll pass the will pass the in instance related to that index okay now you may wonder where is this file coming from actually this is the file over here and i already have it in my widget folder task style this one now i'll put the file this file the complete file uh in the video description below so you can just go ahead and copy paste well i'm not going to work on this file here yet because this is more like the ui so i don't really want to touch the ui part so i want to more the logical part and the dart part okay so just copy paste to this file in your widgets folder over here okay and then from here you import it okay then you should be good to go now let's go ahead and run it now we see a beautifully presented list okay so that's all happened uh due to this staggered list okay of course you can do it many different ways i just wanted to use this package okay and it sounded very it looked very convenient for me anyway uh so now we we have these things over here okay so the next thing we want to do we want to tap on them and show up a bottom from down there okay yeah so that's what we want to do to do that first over here we'll declare our method over here we'll call it uh show bottom like that okay and within it we can pass a task object and the contest so we'll pass context and let's see okay and we'll pass a task object okay all right now the this function is not there so we'll go ahead and create it so we'll call it uh show we'll call it over here show bottom all right this one and it takes a contest so the context is build context context and it takes an object the object type is a task object okay so once again so this is over here now what is this task actually we can grab the object from here from the index okay yeah and then the arrow should be gone now once we click on this one over here we want to pop up a container with the options okay so that's what we want to do before we go ahead and create the bottom shade first take a look at this idea that what we are going to do so once we want to click on them any of them so they will show as this uh bottom sheet over here okay so for example say if i click on this one we would see this one and i will have two states uh options either i can mark it as task completed and or delete okay well if i marked it as a task completed actually i'll be seeing next time when i click on the completed task i'll see this one okay so from these two pictures you understand that this height of this bottom shader changing based on your status and condition okay so that's what we need to keep in mind yeah so this height is dynamic height all right okay now let's go ahead and start to create this so to use the bottom sheet we'll be using once again get x so to get bottom shift this one okay well it does take a lot of thing but we'll just pass a container to it okay all right now let's see here we need to put this thing okay yeah now we want to create a bit of top padding over here as you see over here okay so that's what we'll do you do padding and const ads inside top four top four four pixel and now the height okay all right so we want to get the height from this uh based on this task object okay do remember that in a task model we have a status of our field which is called is completed okay so we'll use this one in general this is false false means zero actually i think when we created the database somewhere here let's see boolean integer let me see oh yeah i think it's an add task over here is completed is zero so it's a default value is zero but once you click task completed it becomes one okay so we have to access that value anyway so what we'll do we'll do the task is completed and it will check if it's one then do something otherwise do something different okay now if it's one which means if it's one which means the task has been completed what does it mean say for example i click on this one and it pop up this so i'll mark it as task completed so next time for this one we'll see something like this it will have this completed this tag over here okay otherwise it will be in to do okay so which also means that if it's completed one we find it we don't need to really show this option anymore like if i if i were to click on this one you don't see this option anymore okay hopefully it makes sense okay now uh well now we need to get the height of the screen and use certain part of it okay as a proportion okay so we can get it easily because we have this context object over here so we'll use media query me media query dot off we'll pass context okay and then we'll get the size object and then we'll get the height object okay and then we'll divide it by say 0.24 okay if not well then we'll use this one okay if it's completed otherwise we'll use a different size otherwise so we'll get it from here and copy paste over here and instead of 34 24 we'll use 32 okay yeah so once again if the task has been completed the bottom shed height should be a little how to say smaller or shorter so that's why uh we get 24 otherwise it should be more than 30 percent of the whole screen okay so that's why divided by three two well you can use any number so it doesn't matter though so now let's go ahead and run it okay all right now we click on this well of course it doesn't show up yet i mean it did but we need to change the color okay because this is within a container and we don't have any object i mean nothing to show so that's why it's a bit uh dark and transparent okay all right anyway so now let's go ahead and set the color to set the color we'll first check it if it's a dark mode or if it's a green i mean light mode if it's dark mode we'll use a color from here let's see okay let's come over here and come to this one with the dark mode we'll use this color okay so let's come over here and we'll do this otherwise we'll do colors dot white okay yeah i think we need a comma here okay the error is gone now let's go ahead and run it one more time okay now let's click on this and it showed up okay perfect now we can do the check for dark mode i'll click on this okay so it is like black color things like that okay yeah but if you are not happy with the two black colors so we can we can change it anyway we'll do that later but it is there you understand it okay all right let's change it back okay that's perfect okay now from this picture we do we do understand that um here we need uh this thing now okay okay so how to do that uh and how to do this thing so all of them will put them in a column okay in a column section so now let's go ahead and declare child over here and over here first we'll write column and it takes children okay now the first child is this one so we can do do it with simply a container so you do container and we do height say sex with 120 and then decoration box decoration okay all right now we'll do border radius border radius dot circular dot i mean 10 we'll use border radius 10 and then we also need to set the color once again we need to check is the dark mode or light mode so is if it's dark we use sorry color i'm sorry for the type of colors dot gray this one you will use 600 otherwise would use the colors degree 300. okay now let's go ahead and save it and see all right it's restarted now okay here we are with this okay well the next thing we want to show is this this buttons but now regarding this buttons we want to create reusable buttons okay uh so first we need to define uh our buttons um how to say properties and parameters okay so what are the things we want to do definitely the first thing the buttons will have a label okay so now what we'll do we'll go ahead and first write the function body let's go ahead and see so we'll call it the bottom shift button like that okay now as i said that it will be reusable that also means that we need to pass parameters to it okay reusable so different places will use different parameters okay and a lot of the parameters would say more like optional so they might also have default value so within curly braces that means optional okay and some of them are optional some of them are required anyway so now here definitely whenever we call this function from somewhere we need to pass a string so we'll call it label okay what else you want to pass so this should be clickable okay so by the way once again the label is this one okay so we want to pass an ontamp uh on tap event so that would be a function and what else we want to pass let's see we want to pass color so here you see each of them they have a different color so we want to pass a color object and what else i think we can also pass a default condition so for closing it okay so do bool is close call false okay now let's see okay add a required required and required okay so that's what we want so now what we'll do over here we'll find a place to call this button okay now over here once again uh first we need to check before we show this bottom shade that whether the task is completed or not why because once the task is completed the height is different okay as we saw all right so let's go ahead and check it so do task dot now once this task is coming from here if you're not following so task is completed equal one okay if it's one then we just say container so here we won't show anything okay we won't show anything so it would be an empty container otherwise okay we'll call this button over here and it will pass those parameters to create a reusable button for us so that's what we're going to do and now here we'll pass parameters let's see because you need to pass parameters that's why it's showing error anyway so first we want to pass the label so for the first one the label is task com pleated well second one is an ontap function now here so we do few we want to do a few things definitely the first one we want to do uh we want to close this or i mean once over here let's come over here once you click over here it should be gone right back to this page once again you click any of them it should be back to this place right so that's what we want to do so we'll use get dot back okay that's one and the other parameter what else we can send let's see we'll also send the color object okay yeah so clr and we will use the primary color for this primary clr this is coming from our theme file primary color is this one bullish color so for this one it would be our background color and we are using primary color and well now is close uh this one for now it's false we are already setting is at default okay so we shouldn't be worried about that one okay now we'll go ahead and define the body of this each button but do remember each of the buttons will be clickable so our container be wrapped around gesture detector so first we'll return gesture detector okay and here of course it takes on tap event and we'll put here on tap okay all right and if you do get error after putting on tab so just try to put this uh bracket here and the arrow should be gone that happens because of null safety feature of dart dart sdk anyway so now we'll go ahead and draw this container so definitely it would be within child we do container okay well now you see these two containers they have this white space here so we'll do margin over here okay and the const add inserts and it would do symmetrical okay and we do vertical vertical four so because of this one top and bottom each of them will get four so total eight pixels okay vertical means top and bottom so bottom for this one top for this one anyway now let's go ahead and we also want to do a height over here height 55 yes and now with now we don't have access to context here so i think we also need to pass a context from here so we'll pass a context we do context context do you remember uh we can access the context [Music] over here so we can pass it to the next one now over here we'll grab the context we'll call it build context and the context and the arrow should be gone and it might ask you to add the required keyword okay perfect so now we can go ahead and get our width so we can do media query dot off context and then we can get the size object and then with object and now we don't want the complete width of the screen we just want to 0.9 which means 90 percent of the width okay great now we also need to define the color of this background okay now over here for color we need to do a lot of check uh do remember that like we have three buttons here if you see carefully this is the same as the background color so uh we need to check whether we are creating the button for this closed section or for the upper one and that's why we have this one over here is closed if we send from here say is close true then it means that this button otherwise whenever we call it default value is false and that is for those two upper buttons okay so for now default value is false anyway we need to do a check so we do is close if it's if it's uh say close it's a true if it's true okay all right say for example uh we can use a colors dot red okay otherwise whatever the color we sent that color will use so that is clr okay all right color yeah let's see why we get this error okay there's probably this one over here now let's see condition oh sorry i think i made a mistake here it should be this one okay now this error should be gone and at the same time what you can do we can come over here and let's see okay and what else we can also do border color sorry so so it's a decoration i'm sorry and the box decoration okay and box decoration as you see this one will have this border color right so that's what we need to deal with so we'll define a default border width which is uh border border dot all okay and now we'll define a width over here say two now whatever the color now once again this color should be same as like the way we did conditional check for those two all right okay so once again here if you do color now check the color so once again we need to check if it is true or false okay so is close if it's say true then we'll use say colors dot red okay otherwise we'll do uh otherwise we'll send the color okay whatever we'll use the color that that's been passed down this one let's see the error is gone now the other thing we could do we could also assign border radius i guess okay so border radius border radius dot circular 20 okay so so far we have this one and let's see i'll go ahead and run it and uh looks like we have an issue here this one i think that's been imported wrongly so we don't need this one we'll just remove that now let's uh come over here yeah this section this section over here okay so now let's go ahead and run it and see if we have a header or not okay well it looks like no error so you're good to go let me close this one we don't need this now let's click on this one and [Music] it does have okay well i think that's a similar mistake i made so if you have box decoration you don't need the color outside uh you don't use the color inside of this box decoration okay so we can put the color inside for now sorry uh let's go ahead so we'll just cut it and we'll put it inside so now let's go ahead and see okay perfect so it already showed up over here right the button now it's too close to the top one i think we can do a work on this so let's see over here we can put a spacer so spacer let's see okay now let's go ahead and run it okay so while it came down because it's taking all the available space but that's okay for now all right yeah it doesn't matter though so over here we pass this one this uh bottom shirt you can pass another one for the next button so we'll do just simply go ahead and copy this one and put it over here and before we put it we can create a sized box over here we do size box and say hi 20 and now over here we'd say delete task okay now this color we don't want a primary color maybe we can send something red because we are deleting so we do color dot red say 300 [Music] let's see what's happening the argument call can't be accessed okay i think you put it in null checker and the arrow should be gone this is because of again null safety of new sdk all right now let's click on this okay so we have this two that showed up okay and what else [Music] okay now so far we are good now how about this text over here okay so we are passing uh over here the text like the label the string over here we can also pass it down okay now we can pass it as a text of this container so as a child okay so we'll define it over here so we do child and then we do text okay and the text the string should be labeled okay the one we have already okay now let's save it and see the result and you need to restart our app now let's click on this yeah it did showed up now there are a lot of other issues the first we can center it so wrap it around center widget okay now the style for this so now we'll listen style to it so you do style and once again we'll do is close check is close if it's close okay that means if is close is true that means this button otherwise it's for this button okay all right if it's closed then we'll apply the style title style this one once again this is coming from over here this one in theme file okay this style will apply otherwise we'll apply a different style okay all right so we do title style this one dot copy with now inside we do color parameters so colors okay so well now this could be new for you so we are copying all the style from here but we want to assign a different color for this sorry so just the white color so whatever the color was there don't use that use the white color so that's what it means okay so you copy this style object and then just change the color within it otherwise keep everything else the same anyway so now we'll go ahead and run it let's see now let's click on this yes perfect so while it's already looking much better right okay so what else we could okay well next we could create another button that would be the close button the one we saw over here this one okay this is the close button that's what we want to do okay now come over here where uh over here okay so [Music] let's create a button and over here we'll call once again we'll copy it and over here right close guess what and another thing regarding this one so is close so we'll pass this time is close true okay all right now let's go ahead save it run it click any of them well it did show up so this is the delete task and this is the close one okay now uh we are a bit different from the original style we sorry so we need to change them okay now definitely the first thing we can take care of the space i guess uh instead of putting the space here actually we could do the space here i guess okay and to see the result i think we still need to restart it anyway so now it's looking much better and at the same time as at the bottom too close to the bottom so over here we can also do size box and we do height say 10 and let's restore it yeah i think this is much better okay a few other issues that we need to take care right now uh let's see so first the uh over here let's take a look at our task okay well well definitely we can change the font size as well so we don't need to do that for now okay i'll leave it up to you but it's a bit different over here like this one so text style and the background colors but we don't want the background color to be red we want it to be white so that the text is black okay now where to change this thing now definitely we can change it over here okay over here so now here so if it's true as you can see if it's close is closely called true you're using the red color but here we don't want to use the red color okay now maybe we can use a different color let's see yeah so this is the background color so what can we say for example colors dot transparent i think that's better okay so now let's save it i think we need to rerun okay this is much better but now the background color so the border color issue okay now border color is over here uh we don't really want a border color of red we can do any color but now do remember that we have this different mode right so we also can check is if it's dark mode okay so we do get is dark mode so if it's a dark mode okay so we want to use colors dot gray so 600 if it's dark mode so it would be more like i guess more white or close to white okay otherwise would do colors dot gray 300 okay yeah and of course it's being cranky it's once again for null safety issues so here you just put one exclamation mark and the arrow should be gone now let's go ahead and check it okay now over here we are so it's looking perfect okay uh well that's okay now let's go ahead and check it against our different dark mode so now over here yes so it still gets the background color and it keeps the text color as white okay i think that's what we wanted so so far we are good over here so now this section if you don't understand what's happening here so it's a condition inside condition okay if it's true if it's true then we fall back to there's a whole condition a whole section over here okay this one otherwise we fall to the color that's being supplied and of course inside this we check again if it's uh uh dark mode or light mode okay that's you need to chop because this background color okay because if it's uh dark you want to make it dark as well not really white otherwise it'll look ugly anyway so this is much better now okay so of course uh the next thing you want to be able to click on them and do something okay all right so let's go ahead and find those buttons so this is like for example this is the later button okay so right now it's taking on tab event but if you click on this it just go back okay if you click on this it just goes back all of them they are doing the same thing okay now the first thing we could do and which all we already have done before delete once we click delete so we want to be delete and then go back okay so do remember early we have created this method called delete task so simply we can call this one passing a task object okay so now let's go ahead and come over here so we'll call it from tasker controller dot delete and simply will pass the task object okay now this task object is coming from here if you didn't know now things are getting excited so let's go ahead save it and run it so let's click on this and we delete this let's click on this one more time delete this while it looks like it's not being deleted or is it now let's go ahead and run it from the beginning well it's it's got deleted but after deletion it didn't get refreshed so we have this old issue like getting refreshed and things like that okay so now over here we want to refresh it automatically so one thing we could do um before we go back maybe let's see we can call this get corey over here which one let's see over here so once we delete it whether we can call this one or not let's try to do that i would call don't get tasked this one okay okay perfect let's go ahead and delete it yes it got deleted automatically let's go ahead and delete this one so we can build all of them now let's go ahead and create a new one let's say flatter the best mobile frame work okay and say i'll do it daily and i'll use a different color and well for now the time i'll still keep like that let's go ahead and create it and it showed up immediately okay perfect okay now i want to delete this one let's see if we can yes we did okay so of course we can go ahead and delete this but now the other thing we want to do we want to update this status so once we click on this one you want to mark it as a task completed and it will show show here that task has been completed so that's what we want to do next update our task over here first we need to come over here our db helper and over here we need to declare a new method and we'll call it update method and this type is static and we'll call it update and over here we'll just receive the id of this object and then you should be good to go okay now here we'll call db dot update while we have update and we have raw update so we'll use the update over here okay now with raw update you need to send a string so you need to write the what is it the sql within the string itself okay yeah now here okay so you need to have this this three single quotation together okay and let's see um well we need to do a lot of other things don't worry that the error will be gone anyway so what we'll do here we'll do now we want to update the table what's our table name our table name is this one tasks so we want to update that table so that's what we'll write here we'll do update tasks okay and now we want to set a certain column value okay so you do set is completed okay and then we do wire that's the condition to check where id all right and then over here one and id okay so let's see over here so add a null check and let's hopefully the error should be gone so what's happening here so we are writing an sql string and over here you need to write it using this three single codes at the beginning and almost at the end and now here you'd mention the table name and what to update or set like that now those two values would be coming from here so here we want to set this field in this table uh this table the field we want to set this fill to one and then we want to update a certain id or certain row so this id is coming from here and we'll pass it down okay so we will update the certain the specific id with the row or the row with the specific id like that okay so we are good with this and now here we need to return and we could do await all right a returning is not compulsory i think uh but you could do it anyway so async because we are doing avoid an essay so now this is the method now this method would call from task controller okay okay now we'll write the update method over here and we'll call it say for example void mark task completed okay we can do like this and it will take an integer id so first it will get the id from here so as a parameter and then we'll from here we'll pass it to this one okay so we'll call dbhelper dot update okay all right and that's it okay so now it's better you do a weight and a sync otherwise you might not get any result because updating might take time until then you wait and when it returns that you return as well like that okay so this is the method name okay so once we update okay uh well now we are done with this actually all we need to do we need to come over here somewhere and call this one pass down the id and from here we pass down the id to over here and it will update and return so now here so we need to call this method so we can call it from here because task completed from here so before we go back we want to call it so here we'll write uh call the method so we did task controller dot mark completed and we need to pass down the id and we do task dot id this one okay and because of null check i think you need this one once again this kind of thing depends on your sdk version okay all right now it should be good we should be good to go so what do we could do right now um i think we can just go ahead and run it and see see the result okay well i think if we update it we also need to update our list just like we did here so this one now i think we can move this logic inside the function itself so here we can just call get tasks this one okay and the same for delete task so we can keep all the logic together in this controller so from here from delete we don't need this anymore so it's inside the delete method right now and the same for update so what we'll do so we'll just go ahead and refresh and run it one one more time okay so now you click on this it will show up and now let's try to mark it as a task completed and now it showed it as completed right now if you clicking again right now you can only delete it okay no other status for this one perfect we are doing amazing so far okay all right so let's go ahead and create another one so next one we are doing good and over here we mark it as daily and i would use a different color okay perfect now we have this options over here so i'll mark it as complete now i'll mark it as delete and it's gone automatic okay perfect so so far everything is working so perfectly so if you have any questions leave comments below anyway uh so now what is what is the next thing we want to do we want to do the next thing is that based on this time we want to get a notification like the beginning time okay so that's what we want to do next and create uh this notification uh based on time i think we need to rearrange some of the stuff okay first we want to create uh this notes this list over here based on date but now as you see it shows up everywhere but of course because we assigned it as a daily so that's why it shows up everywhere okay so anyway so we want to see that we want to make a list or note a notification for a specific date and it showed up only on that date not in other places okay yeah like that so first let's go ahead and create one i'll say um a new new new project okay let's get the ball rolling okay now i want to do it say on the 22 okay and for now we'll say daily once again and we'll use okay the default color okay so here we go now so it shows up everywhere as you see so we we need to solve this because even though we just created this one for 20 second but it shows up on everywhere so well now why it's doing that because we are not doing any conditional check over here okay okay so that's what we need to do uh so here we once again we need to use a task controller task list but it's pretty long so what we could do we can um over here we can create an instance of task and we'll call it task and we'll get it from the index okay do remember that up to this here it's an instance of this task over here okay so now we have this task and we can access this task and properties within it so now we don't need this one anymore we can just simply write okay and sorry here because we are passing the instance and let's see over here is the same we are just simply passing the instance and we should be good to go okay let's go ahead and run it make sure we are not breaking anything okay cool all right now we want to render over here conditional block okay so now how do you do that okay now let's look at some of the properties that we have in our uh model so this is our model right but of course if you try to go ahead and print it you'll see it's an instance of uh it would say it's an instance of let's see instance of task so it becomes this is coming well from task models so this is an object or instance okay so look check out my other flatter list my tutorial you'll get better idea that why this is an instance but anyway so if we want to access some of the properties in it so we need to convert it to json so that's what we are doing it but of course this method is described in our task model over here to json if you are following along from the previous tutorial so we are doing that now over here now let's print it okay and let's wait for the result okay so now we get to see that we have this few tasks over here okay and now we also get to see the uh column they have or the fields okay now here one of them is daily as you can see and we also have date so based on date and daily for now we can configure them okay yeah so we can now we know that we can access this uh properties like repeat that's equal to daily and here we can access date and date would be equal to certain dates like over here okay so we can access those properties or fills but anyway we will comment it out now so the first condition we want to check that if it's daily okay so you do if uh task dot repeat because you see uh over here um repeat has a value equal daily okay so we can access that one so we would say if it's uh equal daily that what it means it means we'll show it everywhere okay everywhere because it's daily so it doesn't matter which day it is so i'll just copy paste and put it over there okay and now let's see uh we have an error though what is the arrow let's hover over on it oh yes i think it inserted set state automatically for us we don't need this one okay so now that's for daily and we also don't need this one let's see daily yeah okay that's i guess due to such state let's see what else that's because mostly uh return okay don't worry we'll fix it soon because we have if statement here so the other one we could do is check the date okay so we can check the date so we do if so based on date like whatever the date it is sorry whatever the date it is we'll we'll show it based on the date okay all right so now we'll do we'll do task dot date yes if date equal date format format dot y let's see why md we are going to use this one okay this will have date in slash format because we do have date in slash format over here okay and then we'll call the format method and we'll pass the selected date okay let's see yes auto completed and now we come over here and another one will do else if it doesn't match any date then we'll do else okay well for now we'll just copy paste this one and put it over here because they're the same thing just based on date they would show the note and otherwise we'll just return empty container which means that it didn't find any match either based on the date okay but if it's daily it would always show everywhere okay all right so now so what is the selected date well the selected date is the first we declare at the top over here if you come at the top we declared this one but that was the current date but anyway we also did in previous tutorial if you come to let me see let's find the code at the bottom yeah i think over here okay add date bar over here and we had an option over here where user could select the date okay so based on date selected it will change the default value the default value is the current date like the one you saw earlier okay anyway now let's go ahead and check it and let's see if we can get it based on the date okay well now once again this wasn't the 22nd but it showed up on the 21st and so it looks like even if i select nothing works well that's due to because uh we're selecting the date and changing the date but we are not triggering a redraw so we can uh put it around set state so this will cause a redraw okay now let's go ahead and run it one more time okay yeah now let's see uh over here okay and now let's come back to our code the one we are doing early okay over here let's see selected date build method has been called because we are not supposed to see this one here yet okay what we could do we can just go ahead and print it that whether everything is okay all right so there should be one on the 22nd and over here and there was also for daily but on 23rd it should not be there but it is still there let's see what's happening okay that's because as you see i think we also marked it as daily okay so that could be the problem all right because it's uh 22nd so it's uh it should be showing up here but it's also follow the first condition okay so this is the reason i'm sorry for the um what is it the silence i i forgot that i marked it as daily so what we can do um we can just uh try one more time let's see uh another shot okay get it done all right and now here we'll do say 23rd and i'll do okay now here we'll select none okay we don't want to repeat and we'll use a different color and now here we go yes so that means if we go to 23rd that would work because we didn't select daily so on 23rd we see that of course we see all other two as well because those two are for daily okay but 24th that's gone all right so perfect and 21st it's not there 22nd it's not there it's only for 23rd amazing so it's working uh well sorry for the getting lost over here because i didn't notice that i select it as daily okay but hopefully it makes sense okay um what else okay well now so far so good uh and what is the next thing we can do next i think we can go ahead and start working on the notification based on date and time okay that's what we'll be doing all right so let's go ahead and start to work on notification and let's see the current status of a notification we remember that in the first part of the series we have built notification for this button over here so let's go ahead and check it out now this button should be let's say somewhere here in app bar so open it open up your app burst so here we have a test and on tap event and over here we have this two notification display notification and schedule notification this one happens immediately once you click on the button and this one happens after five seconds later so let's go ahead and check it out first display notification now display notification yeah this one so over here actually uh we have uh done some initialization as you can see from here let me wrap it around like this yeah for android and this part is also for ios and for ios pretty much you didn't need to do any setup for android most probably you need to do this setup otherwise you might get errors so you need to mention your importance all right and some descriptions but for now we are not showing them yet okay so those two together those two together like android and ios together we actually put in this notification constructor it's a notification detail constructor and then we send it to uh the built-in function in the flutter notification that dot show all right yes and of course here we have this payload as default sound actually it could be any string it's not really about the sound though all right yeah so that's uh uh for display notification once you click on this one all right and we also have the other one like schedule notification once again it's uh coming right down there so schedule notification pretty much is a function which wrapped zone notification all right so you use zone notification or sorry zone schedule for scheduled notification which means after certain time later you want to show it okay so that's where you use it but you can also pass over here as you can see some parameters so actually we can pass a lot more parameters and we'll see soon okay so now with this this one a scheduled notification uh it's uh right now it's fixed okay like five seconds of course you can do 10 seconds even you can do minutes that doesn't matter uh well now okay we'll go ahead and use this one we'll try to use this one based on our date okay and the time we will want to see uh based on time how to show our notification okay all right now uh well before we go ahead another thing though just i wanted to tell you if you forgot what happened early so here definitely you need to initialize this function which is called initialize notification and it took settings for ios android and then we wrap them together and create initialization settings for devices and then we use this object to our actual notification one okay so which is called dot initialization dot initialize method okay so you should have a good grasp on this right now and it also takes a callback function so for this one you can define any function and the function body later so if it makes sense to you okay well so those are down at the beginning in our first series i believe okay all right so now our focus is how to show this one based on time for this one we need to come over here uh well of course it's there so we'll what it will do we'll just comment it out we don't need it now we just want like once we click on this only one notification and um this is that one and we'd be happy uh so but based on time if we want to show the notification we have to come over here uh in our obx uh what is this from get x actually let's say i guess it's a class anyway so here we do this uh configuration okay uh so we are doing the conditional check so before we return our list so over here we can try to schedule the notification based on this time because uh over here we are doing for daily and over here we are doing for based on date so anyway so now here we want to uh do this well previously we tried to print out this law i mean this information using this print method and now if you take a look at carefully you'll see that it is uh it's a json format right and it also has start time and end time okay so well our first thing is to get the start time because when the time arrives we want to put the notification okay so that's what we want to do so let's uh what do we do now let's go ahead and well we need to reformat this time because once we want to send this time over here over here definitely it takes a number as you can see integer okay so what we need to do we we need to strip out this section okay and of course you also can't send this one directly as you can see over here it takes duration so in like in days hours many seconds manage so this one is pretty much like an object so you can't send this one so what do we need to do we need to uh split this thing okay so that's what we are going to do now so anyway so from this task object we can access the start time right so here well as you can grab this now we'll be able to grab this from this object so what we'll do we'll create a datetime object first datetime and we'll call it date and we'll get it like say for example uh task.start time okay well now here task that start time is a string object or it's a string okay so we need to convert it to date time object and that's why we'll use a special function called parse okay date time dot let's see jm sorry it's date format dot jm this one the second one and it is a function which is called parse p-a-r-s-e and you can see it takes a string and we'll put our string there and we'll convert it to string okay yeah well it depends on sdk version in some sdk version you don't need to convert it to string anyway it's already streamed but it's a different sdk version they handle it differently anyway so now it's date object over here daytime object okay it was previously it was string now it's a date time object okay now we'll declare a new variable we'll call it my time and now over here we'll call date format okay and now this one over here you can actually pass the format so we pass the format hh means hour and mm means minute okay and now we'll call format function and we'll pass our data object to it okay so all we did here we grabbed the string you formatted it to date object one more time and once it is a date object you format it to this thing okay all right now what let's go ahead and try to print it okay now we'll do that okay now let's go ahead and print it and see the result okay so now as you see it gives it gives us time but it doesn't have this am okay all these things we did this operation all because it has this am and pm next to it okay but when we want to pass to our notification service over here we don't want you we just want to pass stream anyway so we're good with this okay but now there's another thing that we still need to split it okay before we pass it because now this string of course we can't send it here as we saw earlier it just takes integer anyway let's come over here so over here we'll call my say notify service notify helper this one and the function is called schedule let's see let's see this what is it scheduled this one so we'll call this one okay and but now the thing is that currently it doesn't have any parameters so we want to pass parameters to it to pass parameters so let's go ahead to this function over here so we want to pass a few things over here we want to pass hour so that would be as end we want to pass minutes that would be as ends and we also want to pass the task object okay all right uh why we want to pass this let's see okay anyway we need to import it because we'll use other information from it anyway so let's come over here now definitely we need to pass the parameters so before we pass this one we we need to split it one more time okay so what we'll do we'll do here say int dot parse okay now then we'll access this one and then we'll convert it to string make sure it's a string once again and then we'll split it okay and we'll split it based on this thing this i think they call it colon i guess okay and because it would be the hour so we'll use the first index from it so we'll do zero like this okay perfect now we'll do the same for minute because once you split it it's still a string and because of any purse it becomes an integer okay now we split it one more time and we get the second index okay and after that what we'll do we'll pass task the object okay yeah all right okay now let's go ahead and save it and let's make sure everything is okay all right no errors okay now as we can and now as we can grab this thing over here as we can grab this thing over here uh we can just try to use it directly okay so let's go ahead and use say for example uh well a minute say for example just past minutes over here it minutes is the number so it really doesn't matter though okay now here we'll have error as you see okay uh well evaluation of this constant expression throws error okay so that's that's very interesting or like for example say into new time and here we do minutes okay and from minutes we pass a new time it doesn't matter we pass time minutes or hour or seconds but now here's the problem okay regardless what integer you pass you can't really pass uh uh how to say a variable here because this is a variable all the only thing it takes here in this part in this function it just takes a integer okay you can't really pass anything else even say for example you pass five here so now you try to write here new time and you will get error okay so that's the problem that you should know about uh zone notification when you try to use the variable time not a constant time so that also means that we want we the value passed down from here we can't use it okay so we may use it for constant but not really for variable time okay now so if you ever have problem come over here okay here i do have a lot of listing about this notification how it should work okay if you can't follow the video you can come over here and read them and over here personally when i was doing this uh tutorial i wrote them down and i'm also constantly updating it has more information than the video itself as you can see okay so come over here and try to search for your problem and hopefully it would be very helpful so from the top you can just click on any of the items and you should be able to good to go okay so this is the number nine one and say for example uh you wanna know how to initialize so come over here so we i talked here about initialization things like that anyway so that's this link you can save it and come come down later and read it because i'm always updating it if things are different video i can't really update all the time right anyway so now let's come back over here so now this is a problem for us so how do we solve this issue so we need to declare a new function definitely i mean new function over here and we'll do some process okay well as you want to go ahead and declare a new function for this to replace now let's take a look uh at this one so this returns uh tj um datetime object and over here well if you look at this one it also returns a teaser time object so that's what we need right okay now over here let's go ahead and declare a function and we'll call it convert time that's all we want okay now we'll comment it up for now we don't need that you only need for instance uh uh time and the notification like that okay so over here we'll go ahead and create a body of this function but just now we saw that it does return a teaser date time object so we'll do tj uh it is a date time so that's what it returns and now we'll call it convert call the function convert time okay now here of course we need to return all right the function name is okay so now let's see so definitely first we need to create an object uh we'll call it teasing.tj.time let's see we'll call it now we'll get the current time it is it is time now and okay now here things will get interesting so what it does it takes a local object so i think it has to do with the local device and things like that and as well as the location okay so that's what it returns uh from from here so based on the local location i would say it returns a current time object okay things like that but it's not i i don't think there's a normal current type object it'll be much more a complex object anyway so it does return something has to do with the current time okay so we get this one once we get the current time we can use this one inside this okay well so how to use this so now let's go ahead and create another object it is a visited time and we'll call it schedule date because this is what we want to return ultimately but you can call it anything you want okay now over here it is a it is a the time on the over here first we'll send the teaser.localtime a local object and then we'll do now that year now that month now the day now here we'll have our parameters that would be passing down let's see passing down from here okay so we can pass this parameters hour and minutes so do hour and minutes that's what we want to pass so here we'll grab them and hour and minutes okay cool so now simply we'll just pass this on hour minutes okay yes and we need to put a semicolon anyway so now we'll return uh schedule date okay and the error should be gone so all we did we grabbed this time and we put it over here now over here we get a location and based on that location we get a time and we use that time so based on that time we change our end minutes i believe you can also change day and month but i haven't done the research on this you can do your own experiment so for hour and minutes has been changed because uh i changed like now that hour it does have a now that hour now that minutes but i want to replace them using my own time okay yeah uh so there is another thing that we need to do over here we need to check so if schedule date dot is before there is a function the now then we'll add a day to it we'll call it schedule date you call sorry schedule date dot add and it takes one const duration well now let's take a look at this function over here and the condition now first if you see the time over here burning wall wall fell is 1890 and moon landing 1869 so now they're doing a conditional checkup so it's burling wall fail is before moonlighting so definitely it's false because moon landing happened before burling wall fell like that okay so definitely it is false but now in our case we are getting the current time object here and we are also getting a time that we get from here okay but anyways so each time this f runs and it falls to this condition when it gets the current time this is definitely greater than this one so which becomes true it becomes true i believe what it does is automatically adds one day i think you can also add two days in that case i think it would have every other day that's what i believe from my understanding so anyway and after that it returns it and that's what makes it like schedule timing everyday uh notification things like that okay so you can do more research on this and i also have it on my website so you can go ahead and take a look anyway so now we should be good with this but we also need some other settings now here you take a look here it says that he's a local time where it should be coming from it should be coming from our local device but actually local device does not have this configuration yet okay even though it is it has no error but if you go ahead and run it nothing will happen so we need few more steps before we can see the actual notification now we need to configure our local time zone and we also need to get the location current location okay so what we'll do we'll go ahead and create a new function over here we'll call it a configure local time zone okay all right and here we'll create a string object final string time zone okay and we'll use a weight flare native time zone this one okay dot get local time zone this one so with this it will get the local time zone and it's asking us to use async modifier let's do it and just to make sure it does return something but it will written void future because it might you might need to wait before you return okay anyway so first we get the local time zone and we'll set it to the device okay and set it to the device for that location so that also means we need to get a location first so what we'll do we'll do tz dot tz.get location this one and we'll pass time zone okay we get the location and we pass okay but this we are getting and passing but we are not really setting so i will cut it and what i will do i'll do tz dot set set location over here we'll do it okay so what happens here first we have this time object which gets the local time zone and we also get the location for local location and then we set it inside this location and we set the location eventually okay so all it does it here is get the location and set the location okay and at the same time it also sets the time zone that's what it does i believe anyway so now we need to find a way to call it so uh well now another thing it they should go together which is called tz dot uh initialize time zones this one okay but we already did it at the top so make sure you have this initialized before you set the local time zone and before you go ahead and do this dynamic time convert okay you have to have this one now this function actually now we can call it from our initialization at the top which is i believe over here and we don't need this anymore because it's already included in this function okay all right and there's one more step to get the schedule notification that is over here so we need to pass another parameter which is called match date time components i believe so date time components this one.time so over here using this one you get daily notification based on that time but you can also do i think it's called weekly yeah like this one so it gets for every week certain day and certain time but for now we do just time okay using this time you can just get you can get notification every day on a certain time all right so i think we are so far we are done and we donate this one as well so all we did here we first did uh uh local time configuration we got the time zone and then set it and after that we should do this one which we already did i think i have a typo here convert and it should be convert anyway so we converted the time and we also set a new parameter so these are the few settings you must have for um a schedule notification okay all right so now what we'll do we'll go ahead and run it let's see okay now we'll create a new notification okay notification and waiting for it and let's do at let's say zero seven make sure that we get the notification s06 and we'll wrap it for daily and we'll mark it as a pink over here and we'll create it okay now we need to wait the start time is zero seven now it's zero six so let's keep waiting yes perfect so you see the time arrived we get the notification of course the title is wrong this is not what we want but anyway so that means our notification has been working so let's do one more more test more knowledge okay and this time we it to say oh nine on the p.m and we'll set it to daily and we'll use the yellow color so two minutes later let's see the time arrives we'll see the notification perfect the time arrived we see the notification and at this correct time okay and we can mark it as a task completed and change it and we can delete this everything else is working pretty much as we expected all right okay now we'll see how to set up this uh well now we do get the notification but we get these things we definitely don't want to get this one uh i think it's pretty easy to solve so all we need to do uh just to replace with title and note things like that so definitely for here we don't want a zero we can do task dot id and let's see over here task dot title and over here we do task dot note so those are the fields that we have over here id title and a note okay now let's see what's going on here and i think it wants us to convert it to end okay all right and we still get error well these are the notification i did early so you can ignore them let's see null check so let's say go ahead and do it as it want okay these are all once again sdk version with some older sdk it just works like this okay anyway you know we'll go ahead and well what do we do so let's save it first okay and we'll uh go ahead and create a new one and we'll say new test keep learning uh learning and trying and this time we'll set it to 11 and we'll use this one and let's go ahead and do daily and create task okay now let's see what happens as our notification pops up yes so new test keep learning and trying so our subject is correct okay so that's also working as well okay in next part we'll see how to tap on this notification and go to a new page okay well we want to tap on notification and go to a new page at the same time we want to carry the notification to that new page well right now if we look at our function which is called initialize notification if we come over here and if we take a look over here we have initialized this method and it's calling a callback function which is called selector notification and if you take a look at select a notification it is over here right now it diverts us to our take us to a new page where there is white color not much but you do see that it it does take a notification payload object or payload actually it's a string nothing fancy you can name it anything but as a convention people call it payload you can call it anything don't worry you'll be still good to go all right now it does uh know that what kind of payload or string over here shows up when you tap on the button okay yeah but this section has to work with another section together uh which is over here within zone schedule okay so when you schedule notification and you want to take it a new page and you want to pass the string or the object you need to combine here as well okay so here there's a parameter which is called payload and over here you can send all of them okay yeah so that's what we want to send we want to send the id and as well as the note okay now it does it is a string it should be a string so but they're int right now so what we could do we could do task dot title and we can combine them with the task dot node okay but uh here actually uh let's see we want to well now definitely this is a variable over here right so we need to put this dollar sign okay like this and we need to wrap them uh using curly braces like this let's see okay and uh what else let's see over here we just need one okay now the error is gone and after each of them actually we want to put this uh it's kind of like based on this uh we want to split that okay let me tell you what is happening so now with this it will become one complete string okay one complete string so based on this we want to separate it okay so once we go to a new page we need to get this string and we want to separate the title and the note okay now this is a mark over here like previously we split the string based on this column but here you can use anything actually anything you want it doesn't matter though okay all right so we're good so we are good so now uh here from here actually the payload would be given to i believe uh to this one so now whatever is here so you can get them here and once you get them you can actually go ahead and send it to any page you want okay so now it's our it's time to create a new page so we'll go to our folder ui and over here we'll create a new file we'll call it notified page dot dart okay now here we'll create a stateless class for now it's stateless uh note 5 page we'll call it notifies page and instead of a container here we'll return scaffold because we want to have an app bar so that we can come back to this page all right now let's see come over here so what do we want to send we want to send uh we want to go to a new page and the page's name is uh notified page notified notified page this one and i guess oh it's auto imported all we are using get x so we can just use arrow function anyway now here we're going to pass some parameters so we'll pass [Music] as a label as label will pass payload okay this one so this is a parameter now over here in this page we need to retrieve it so let's come over here we'll declare a string so we'll call it say final string and label okay now definitely we need this within our constructor to do this dot label and it would ask us to add a required keyword okay now for now the error is gone now scaffold has fbar property we're going to use that we'll use fbar okay now here it is a leading option or property and it takes icon button so do use icon button and icon button takes unpressed so over here once we are we press on it we want to go back to the earlier page so you can just use get dot back and uh let's see now it's asking us to import the get x package so this one the first one the error should be gone and now there's another because it's asking you to get an icon so we'll use icon for this we'll use icon constructor and which takes icon data so icons dot will use arrow like this on back arrow all right now the uh now the error should be gone as well okay yeah um what else uh so far we're good with this and let's see [Music] and i think we can also set let's see what other color is available here so it should have i think a background color okay so we'll use background color now for background color we need to use get dot is dark mode this one so if it's in dark mode so the color i guess the background color we could set it a little gray so we do colors.gray and maybe 600 uh well if it's uh not in dark mode then we can use background color as white so you do colors dot white okay yeah so that's a good signing and okay so that's about the icon button and we also want to use the title now the title should be coming from our payload so do remember well no we do have an error let's see now it's uh because come over here as well as let's see okay the arrow should be gone okay now over here the title let's see uh so whatever we get from the payload over here do remember it's taking the whole string but this actual string is coming from here okay now here we'll split it based on this one and the first one is the task object sorry the first one is this the title right from this object so we can split the string over here so whatever the level we get so this dot label and then make sure it's a string and then we do split and we split based on this icon and then we grab the first one and the first one is our let's see okay we have an error let's wrap it within text yeah we should wrap it within text with it anyway because this is a text all right so now we should be able to see this uh text as a title one we tap on the notification bar okay remember that uh you also need this one otherwise it won't work anyway now let's go ahead and run it okay now let's create a new one we'll create new test flutter test and let's set the time to 25 and do this one and we want to create a pink one let's go ahead and create this okay let's go ahead and delete all of them we don't need them now okay perfect so this is the time we're waiting for now it's 20 23 let's wait okay so our notification is here let's tap on this and we are over here but unfortunately we can't see any of this we didn't see the title maybe we can do a style for this one so let's go ahead and create a style object and we do text style and we'd say color colors dot black okay now let's go ahead run it and we'll create one more so here we'll call flutter learn flutter and we do 26 and let's see daily okay now i think we can remove one of them now it over here yeah now it says that is instance of title task so i think we are making a mistake over here so dollar sign actually should be outside okay sorry for the mistake let's go ahead and run it and before we run it i think we can also change the icon color over here to define a color for this so get dot is dark mode when it's dark mode if it's dark mode would use colors dot say white otherwise we would use colors dot maybe gray we're good yeah like that let's run it okay now let's create one more uh learn flutter best framework for applications and we do 28 over here p.m okay daily change the color all right so let's wait for it and let's see the result okay now this a flatter is uh the notification is over here and let's tap on this now over here learn flutter so we are successfully able to show it and sorry for the error so the dollar sign should have been outside over here anyway so what what what it tells you so it also tells you can print anything over here whatever comes from this notification payload okay yeah so what do we do we can also define the body property and over here we do container and say within container what can we do we can say assign child okay so we do child okay and over here we can grab this one once again this this part of this text actually okay and once you split it you want to get the second part okay and i think here you can also set up width say for example say 400 sorry height 400 and with say 300 and what else maybe a bit of decoration so we do box decoration okay so that it looks good we'll do border radius border radius dot circular 20 pixels all right now let's go ahead and save it well so it's there now let's see we can center it sorry okay so it's all centered over here though and now let's uh set a color um check is dark it's dark mode sorry get dot is dark so if it's true then we'll use colors dot [Music] white otherwise colors dot gray 400. let's save it and see the result okay now we want to center the text as well so now yes so things are working pretty good all right now of course uh you may want to change the color now because the background is gray right so you can do a conditional check over here not really black so get dot is dark mode well if it's a dark mode then let's see colors so if it's a dark mode the background color is white the text color maybe you want a little black okay all right otherwise colors dot white okay yeah okay perfect and what else you could say you can also set the setup text uh font size right i'll do font size i think what is it well let's see font size that text out so anyway yeah so i think so far it's working pretty good now you can go back all right yeah so let's go ahead and create a new one learn laravel [Music] we love laravel and flatter well we don't want to change this one daily wouldn't create with this one and let us change the time though we want to change the time to 36. and let me remove the unnecessary one so we don't need this anyway so now it's 35 we need to wait until 36 and we'll see okay perfect so our notification is here let's tap on this all right so well as the mode changes it changes as well anyway but of course this page could be much better but you get the idea that how it works anyway so well so first we are good we can tap on this we can get notification and let's see once we click on this it shows up as well but now if you click on this there is an error so why the error is happening now as you see it says only valid value zero and one now it's throwing and valid value range error now why is this happening if you come over here to our notification services and this is the one that's responsible for showing this now as you see we are sending the payload the payload actually does come over here in this page and it tries to split it and once it tries to split it like this it gets the error okay but as i said earlier that we just uh want to be able to tap on this and sorry let's restart it we're starting we want to be able to tap on this and change the mode and when the notification shows up for this one we don't want to go anywhere okay so we need to nullify this but anyway so now we need to set a condition for this so uh how to set a condition now if you come to our home page over here as you see uh this function it takes this title which is a fixed one and the body message things like that like if you see the theme changed thing changed and activated dark theme like that whatever okay so that's what we get now so let's put it back so once we click on this we don't want to go to anywhere so what it has to do with this one so here this title is pretty fixed right so what we'll do we will put the payload sorry we'll put the payload over here and the title is our payload in our case so it's pretty fixed but you can make it dynamic if you want and we'll copy it here okay so once we copied here so the payload is same as one being sent from there or actually you can also put it get it from here though string title i think this the same thing so uh here it's a title i guess okay uh so whatever you change you you you get it here but anyway uh so they would be the same thing though so what we'll do we'll come over here select let's see select notification over here we'll do a conditional change so what is the conditional check we can do over here we check if payload equal this one so because do remember this is what we change and we get it here i mean first we get it over here okay using this right okay so then on once we tap on this we can check and do a check uh check on this once we tap on this notification so if it's this one actually we don't want to go anywhere otherwise we'll go to say this one okay so that's how we are working around this problem so nothing to never get all right so yeah that's it so based on this we are doing a check now let's go ahead and run it let's see okay our application restarted and let's tap on this and show that perfect the error is gone do it again the error is gone now let's make sure that it's working the other way okay native do you know react okay so over here we'll change it to say five and wait for it grab and use a different color okay now let's create the task let's make sure that uh they don't collide with each other let's delete this one first anyway there's the theme one so it's coming from the theme anyway now we are waiting for our other notification hopefully to show up with it here yes now it's also working right so perfect so things are pretty good so far we can delete them we can mark it as completed but of course this app is far from finished we can do much more things for example we can edit this list over here there's a way we can do it but i'm not going to cover right now in this tutorial but in future tutorial okay anyway so if you learned something in this tutorial don't forget to subscribe and smash that like button and if you have any questions i'll leave a comment below by the way i do want you to do one thing though i want you to do uh work where you can actually cancel notification okay so there are many different ways you can do it from here so you can have one more button and for that certain list you can cancel the notification even if you change it okay or you can also add it from here so you click on it it showed up like edit option then you can go ahead and edit so you can do that one and if you do it just let me know in the comment section all right so i'm looking forward to hearing from you thank you so much

Channel: dbestech

Views: 5,318

Keywords: flutter local notifications, flutter sqflite tutorial, flutter scheduled notitications, flutter tutorial, flutter tutorials for beginners, flutter crud tutorial, flutter curd rest api, flutter app, flutter sqlite listview, flutter getx listview, flutter immediate notification, flutter theme changed, flutter notifications ios, flutter notifications listener

Id: pQSTgf-6hDk

Length: 130min 25sec (7825 seconds)

Published: Thu Oct 21 2021