Flutter App Using Sqlite & Sqflite CRUD With Local Scheduled Notifications | GetX Listview | Part 2

[Music] [Music] [Music] [Music] [Music] do [Music] [Music] [Music] [Music] [Music] [Music] in this tutorial we'll learn how to use sql package we will use sql package to create data store data delete data and as we do this complex operation we'll do them using get x package get x package will help us to deal with some of the complex operation and formatting data and saving and retrieving all will happen through get x package at the same time well this is the continuation of the previous tutorial so if you didn't watch previous tutorial uh find out the link below in the description section and start watching from there so let's get started so the next thing we want to do we want to handle this image here right now if you come here we just have an icon but we don't want the icon we want to show an image to the user over here all right uh so to do that we need to change over here instead of icon uh uh let me see so instead of this icon we'll use an image okay uh the for image section we'll use a widget with which is called circle avatar and it takes a parameter a few parameters one of the parameter is background image this is what we would be using and then we'll use another uh widget which is called asset image and we'll use this image widget to pass down the image path to the circle avatar so it will view the image okay now all it does it takes the path and name of the file but we don't have this image yet so we'll do we'll go to our pop spec uh this file and over here as you can see we have this asset property our assets section so we'll use this section and here we'll specify our image name and path like that okay so we'll create a folder called image so let's go ahead and do it so here we'll create image folder or images uh be careful that the name should be same as this one okay images now so this is our image so this is the image you would be using so make sure that you write the correct folder name and also take care of the spaces over here they are very sensitive now let's come over here now here our image is our image in this images folder so we'll mention that and image name is profile dot png okay uh well let's go ahead and get some dependencies because we changed this file okay now we can run our app okay let's see what's happening here okay yeah everything is fine the image showed up so this is the image that we wanted to show all right perfect so the next thing we want to do we want to specify um color for our theme and this app bar okay right now this ever change color based on the whole app look things like that but we want to get more control on this amber color so for that one we can actually define our appbar color now i will define it as a background color for upper color you can name it anything you want it doesn't matter though so i'll call it over here i will use white color okay so as we change change the themes so either it would be uh black color or white color based on light and dark mode okay so that's what we want to do here now here we'll use another background color for dark mode okay so we'll use dark gray color do remember that dark gray color we already defined over here okay so these are the two colors that we need to have if we want to have a better good looking for the app bar now we'll go to our home page file over here now home page file over here um we have this app bar and okay so this is the amber widget okay over here we can define our background color okay so we'll call background color now background color is coming from context dot theme now of course this is the context of our whole app so it keep tracks of tens of tons of things so from this object we can get to our theme object okay the theme that we created earlier and the theme we are going to use now now this gets us to find the theme object and related properties so right now we can access the property like from here okay so let's go ahead and call the property what's the property property is background color okay so now this background color would find the property from here okay so that's the most amazing thing about flutter and it's widget it's very automated and more like ai best it kept keeps track a lot of thing for you so you don't need to hassle things around all right so now let's go ahead and change it around our program and let's see how it works okay perfect and now this icon is gone okay well it's not really gone it's there but because we change it to uh different color a white color the background color remember that early you know earlier it was set to white color right now change it back uh now we need to find a way to deal with this background color over here sorry the icon color so let's come over here now do see that so we need to change the color of this icon over here and how can we do that so we can set the color over here color now color should be changed as well based on your theme color right so earlier we learned that we can keep track of our theme that it is a light theme or dark theme based on this variable which is called is dark mode and once again this is coming from our uh get x package okay yeah so this keeps tracks of the theme that you're using currently at this moment okay so what what we are using at this moment at this moment the theme mode is light mode right so we'll use sorry is dark mode okay so we'll use a question mark itinerary question mark or itinerary operator they call it so based on that one we get the value because it returns uh either true or false okay so it's dark mode so right now of course it's not dark mode it will light mode so this would return false right so if it returns true which means it would be dark mode if it's a dark mode if it's dark mode then we'll use colors dot white otherwise we'll use colors dot black okay yeah that's what we want to use so let's go ahead and save it okay now as you see perfect so now the color is uh uh black color because we are in light mode so which is falling back to this one let's change it perfect now it becomes white right but another thing we want to do as we are changing the theme color we also want to change this icon okay we don't want the same moon icon all the time and once again we can use this one okay we'll check if it's whether dark mode if it's a dark mode you want to switch back to the light mode right so in that case we would show the icon uh sun icon or if it right now but right now it is in light mode so that's where we are seeing this uh moon icon so here if it's a dark mode so would fall back to icons dot say sun i think this one okay otherwise we fall back to this night mode okay so let's go ahead and run it okay now let's change it perfect so now this is the sun back now this is the moon all right uh so that's perfect and working as we expected now another uh little strange thing this elevation we don't want elevation so high we wanna set it to zero so l what elevation does elevation gives it's like this shadow as you can see here it looks like it's on the surface now we will set it to zero okay perfect now it's uh looking much better yes okay great so now we are done with this section and we are happy uh now what we'll do we'll go ahead and create this section over here all right this section over here so now as you can see this is uh we can put the way we can design we can design it in a row section okay this would be the first big row and within row we'll have column so column this one i mean this this would be row right row will have two big section so this is the first section and this is the second section so within row we'll have two children now within the first section we'll have column section once again because they would be sitting on the top of each other so what we'll do row first section second section and within first section we'll have column section okay so let's go ahead and do it so we'll collapse our function over here this one and this is where from where we want to start so let's go ahead and first uh what we'll do we'll do here say row okay and row text children we know it now the first child i said this is the column so let's go ahead and define column over here okay and the second one is not i mean it's a different widget anyway we'll take care of that later now once again column takes care of ch takes children so now we'll have two children this and this right okay so first one is about date okay so while uh what kind of data we want to use okay so we can use date time dot now okay well but this this is not a string object but we want to show it as a string over here but this is not a string object so what we need to do we can wrap it around the text widget okay and then convert it to string okay all right now let's run our app and see what's happening here now this is very weird time the time is correct in my time zone this is the correct time okay but this is too long so this is not the format we want we want the format to have like month name and date and a year that's all you want okay uh so now flatter directly doesn't provide any way to deal with this thing of course you can but that is a lot of that is a lot of hassle so what we'll do we'll install package to help us converting this time to the time format we want okay so we'll come over here and here actually we'll install two packages final first one is intel l i think this is the package so this helps us to take care of the time format and later on we also need to use another package for font so we'll use google phones for that this one so this is one this is the package we'll use later but let's install them at the same time it'll save us time okay it's installed i think we are done with this uh and now come back to this section okay uh so here uh now i think it's asked us to update our dependencies okay perfect okay so now what we could do this package the one we saw early it has a function or a constructor which is called a date format okay well date format and let's see i think we need to ins import the package this one okay perfect make sure the package has been imported now you do dot and you'll see it has different things and format okay and like you can just get our 24 hour 24 hour minute things like that okay but the one we are interested in this one so it will show us the formatting year month and date okay that's what we want okay now it takes uh or it calls another function which is format this one now within this will pass our earlier format so this is the earlier format that we had but of course we don't need to convert it to string right now okay so it will take care of uh take care of things automatically for us now let's see let's run it okay so that's what we wanted okay so once again so this returns more like a string object so what it does it formats it to uh this one and return it as a string okay so that's why we don't need to convert it to string anymore okay perfect so that's what we wanted all right and uh next we see that we have this word which is called today all right so let's go ahead and do it so we'll pass another object a text widget and we'll call it today and uh i guess let's see that's all so now let's save it okay now they're a bit weird so let me put them on the left side okay so now here is the thing that uh we need to put some padding this and that okay or margin now for column you can't really do it directly so you need to wrap it around a container because if you wrap it around a container you can apply padding or margin okay so that's what i did i wrapped it around a container now here i'll put margin over here and would do const edge inserts only this one and would do horizontal hurry we don't need to do this one we do symmetric and horizontal left and right and 20. so when you do symmetric horizontal that means symmetric means the same so apply same to the left and right why left and right because you use horizontal so this is the horizontal axis so now do it but now we want the date and time and this text all align here how to do that it's pretty easy and within column because this is here we are using column widget for column widget the primary section uh sorry the cross axis is horizontal axis okay for column widget cross access is horizontal wizard so here we can change it so we do cross access alignment cross access alignment dot start so we want to start everything from the beginning perfect okay now this is so far working but now as you see this is too small and tiny so that's not what we want so we can change this thing but we can define this extra style in our theme over here so over here we'll define a class and sorry not class we'll define a function a getter function or a get function okay so this function will return text style and we'll use the flutter get keyword get keyword means get me something return me something okay and now here what is the method or uh method name you want so here we'll call it say sub heading style this one and we can return we can have this uh what is this second process of course it's being cranky because you might need to do a return okay so we need to return something okay so let's return okay when you return it's happy all right okay we need some content over here okay so because you you are going to return so return style is text style let's see this is like widget or object i would say all right so but here what are you returning you also need to specify so now here we are returning something this is coming from google fonts and the font i'm going to use that's called latto sorry lato that's what we are returning google fonts letter so over here this is the letter font style okay so here now leto takes a property which is called text style this one and within text style will return well or will assign text to style okay now this textile widget is coming from flatter core widget right and we already know it so we can define here font size say font size 24 and font weight say font weight dot bold and the color section will take care a little bit later once again let me tell you we are using flutter get keyword so if you're coming from another programming background you know in like in java or php or c-sharp they have this keyword called getter and setter so this is more like that so it will get you something getting something means returning something so it's more like a get request but of course it's not a server side and we are returning uh google fonts dot letter and what type object is that this is a text style type so that's why we have to mention that uh return type okay and we are returning this section now what is the method name here this is the method name all right so it's more like like this okay yeah now uh now we can go ahead and call this one do remember we define this one in this uh file what is the file name theme dot dart not in the not within the class itself so what what does it mean it means this is a public method okay so we can call this one anywhere from our file or from our project okay so now let's go ahead and come over here so now over here we can define the style okay so we do style and sub uh let's say sub heading this one okay let's run it okay perfect so it become much better and bigger and a different text style as you can see here okay so now uh what we'll do we'll go ahead and copy copy paste it where it is over here okay all right now instead of subheading this time is heading so we're creating two style objects over here and um we might use say for example 30 and that's all so now this style would be using for today this section okay all right so what we'll do we'll assign this one so do heading section or heading style okay now let's save it perfect so it's a little bigger now let's go ahead and change it so as you can see the color changes automatically but this color is too dark and there they have the same color so that's not what we want i mean we can style it further now over here once again we can keep track of the color okay yeah so we'll define color property now once again we'll do get is dark mode is dark mode um we need to import the package let me import it manually it will get the correct package package get the dart this one okay perfect so now if it's dark mode if it returns dark mode then we'll use colors.white if it's not dark mode then we do colors dot black but this is for sub heading this one okay sorry this should be for heading i guess so let me put it over here okay and for this one we want to use a bit of different color not exactly white and black like that because we want it to be a little lighter okay so when it's dark mode we want to use gray color but uh not complete gray a light gray and when it is uh in light mode we will just want to use gray color okay that's all we want now let's go ahead and run it okay perfect now it's already looking much better okay perfect we are good yeah right perfect okay no that worked so far with us now we want to create this uh button over here now there would be several buttons in our application so what we'll do we'll go ahead and create a new folder within ui and we'll call it widgets and now over here we'll create a file and we'll call it button dot dart okay perfect now here we'll create first our uh class name and file we'll let's uh do st now we want to use stateless widget and the name of the class is my button and now over here i guess we need to import some of the libraries okay perfect we are good to go okay now we want to create a clickable button over here now clickable button could be done using gesture detector or inkwell so in our case we'll use gesture detector this one and it takes few properties first one is on tab property and we'll keep it null for right now and then it also takes child okay yeah all right okay perfect now we want to also have well for child we want to return something with background color and text okay so that's why we'll wrap it around within a container the child section okay and now the container will have width and height so we'll do width first with 80 and say height to 60 i think 100 is better and then it will have background color uh sorry uh it will have decoration we are going to use decoration because we will have this border and we will use box decoration widget and it takes a border radius so we do border radius dot circular 20 okay and we also mentioned color and we are using primary color so what is the primary color this blue is the primary color and which we already defined in our theme file over here um as you can see primary color is a bluish color this one all right now come back to this one and we also want to show the text over here okay now text would be passing down from the place where we call this button okay all right now from where we call this we'll pass down two objects one is uh ontap function another is the label label means the string okay so that's what we want to pass down so we'll declare over here to objects so we do final string label and final uh function on tap okay now of course we need to call them over here this dot label and this dot on tap you're perfect now it might ask you to use a required keyword based on your version in older versions you might not need this but newer version you might need this okay yeah now this is the ontep function clickable function that would be passed down from the caller so we will use it here okay so on tap on tab now it's being cranky once again this is the sdk version problem so in most cases this should be enough and if it's not enough in your case you could use this one okay it would solve the error okay so it's more like that it's it's not sure that it will get this function or not if it doesn't get just keep it null but also take care of the null safety thing i mean don't crush the app i think this is that's what it means anyway so you can either remove this if it works with you if it doesn't then just use like this okay perfect so now we are almost done now this label would be passed down right so we want this level would be string so we want to use it as a child within the container so we do text and we do label okay and we'll use style over here uh text style we do color so colors dot white okay perfect now i guess we need to import a library okay the error should be gone so we are done with this button file so now we can go ahead and call this so call it from here call it from here okay so you want to have this button uh let's use our button over here so remember our pattern is this one and the class name is my button okay so we'll just call my button and this one it takes two properties as we defined early this one and this one so the first one plus add task and the second one for now we are not passing anything we're just passing null we'll use it later okay so go ahead and run it and we should be able to see it but now they are too close to each other uh let's see yes over here so this row now row has a property which is called main axis alignment that's what we are going to use in our case this is the row and main axis is also the horizontal axis so you can push down to the left side and the right side okay yeah so we could do main access alignment uh main access almond dot space between so when you use this property it push everything to the left and right side let's run it okay that's okay it created some space but now it's too much to the right side that's because here i think we earlier used this container so i think we don't need this one so just get rid of this okay now it looks better but now again too much to the left and right so to get rid of this problem what we could do we can wrap this row widget around the container and then apply padding or margin okay i'll select this i'm on mac so i'll do uh option enter if you're on windows you could do alter enter okay now wrap it around the container it will do it automatically for you as you can see now here we'll apply margin so we do const edge only we do say left 20 right 20 okay we need to come over here okay perfect now the top section we can also take care of that we can apply a bit of margin so it's the top say 10. perfect now it's working as we expected right okay perfect so what we'll do we'll just close this container over here and now another thing though now there'd be a lot of code here so we don't want to run this code in our main section okay we don't want to write it over here so what you can do we can write another new function we'll call it add task bar and over here we'll return everything in this code okay so just cut all of this and then return container okay yeah and of course we need the semicolon because it's a return statement and over here we can call add taskbar perfect so this way our code is more organized and readable okay so let's go ahead and run it make sure everything is fine okay perfect everything is working correctly now the button we this width we can change it to 120 this way it would look better good looking yes it's looking better okay so next we'll see how to show these dates here and scroll them okay and to do that we can install first install a package we'll do it's called uh what is it uh date picker timeline i guess date picker a date time date picker timeline this one this is the widget we are gonna use do see that i'm using all the latest version over here and if your sdk version is same as mine you shouldn't have any problem because i'm using all the latest version of the plugins anyway let's go ahead now here once again here first we'll uh wrap this section around the container okay that is asking you to get dependencies okay so let's define a container over here okay and container text child and within child we'll have another container or we don't need a container here what you could do we can just call date picker date picker this one okay yes all right let's see if we imported the package i think everything imported automatically but now it's being cranky because it has some of the properties that we can use so let's go ahead and do it now the first one is you can see it takes a date time object uh which refers to start time okay or start date so this is the first uh uh property we need to use so what do we what we could do we can just call date time dot now so this will show us the current date as we saw earlier uh in the beginning of this tutorial okay so next we can define height so different height 100 so this height is i guess this height all right and then we could define width say 80 like that okay but i think it's including unselected area okay and next it takes a lot of other properties we'll say initial selection date this one this is the current date the date today so once again we can use this one time dot now and then selection color when you select it so when you get select something select date we'll use the primary color this color or this color when you select on a date and next we'll use let's see what we could use we could use selected text color because this is the background color selection color is more like the background color so selected text color and in our case we'll use colors dot white what would be better okay so these are the basic settings then we we can use now look at some other properties so here we have this month day and date style so this all takes a text style object right yeah so these are the most important things we need to use to show the month date and day okay that's what we want to do all right now let's go ahead and see first we'll use date style text style this one okay now here what we could do we can just return uh style for our date uh so text style now we could do say for example font size 20 font weight onto it dot i will use 600 this one and color color dot gray all right perfect now let's go ahead and run it and see what we see here okay wow that's amazing so it's already showed up and we can scroll through them okay and this is the correct date and the current date of course you can select the second one like this okay now a few things that we can take care first it's uh too close to the border okay so we can assign some margin over here all right top margin and bottom margin so it would do margin const edge only say top say top 20 let's see okay it looks much better now all right and what else we could do try to use left and see perfect i think that's good and i don't think we need any any margin over here so this is aligning with our style over here okay so for that's working perfectly so now this individual style over here okay but once again here i'm going to use google later find which we saw earlier this one this font over here okay uh well we can just directly cut this thing and wrap it around google fonts letter and we should be good to go fonts dot latter and it takes a property text style property and you just copy paste what do we have here and perfect now let's save it hopefully we'll see a change in the text let's run it okay yeah i guess it changed a little bit and now over here so this is the date text style so we can copy paste this okay to save our time so we'll copy two times now instead of date the next one is day okay and i think we can definitely take care of the font size uh so the second one say 16 and the last one so this instead of date once again i think we can use month okay now let's run it one more time yes perfect uh but now the font size is too big right so for month we don't want so big say for example use 14 okay i think well for me it looks better okay from month date like that okay so i'm happy with this result for now and it takes another property which is uh which is called unchanged so that's what we're gonna use okay on date change on date change and it takes a parameter date the date you select okay once user selected it we can we want to save it to a variable so let's go ahead and declare the variable so we'll declare the variable over here we do date time selected date okay like this now it's being cranky over here so well now we can actually initialize it how do you initialize it we can pass it dead time dot now okay yeah like that okay so for now let's go ahead and save it like this and we'll see what happens so now let's go ahead and run it okay everything is okay and over here selected date equal date okay now let's go ahead and run it one more time okay perfect everything is working okay now next we'll see how to click on this button once we click on this button we want to go to a new page and create a form and submit this form so that's the most amazing part of this tutorial go ahead and create this uh create a new page from this button we can organize our code look at our code over here so we can move to a new uh private function so we'll call it add date bar and over here we'll return the container so we'll do just copy paste this one cut and copy and i think we're good now just let's call it here at date bar and we should be good to go now let's run it make sure everything is fine okay yeah everything is fine now over here you can create a new page we'll call this page add task bar dot dart okay and over here we'll create a stateful file and we'll call it add task page now uh look at a design like this one so we want to have this a bar so instead of returning a container we'll return a scaffold over here okay and i think we need to import some of the libraries okay so now here we'll define app bar okay a bar a bar and it will have body and the bodies container now regarding this app bar we have already done the heavy lifting over here so we'll copy paste to this section and put it here uh within our uh build function i mean not within the build functions are within this page so over here okay so some of the things that we can take care like these things we don't need this because we don't want to switch the theme over here and we can also import the get package package okay this one and now here it's not recognizing the context so let's pass it from here but first let us call this from here so you're calling it from here and passing the context all right and now here let's call it build context context okay perfect so now this is working but let's verify it so come to our home page and home page here over here this add i guess at task bar over here we have a button remember that there's a button over here we want to come over here once we click on the button now here once again we are using get package get to 2 so flutter get x tutorial uh check it out if you don't know how it works now here we'll call add task page with get expected it becomes much easier let's import the package yes so you can just call get to to a page where you want to go and call that page and you should be good to go all right yeah now let's launch our app and let's see what's happening here make sure that no error no error okay now let's click on this button yes we come to a new page perfect it's working but definitely we don't want this icon so let's come here and take care of this icon thing we don't need any of this so here we'll use icons dot back arrow arrow back ios this one and perfect now of course we can't go back but we can go back easily once again we are using flutter get x so get dot back you know that if you use flutter get x package for navigation you just simply call to go back you can just call get.back and to come to a new page you can just simply use get.2 and name of the page okay all right now let's run it one more time and let's see what's happening yes we come over here and over here is the background color context dot theme dot background color let's run it so now the background color is same as the app color upper color okay perfect now we also need to verify how it works with our uh dark mode dark theme mode okay now let's come over here yes perfect okay now we can go back we can change it yeah perfect so that this thing is working pretty good right now uh so let's see yeah uh so now what do we want we want this body section okay now let's look at the design so we want this text and this input field okay all right to do that now here we have to have first definitely these are all column layout right these are all column layout but within each column there are rows so the rows they have row layout like this and this one this one and this one anyway so let's go ahead so over here we will do child we do column okay and column text children but this page i want it to be scrollable when you type in i want the page to go up the keyword shows up like that okay so that's why we can wrap it around another widget and we can call it single i guess single child scroll view this one okay so it would help you to scroll okay all right another thing you see that there is left and right padding like that so we want to use that one for our app okay yeah so for the content that would come down later so we can design it now say padding and inserts padding cons and it's just only say left 20 right 20 and we are good to go all right now first we want to add a text here which will say uh add text so do add tasks okay now here we want to use the style the style we created early in our theme folder like this one this one so here we'll use a heading style okay so now just call style and heading style sorry adding style let's go ahead and save it perfect so it's already working because this is the one we created early right now that's done next we want a now we'll create this text input field this one okay now before we go ahead and do it let's understand how it's going to work so we'll create a separate class reusable class for text in input field so that class would be responsible for showing the title the text box as well as the hint as always when you type things in so now if you take a look you understand that this title and this text box i mean this text and the text box they're laid out in a column so definitely our new file will have a column section where we laid out things like this well as i said that this would be a reusable file so we would be reusable for all of these things over here okay so some of them just as text fill where you can type in some of them not really type you can only choose okay so in general uh from where we call this class the class we are going to create it will have at least four parameters so like the title hint and the text controller as well as widget so this would be passed down as widget okay uh this kind of things so we need those things okay so first what we'll do we'll go ahead and create a widget reusable widget and we'll call it input field dot dart all right so first to work with this date and this uh input box here we need to declare a date object in our add task bar over here so let's come over here and at the top over here let's declare a date object okay but before we go ahead and do that we need to do one more important thing because in this file we are going to deal with a lot of stateful states or like would be using set state function so we need to transform transform this stateless widget into a stateful widget how to do that so if you're on mac so just select this and hit control enter sorry option enter like option enter as you see so convert to stateful widget so if you are on vs code you need to do command dot then you can do it if you are on windows then you need to do alter alter enter that's for android studio and if you are on windows vs code you need to do alter dot okay hopefully you could do it so out here i will do it to convert it to a stateful widget and it's done okay now as it's done over here i'll declare a variable here datetime object so we'll call it selected date okay and over here uh we'll just pick up the date now so date time now so this is the default date today's date all right so that's what we have now selected date now we can we can use it okay so where to use it so would be using it over here so you're going to create our third input field so we'll do my input field okay now over here title so definitely the title is date and hit now hint we want to pass the date but we don't want to hard code it okay that's not what we want we want a dynamic date so every time or every other day user opens the app they see dynamic date and how to do that so we already have the selected data object okay all right this one but now the problem with this is that it is a different format okay and here we are going to use a string as you can see that so it's not comfortable so what we could do first we could use another function which is called date date format dot now this one has different type of format that we can use let's see dot ymd so you want year month and day just like this over here and then on that we can call format format function and format takes a string and uh i know not not really sorry so format takes the datetime object which we already have this one and what it returns when it returns it returns a stream okay so with this we are good all right okay so now what we could do we can go ahead and run our app definitely and we'll see that it shows the date so let's go ahead and click over here all right so this is the current date right yes but of course right now this is not really clickable so you want to uh over here we want to enter something all right now another thing let's see you can write over here so you don't want to write things right so we need to shut down this feature of writing how to do that let's go ahead to our input field okay now over here uh well we'll send a widget from here do remember that we'll send a widget so that widget would be like this one okay so what do we could do here so we'll check if there is a widget or not okay if there is a widget then there is uh this feature which is called so there is this feature which is called read only feature okay so if there is a widget coming from our file from here then we want to just to read only okay and clickable but not typable all right so that's what we want to do so we can check here so widget over here if it's null then read-only is false that means that we can type here if it's not null then read only is it true okay so this is what we want to do so we'll save it but of course uh here we are not passing a widget yet so let's go ahead and pass a widget do remember that this input field also takes a widget right so now we'll go ahead and pass a widget over here so let's go ahead and do it we get now what widget we want to pass here we want to pass a button widget okay icon button widget so we pass here icon button all right okay now this icon button has some properties that we need to use so this unpressed property is mandatory which you must pass and as well as we can also pass a icon over here okay now i cannot we would use icons dot calendar outline today this one and we should be good to go all right so now let's save it okay now we don't see anything yet because we we are passing the widget from here but we are not really drawing it over here so now do remember that this is earlier we said that this expanded widget takes the whole object over here in the text box but if because this is in a row right so right now there is only one object which is expanded widget but if we have more we can put that so what is the more widget or what is the other extra widget that's the widget that we are passing over here okay so we need to check on that one so here we could do a check so we could do widget if it's null it means we are not passing anything in that case we'll just show empty container which is just a container but nothing contains but if we pass something in it means in that case it is not null so we'll use container and in that container we'll use the child what is the child the child we send and in our case the child is the widget okay so that's what we want to do so let's go ahead and save it and now as you see it's already here all right so it looks like yes it's working so now let's see if we can click on this thing okay of course we can't click on this thing the reason is uh let's come over here over here we don't have anything to click so okay now let's save it and let's try to click okay so it means it's working but do remember just now we converted our stateless widget to stateful widget sometimes it might not work until you reboot your machine so for me it's working but sometimes it doesn't work when you convert stateless widget to stateful widget in that case you have to reboot your whole computer and then it works okay so now over here when user clicks on this button we want to show something to the user okay yeah uh before we go ahead and show it i think we can take care of this color because right now it's too dark we don't want it so we can set up the color here so we do colors.gray and let's see yeah it's more like that we want okay perfect uh so now over here once the user click on this button we want to trigger an event okay we want to trigger an event and we want to show a calendar all right so now first let's go ahead and create this calendar okay over here we'll create a function that function will show us the calendar when user clicks on this okay so first we need to create a function name we'll call it a get date from user okay now here we'll create a datetime object because that's what we want to return when someone clicks on this and we'll call it picker date now the function we want to use is called show date picker this one and as you can see it has some default parameters that we need to use all right okay so these are the parameters we need to use first all right and now this has something to do with a type of future can't be assigned to a variable just date time what is telling you so it's future object show date picker it returns future it returns future means you need to wait some time so that's why we need to use the keyword await all right and as well as over here because it returns sometime something in future but it also may return nothing so that's why we need to use this question mark over here okay and now here we need to add this modifier i think we all know it okay now here the initial date initial date is the date beginning date you can understand it like this okay so we do that time dot now so we know that this shows the date of current day and now there is a first date and the last date now the first date is the first time in the calendar when you click on this so we'll show it soon so it would do date time say two zero one file so explain what it means and now here the date time say 2 0 to 1 all right now let's go ahead and call this function so we'll just go ahead and call this function and call from where call from over here all right okay so let's refresh it and let us click on this now here we'll have an error so let's go ahead and check on the error it says that initial date this one must be on or before this okay so now so what is the last date here so this is the last date and that here it takes the first of january even though we just write 21 but it counted as last date okay now initial date but now it's 0.921 if you're using using watching right now if you watch in future but of course that's a different time for you but this time is bigger than this time which can't be so your last date must be bigger than this initial date so what we could do we could do two one all right so now it might work let's go ahead and save it click on this all right now it showed up right yeah working and what is this so this is the date like here you see the initial date okay this is the initial date but do remember this last state has nothing to do with this one it just arranged to confirm whether this three dates are all logical okay like that but it has nothing to do with the last year over here okay so do remember that okay so anyway so once the user click on say certain uh year and date so we'd be able to pick that date okay and once we do that it would be saved over here all right at the same time we can do our if condition will say if picker date not null it pickered it not null so we want to save it to our selected data object okay we do picker date else we'll say okay but of course we need to now here one thing is that the selected date we are using over here uh over here so as a hint style or within the hint so once user select over here and click ok we want to redraw the time over here in this place so we need to wrap it around within set state function okay so we'll call set state and just put it there right okay now let's save it and let's do okay all right let's pick click on this one more time say we choose 24 and then select okay now we see 24 here right so it means this section is working pretty well and we are happy with that but another thing let's see what what happens if we uh print this date okay so let's go ahead and do it let's run it from the beginning create a new task and click on this and click over here and say okay now as you see it returns a long string anyway so in future we'll see how to process this thing okay next we'll see how to use realize these two sections okay well to realize these two sections the basic work has been already done and what you could do you can come here and just try it using this widgets the custom widget we built but as you see these are in a row okay these two sections are in a row so definitely we need row section and within it we'll have children okay so now once again so this two will be wrapped inside expanded widget then we'll create our sized box so there is a distance over here so as the children first tool here use expanded widget and expand it with a text child okay inside the child we'll use my input field okay now might put my input fill it takes a few parameters so first one is a title so say start date and we'll also use a hint so what is a hint well hint is a default date that we want to use here so user wants to select okay so for that one we need to define declare a variable so up there which i already did that but let me remove it so i can explain to it what's happening here so what i'll do um so let's go ahead and declare it as a string and i would say start time and uh we could do now date format okay but this time we wanted the time to be showed in like this format okay so over here actually it takes parameters like a string okay so we can pass the format within it so we do say h m and this a means i think our like pm and am like that and then we can format format what format this time the current time so that's what we will put here and make sure that it converted to string all right okay so this one remember returns long string like this now within this one using this kind of format a hour and minute we are getting rid of this year so we just want the last moment or last part but using pm and am format like that okay so that's what we want so now here as a hint we can use uh start time okay all right and as you can see here we can also pass a widget so what widget will pass um we can pass an icon widget over here so you do widget icon button like this okay well now here of course it takes on pressed and as well as an icon over here okay all right icons dot reduce access timer is not popping up yet like this one yes right and the color would do colors dot gray all right well now this two sections so we can copy paste of course we can do that now let's save it run it and run our app so it's like this but we want to create a white distance here so would create a size box here size box with say 12 all right okay perfect now of course we need to change a bit of the stuff over here instead of start date we'll use end date and instead of start time we'll use end time if you don't know where is end time actually end the time we already defined but this is hard coded start time should be more user-friendly and time could be actually anything we don't know so that's why i hard coded it so now let's save it and we'll see the new result over here all right fine okay so so far everything is okay but now we want to click on this and show a time picker earlier we did with date picker but now we want to do with time picker okay so once again we'll declare our function over here and we'll call it get user time okay or get time from user like that so get time from user that's what we want okay now at the beginning here we also want to get the time from the user like the user selected now that would be we'll get the time from show time picker this one okay but if you see it return something it's the future okay it returns something like future okay anyway so we'll save it save it in a variable called uh picked time okay yeah so like that but it's better if we can move this logic actually to another function so we become very clear what we're doing so do show time picker over here we can put this one and like this we can just return it okay now here we'll call this function from here so show time picker so we we need to if want to return we can use semicolon but now here what it does now if you see showtime picker once again it takes time of day and the property name is initial time so we can use the time of day so we can just simply call time of day and now if you look at this function time of day it takes few parameters but well now here it says hour actually it takes more than that not only just hour it also takes minute okay all right so fortnite for now it's a minute it's a 10 and hours and nine it doesn't matter okay and showtime picker might have another um property which is useful the initial entry mode this one okay initial entry mode equal let's see what's the type the type is time picker entry mode so time picker entry mode dot input okay because we want to type in something input something so that's why we need to use input so now so that's what it is returning here over here now when it returns something we we should save it in a variable okay we'll call it var picked time okay so now it returns so once user clicks on this it will return time in an hour or the other way to say it will show the time in hour and minute like this okay for now okay so first what we'll do we'll check uh but before we go ahead and check actually whatever it returns as you can see it returns things like future and the type is time of day which is no way a string but to show something on this screen we need to we need to have a string format okay so whatever is returned here so we need to convert it to a string okay so we'll declare a variable string and we'll call it formatted time now the variable picked time dot format because it returns like date time like object pretty much like that but not exactly the same though it's a time of day but i think they're pretty close okay now format now to change this time to string format all you need to do pass the context and you should be good to go all right okay now we do a few uh checks on this first it's the if pick time if pick time equal null we'll print something on the console we'll say time cancelled okay now else if we'll do something else if we'll do something else now we have two elsa now here as you see we have start time and end times but we are using the same function but we need to keep the track of their status so we can pass a boolean over here okay so over here would say bool is start time so we are checking if it's a start time or not let's see let's ask you to add a required but again in older version you might not need this okay all right so if start time is a true which means the first one of course we need we'll pass it from here don't worry okay so so is start time true so whatever is returned from here if start time equal true ah let's see is let's start okay we start time equal to then we'll save it in a variable start time which we declared early okay formatted time once again to help you make sure what is this so this is the one that we are using over here in the hint okay as you see so that's for end time and this is for start time okay and we declared them at the top at the early beginning okay so we're gonna change and show the selected time and else if is start time false then we'll put the selected time to end time okay so in our case formatted time is the selected time okay hopefully it makes sense all right so now we need to call this function so let's go ahead and call it uh so over here start date over here we'll call it from here and we'll pass here is a start time true okay and we'll just copy this one and put it right here for end time okay for end time it is false this way we can differentiate when user clicked whether clicked on the start time or end time using this boolean okay hopefully it makes sense all right so now let's see go ahead save it let's see if we can say something or not so now once we click on this one well as you see we see the time so this is the time that we wrote over here okay so it means this section is working of course we have a little error we'll take care of that later okay now let's check on this one again so it means the time is working okay so now a few of the things that like here so we'll take care of that later now of course we want a dynamic time do remember that at the beginning we have the start time over here the current time but we just take the hour and minute so we want to show this one over here all right that's what we want to show over here so how to do that so that's in a string format but this takes integer well it it take as if there is integer here we need to uh convert that string format or string object to integer okay now do remember uh this uh variable or object start time when it returns something it returns something like this say it returns the time maybe like this format okay so now this is a string format so we need to purse it into integer to press a string format to integer simply we can call int parse like this okay so here we'll pass our start time object start time and now how to purse it now we just want to parse this section and we don't want to deal with that one so first we'll split this string based on this semicolon okay or this double column i don't know what is that anyway so we'll split it okay so now split based on this and after splitting we'll have this section and this section so for our so this is the first section right or the first index so what is the first index that is index zero okay and we are good to go now how about this one here we can do almost the same thing but one step further so we take start time and then we split it okay and we split it based on this colon but this time we take the second index which is index one okay so here we'll have this one but now we don't want air because we will have an error so now we can also one one more time can split it so split it based on space so split it based on this space here okay based on this space and after splitting it we take the first one so this is the first index all right okay and i think we should be gone we should be good to go now let's run it and see what happens click over here and now over here as you see here it says that it doesn't have any instance like this and instance of future okay this object which is future future type which means it will return something later okay now it's happening over here actually but if you hover over on it it says the same thing it is the future type so once a function returns future before that actually you need to use a weight so now here we use a weight and as you are using a weight we can also use a sink we need to use a sink over here and hopefully with this the arrow should be gone okay let's restart it let's see what happens okay now let's click on this and this time i guess no error yeah everything's working fine and we can change the time to 50 and say instead of m we do pm all right now definitely it's not working because here we are not triggering set state so we need to change this one inside set state okay so we do set state and put it there on same for this one set state same for this one all right now let's save it one more time let's click on this and instead of five zero we do five five and we do pm and maybe we can do nine all right okay perfect so the time is saved there now let's come over here say 24 yes that's working now let's come over here well now here we can change to 10 and 8 55 let's see okay so times are working now text your title hi there you are learning flatter like that okay so so far everything is working fine this section is also working fine so we are pretty happy with this for now and next we'll see how to use these two sections and those two sections should be pretty easy well to work with this remind and it's list first we need to declare a variable and a list as well so here uh let's come over here and we'll define first declare into variable okay so we have this list now so once the user create on this arrow they'll see this drop down list okay and this is the default one like as you see over here okay so now let's go ahead and work over here okay as you can see that here we can pass our mind foot field okay and at the same time we'll pass a widget within it okay now here the title is [Music] remind now what is the hint okay now hint is this uh selected remind list selected remind this one okay now we also want to add five minutes early so how can you do that so we can wrap it within double quotation all right and uh over here because this is our variable so here we can put a dollar sign and then we are good to go and now here we can do five minutes early like that okay yeah and of course uh let's see what else here i guess we need a comma otherwise we'll get an error okay now the last part is the widget part because this is a widget right so we'll we'll pass widget over here now here this widget uh we want to pass a drop down menu icon here okay now the icon itself could would be in the drop down menu so here we'll pass drop down menu drop down menu actually drop down button so button will have this icon okay all right now here uh if you hover over on it so it has some record things that we need to do but you'll see that here what do we need to do so underline icon and drop down and what else so let's see and this one so this is the most important one because this is the list we'll show them anyway so first here we'll do icon so uh i can icon so we do key board arrow down this one and we do color now so colors dot gray all right okay now the error will be gone very soon don't worry and here we do say this icon size say 32 and we do elevation say four so it looks a little obvious and then we can also use a style but this style sub title style this one which we defined long ago in our theme file okay yes and what else we can also do uh okay now here to get rid of this error we can first realize this item okay otherwise we won't be able to execute our function so here we could do items okay now it takes if you hover over on it like it takes a list as you can see here and the list the first type is it has to be drop down menu and within drop down menu the drop down menu the items inside the drop down menu items they could be dynamic it means they could be string they could be integer or any type even object okay it doesn't matter so those are the things it has to be there okay now let's go ahead and first call our list so what is our list our list is remind list okay now we'll map through them okay now as as we map through them here um we can use i think we don't need to use it like this though let's see okay so we need to use like drop down drop down menu icon like this okay now here in our case uh we must return a string okay uh because once the user click on this thing when it shows so that shows as a string so that's why we are looping through this drop-down list okay and once we return we have to return them as a string so that's what's happening here and now the value itself that's saved in the drop-down list over here this one this is uh int so that's why into value okay now here we need to return once again we are returning this drop down menu so drop down menu and we are returning inside thing that is a string now it takes few parameters let's see if we well there's other issues that we'll we'll take care take care of them later but don't worry for now i think here this is the thing it's being cranky we need to convert it to list and then the error should be gone i guess yes okay now here we should have a semicolon and now here it takes some items okay now it says child icon is required so let's go ahead and write here child and it takes a widget of course if you see the type so this widget okay widget type so we can pass any widget that's what it means okay now over here we are getting a value over here so this is our interlist right so we're getting them in informat value dot to string because this is text widget text widget always takes uh string objects we know that and it has another item i think we can pass it which is value so value value.string okay perfect we should be good to go now what's happening here let me let me tell you so this is our item list remind list and we are looking through it and as we look through it user clicks on them we would be able to see so that's why we are looking through it but as we look through it we must return and only then user can see that's why we have return function okay and but as we are returning we are returning drop down item and that has a string so our return type has to be this one okay or the object to return this is this one okay and once again at the end when users see they see it as a string so drop down menu string you can understand it like this so whatever you return the return object should be also the type so that's pretty much every function works if a function returns something so here we are returning drop down item but as a string so we need to do the same thing over here okay all right now this one itself is uh integer so you're getting the values from there okay all right so now the error is gone well now what you could do we could go ahead and okay here you are so now this is what we have and once we click on this nothing happens though so far but that's okay now few other things uh which is not good like there is this line here okay so we need to take care of this line so how do you do that there is a property which is called underline okay if you come over here and you'll find hopefully underline and it takes a widget so we can pass a container widget and say height is zero so thus it would be gone okay that's gone now there is another property that we can play around so that's called uh on change okay this one and it takes a string object i guess so whatever it is so let's pass as it as a new value and we'll do set state okay and selected value selected remind you call int parse new value okay all right let's see we have an error here the type argument function cannot be assigned to avoid okay all right and let's see if it's help us okay now let's go ahead and run it we're over here now let's click on this so yes it's working it's showing up yes it's working and you can select the time it could be 20 it could be 10. so what unchanged does is that once you click on this definitely it shows up and then whatever the value you select it saves over here but remember that items returning drop down menu item as a string but this one only takes integer so that's why we are pressing it to integer okay so that's the idea and once we do that we save it there and once we save it so we reflect it over here immediately okay so that's how it works so so far this section is working and now would be working on this section okay now this section should be pretty much the earlier section first we need to go ahead and declare over here all right okay perfect so we already worked on this thing and all we could do we could copy paste this one okay and now over here instead of select remind this one we could do repeat repeat and here uh we don't need any of this thing we just can keep that one and as well as selected repeat it should work okay and over here things also need to be changed okay so repeat and now over here whatever the value is there new value we can directly pass it down because it's already in string format hopefully it makes sense okay perfect so now with this uh i think we are pretty good to go but now the value is already in uh text format so we don't need to transfer it so this is the same over here it's value but what we could do we could do a simple text style i'll check her but based on your version you might not need this so let's save it look at our option well to work out on this section first we have to understand the layout definitely this is a row layout and as you know the first section also has this column layout okay so we'll put them in column so let's go ahead and get started um what you could do we'll come over here and now here first we'll assign a row over here okay and we'll declare our children okay we are fine and now this one will do it in a separate function okay or actually we could do it here it doesn't matter though so we'll do it here like this column and it will have children and the children the first one definitely is a text right so that's what we need to do color and now we'll assign style here style so title style like this is the one we have in our theme file remember okay so we did this things previously so come over here okay and now let's save it look at our monitor yeah it's there okay perfect and the next thing we want uh showing this color okay now the color here you see they are on one line horizontal line uh so so they're laid out horizontally now in flutter there is a widget which is called wrap wrap wrap so we can use that widget wrap why because wrap widget helps you put things in horizontal line okay so that's the default setup so that's what we can do so the layout should be horizontally okay now it takes children so we'll go ahead and do it and now here children uh would be saved in a list okay because we want to generate this color palette or colors dynamically so that's why first children would be in a list rather than hard coding them one by one so we would generate them dynamically okay so we do list and right here we jet now because each of them is a widget okay their color widget okay so that's why this is a list list of widgets okay and we'll generate to them so we'll call dot jna generate so this is a function that shipped out of the box from a list uh well this list what is this this list iterator are from this list okay so it is shipped out from there directly so that's what we're going to use now generate as you see it takes a few parameters length and a function okay and growable but for us first two is enough so we want to generate three widgets so we write here three and now it takes a function if you hover over on it okay so but of course the function is anonymous which means that we don't need to define the name it takes parameter okay so once again if you come over here it takes into parameter so that's what we are supplying here and now we return okay now return what um we need the semicolon okay so we can return here say a circle of water itself uh takes a few parameters the first one is radius so we'll put here say radius 14 and it also takes background color so background color would say first just let's see the demo so background color dot gray okay so now let's go ahead and save it and see the end result uh well so these are the three colors uh sorry these three uses color widgets we generated dynamically okay so it's pretty simple first use wrap and then list the generate and supply function with the number of time he wants to run it okay now here's a problem so they're too close to each other so we can assign some padding on it so we'll use padding widget and now let's save it but it's too much on the left and right because it's in every direction we don't want like that we just want in one direction and the right so we'll do 8.0 is much better okay and uh now here we want to start from the left side so here we can assign cross-access alignment property cross access alignment dot start okay perfect okay now this is too close to the top field so we can assign size box here so we do say height 18 so let's save it perfect okay now here these two also too close so here we can also assign a size box okay and here we do height say 8.0 okay now here comes the next part how to generate color dynamically okay because we need this three colors as we saw from this uh design so how do we generate these three colors now here do remember that we have this index right so using this index we can change the this color so we can use the index so in flatter we know that we have itenary operator so first we'll check index equals zero if it's a zero then say we would use primary color we already have primary color defined otherwise say we would use the pinkish color or pink color like it's also defined in our theme over here so now let's go ahead and save it perfect so now the first color is okay but the second two are repeating we don't want the second two so first we are uh just checking on if it's zero or not if it's not zero then rest is the same color that's what is happening here so we are done with zero so when it comes to this one over here we can actually do one more check we can check if index equal 1 then we do pink so we show this pink color otherwise we show the yellow color because we also have another color declared in our theme okay now let's go ahead and save it yes perfect so now we have this three colors and we did that using and the checking on the index hopefully it makes sense all right uh so now that that is so far so good well another thing is that we want to be able to click on the color tap on the color right i mean we want to select the color so how to do that it's pretty simple so now here we have this uh padding widget right so we want to be able to click on them so for that one we can wrap it around gesture widget so let's go ahead and do it so do gesture uh detector gesture detector right and over here it takes on tap function so within on tip function uh we can access the index and save it okay and based on that index we can change the color over here okay all right sorry i mean the tick color like that okay uh so now first go ahead and declare a variable so that we can keep the track of the index which one has been clicked so to do that come come at the top and over here let's declare a variable we'll say end selected color so enter color the first index is zero this is the default index so now once uh we select it we'll save it okay so the selected color equal index so whatever the index you click on whatever the index you click on here is the index so it would be saved on this one all right okay now of course we need to show this tick mark okay now tick mark could be child of this circular water so what we'll do we'll just go ahead and create a child over here so child and that should be an icon so we could do icon icons dot done and we can use color colors dot white and we can also use the size here it's a size equal 16 so now let's go ahead and save it and check our result now of course the size is there everywhere i mean sorry that the down icon we don't want the down icon to be everywhere so we can again uh use this uh index this index and based on that index we can check which one has been clicked and on the the one has been clicked on that we just put this icon otherwise we don't put anything so here uh let's go ahead and check it now this one okay so with this here first we see so selected selected color equal index color so that means wherever you click that selected color and index if the match will show this icon otherwise we don't want to show anything so we'll have an empty container colorless container okay hopefully it should make sense now let's go ahead and click on this now it doesn't work because we need to here use set state to trigger the redraw so now let's save it now let's click on this yes perfect now it's working okay so we are able to select colors of course you can also put a log to see the index print so index 0 index 2 index one perfect so everything is working so now here we are done with this section i mean this color section now you saw we put it in this uh inside our main section but we can put it as a separate function so i'll just copy and cut this one and here i'll create a new function i'll call it color palette okay now here we want to return this one okay and as we returned we just need to do one thing call it from here so it's a color palette i think it's a 1p or 2p doesn't i'm sorry about that not sure anyway so done with that one but now we also need to show this this one and we already have done the heavy work have electric lifting before so remember we created button early so we can just call my button my button this one it takes a label our label is create task and now for now we can pass empty ontap function okay all right now let's go ahead and save it see the result so everything is working so let's go ahead and give it a try so so far everything is good so next we'll see how to validate our form and submit it to the database definitely that's for that reason we need to install sql package so we'll do it in next part well the first thing we want to do we want to validate our data once you type in and click this button create task before creating tasks you want to validate them okay so let's go ahead and create a method over here and we'll call it uh say validate method validate text or data like that okay all right now over here we do validation so now let's go up at the top and here i already defined this two variables so text editor for uh text editing controller and for node controller text editing controller so these are the two controllers we need once you type in data over here and want to save the data for later use so if you didn't do it go ahead and declare to variables like this okay perfect now come over here so the only validation we need to do here in this case that whether they are empty or not and these are all auto filled okay so you have to choose any one of them as well as there is also default value okay so it doesn't really matter so we first want to check quickly that whether these fields are empty or not okay so we'll use the data from the text controller do remember once you type in data here they're automatically saved in text controller so now let's go ahead and check on the text controller we will do if statement if not controller if title controller and we want to get the text part is not empty is not empty and uh not controller dot tax dot is not empty so those both field are not empty then it means that data is there in that case first we'll submit data add to database all right but that's the method we need to create and we'll do it later and once you submit the data to database we can go back to home page to save the data then we can simply do get dot back so with this we'll go back to the previous page once the data submission is done okay all right so if now they're empty it means that we can't submit the data so we'll fall back to a new condition else if okay so now we'll quickly check once again over here text title controller text now is empty so if data is empty so if one of them is empty so that's why we have our operator here we do next to do not controller is text is empty so if one of them is empty we'll send a message to our user so we'll use get.snackbar to send a message from the bottom so let's go ahead and type in required now here all fills are required okay like this all right but we can style it further so let's go ahead and do some styling so snack position so snack position snack position the bottom so you want it to pop up from the bottom and we can also set up the background color um we do colors dot red or like we have pink color right now uh background color okay colors dot white actually we want white background and now let's see i think we need to come over here and we can also show an icon over here so i can i can start say for example um warning so this is the icon we can show and what else so now let's save it and click on this so let's see oh of course we are not calling this one we need to call this validate method so we'll call it from here right now we are passing null so we can just call it from here so click on this and it's not responding that's because i'm missing a a bracket here and we also need to set our controller over here we should really pass it because it's over there in the file but we are not passing it so let's pass it we just simply write controller and we do title controller and over here we'll do controller and we do not controller okay yes now let's save it okay now let's go ahead save it and of course you see things right okay so now here the problem is the background color is white so now let's go ahead save it and run it one more time so required all fields are required right so now here's the thing so let's try it so if we have all this data available that it should go back to the home page right so doing test test and i think these are all okay fine now yes so all the data are available now it came back to the home page now home page does have a little bit background problem which doesn't match with the color palette of the app bar we can fix it easily so over here for scaffold we can pass a background color based on our context theme okay so we do background color now let's save it yes now they look much similar right yes and it's working as well yes everything is perfect now let's do one more test okay yes this came back and over here it's pretty much same so for now we are done with this validation now we will see how to submit data to our database well to submit data to database first we need to come to this file and install this sqflight library for storing data locally in the database okay make sure that you install the latest version and once that is done we will come over here and over here in the lib folder what we'll do we'll create a new directory and we'll call it models dot models okay now over here we'll create a new model so model name is task.dart because uh we want to save data in the database and retrieve data in the database but we need to tell the database uh like how the data is coming in their format okay and that's why we need uh this model okay model tells you how to get data and how to save data to database okay and also the format that's what it does okay now i already have the model so i'll just copy paste it because this tutorial has been too long so i don't want to really like keep typing so here some of the things that we need to take care of these things so uh either it cannot be null or we could do like this for example now the arrow should be gone so just tell the compiler that there could be no well there are many different ways to deal with this thing so it doesn't matter in our case because our app is still very simple but you get the idea so now these are the fields uh they are related to the fields over here of course the id is not the one over here id would be in the id in database when you create each record so that's the id and the title note date start time and term color and so these are all these fields over here but only one field is not here which is completed which uh we'll do manually later because we are doing a to-do app so at the uh to the app so the task has been completed or not we can mark it later so that's why we have and now later on so these are the fields that our model will have and the model will get data from this file over here so then we'll initialize the data okay so they're the same name and then when we submit the data to database so we have to convert the data to json format okay so that's what it is doing over here all right and do remember that this field's name they're also they would be the same as the field in our database column which we'll do later now once again to tell you what is json format json format is like key value pair like that so you can understand so this would be the key and value would be coming from our file over here okay so that's the json format so before we submit data to database we need to give the data in json format to the database and they do the uh rest of the handling we don't need to worry about that one okay all right so now our model is ready uh well another thing is that now here we also have from json so when you retrieve data from database we need this kind of format so here we'll have the like say uh value so we'll save the value in this kind of field okay from database which would be able to access later in our app all right now the next thing we need to do we need to create another uh file first we'll create a directory and we'll call it controllers because controllers would help us to process data and after processing data we'll submit the data to database so controller does the processing at the same time controller sits between model and ui so here is our ui do remember ui has this elements or files okay so what do you see on the page that's called ui so when you send click the button submit the data it goes to controller and controllers sends the data to model and actually model also has to do with the database they're connected anyway so now here we'll create a new file and we'll call it task controller dot dart okay over here so over here we'll do our some complex operation but for now it won't be that complex okay very simple though now we'll here create a new class and we'll call it uh task controller and which extends get x controller once again i'm using get x because it's much easier to deal with the data uh using get x package and dealing with database and processing data could be complex operation but get x would help you to overcome those problems it makes things very simple so but we need to override here a default method that comes from get x is called void on ready okay and it is a method super dot already okay now this gets probably this gets called during the initialization okay all right so that's our controller okay now the controller would receive data from our ui ui is this one over here do remember that earlier we said that once we validate the data and validation passed then we'll send the data to database of course first we'll send the data to the controller so this is the place from where we send the data to the controller okay so we need to define a new method here let's add task to the db all right like that so over here first we'll submit the data to the controller so let's go ahead and create this method so we'll call it add task to db well this is the task we want to add to the database i already typed in it because we want to save some time let's go ahead and import the library now over here actually we are passing the data to our model do remember that this is our model so this is the constructor so this fails over here the same as the field over here okay so we are passing the data for node so which is this one we are passing the data for title this one so for each field do remember that earlier we learned that we already declared these variables so they saved data so all these data are saved in these variables and later down the path we send them to the controller using this model and this field are same as the field name in our model once again they have to be same otherwise it will get an error okay uh so now here this one we want to send this to the model but now here definitely we can't send it like this we have to call a method okay we can't really call the constructor directly okay so uh we have to send it to somewhere uh like say for example now i create a value over here variable which is a task okay so it would go to task and where is this task where this task will go actually we can wrap it around the method okay but that method has to be declared over here in our task controller so let's go ahead and declare a method in task controller so over here we'll call a method and the type is future void and we'll call it add add task and it will take object of task okay and then we'll return something and from here actually we'll insert data to database now as you see uh let's import the library and here insert this question mark okay well for now we do return null we are not returning anything but now here is one thing so this is the method we can call from our ui over here do remember this is a controller and as we call we pass the task model data as a task object okay so that makes it simple so now here all of these things all of these things would put inside a variable uh put inside a method which is called task method okay so now here before we can access this method over here we need to um initialize this method okay so let's go ahead sorry we need to initialize this constructor so let's go ahead and initialize this so before we go ahead and pass this data to controller first we need to initialize this controller okay so we'll initialize it at the top over here okay so we'll initialize it over here so you do final task controller and we'll call it task controller and then we'll call get.put task controller okay like this so once you use get.put and with input you can call a controller the controller available in your project or the controller you want to initialize and it would call that controller and initialize and that initialized value would be saved in this variable okay now let's go down now over here so we can call task dot now here we already have a method what is our method let's see we our method is add task this one we can call this one okay but now we already saw that it takes an object so we can just we can just pass our object around here the object we created early all right now here we need to put semicolon and with this actually uh we are pretty much done but of course we are not uh passing anything to database yet okay yeah so now we need to create a database file where we can initialize our database let's see we have an error looks like okay well this is the error but we'll take care of that later so first go ahead and create another folder sorry and we'll call it db database and here we'll create a file and we'll call it dv helper dot dart okay now over here we will initialize our database so we'll call the class name db helper okay and we'll initialize the database over here database and the database is not i mean we we are going to create one but we don't have one yet but whatever we create we'll save it in this one and the type would be database that's the meaning all right and then we do static final int version so it requires you provide a version so you need to do that and static funnel string also your database name okay so table table name is your database name and our database name is a task anything you want you can call it now here we need to create an init method okay so we're going to do that so here actually we are going to initialize our database okay i already wrote the method over here so first we need to call this method from somewhere once we call that it will check if the db is not null if it's not null that means it already been initialized then we'll return it's not been initialized so we'll go we'll go ahead and call this function and we'll provide our database name over here okay yeah so this is the database table we want to create so it will give us a path in the memory of letter and then so i think at the same time it will initialize the database then we can open the database and once we open the database we can use this oncreate callback function so what it will do it will create a table for us so with this a database is created and with this this function a table is created in the database okay and of course if you're familiar with sql statement you know that create table means create a table for me and here the table name the table name is uh this one but our database name is this one do remember they're the same name though it doesn't matter you can have a different name now here you need to define each uh column and their property at the type they take so definitely we'll have id in the database and string title so the title is string type note is a text type because you can type a lot so text almost take unlimited number of text and our date so these are all string type so these are other fields that we are saving them as either string or integer okay so it makes sense now is completed also uh integer over here now if if things go wrong we'll just uh return here error that will print the error on the monitor okay or on the screen all right so now this is about the init method now init method we need to call from our main method okay so main method over here so over here when the app initialized we need to call it from there so we'll call await and we'll call let's see db helper dot init okay yeah so what's our file name the class name is dbhelper over here and the method name is init method so this should be called when our get storage initialize so at the same time okay before we actually run our app anyway so now over here so with this init method but this is only be called first time we install the app at that time it will initialize this database and table okay now next okay now we'll create an insert method okay so we'll call static future int and we'll call it so here i created this init method but it might throw some error so in that case here you need to put this question mark and as well as import the library and over here let's see and at first you need to check the database is uh null or not okay and at the same time if it's not null whatever is here we'll use that otherwise we can use a random number okay anything and let's see what's happening here it's also asking you to put a null checker okay anyway so this is the method we want to call we want to call from here we want to call from over here okay do remember you call add task where do you call it from you call it from here add text so it gets all the data from here and then it sends to this method right at task at task is over here now from here actually we can call this uh insert method okay so it's calling it would be pretty easy so what all we would do would call db helper this method and this sorry this class name and then we'll call insert okay and we just need to pass this task object over here all right and then we should be good to go now another few things though like this inserting or retrieving data could be slow process so you need to await okay so otherwise uh you might get error or even you'd see you can't insert it even if you insert you don't get back anything all right i mean you don't get back any result from uh database all right so now let's see so over here we are good with this and now i think we also need to use a weight here and uh async modifier yes and let's see and come over here db helper so the type is i guess it should be int okay why why it's in let me explain to you if you come to dv helper over here now this is the method right this is the actual method in our package and it returns int okay and as you can see it takes this kind of value over here all right the table name and the value so that's what we are doing this is the table name and value but anyway so this method returns a future so if a return method returns future for that one we need to use a weight and a sink and at the same time to make sure that app doesn't crop you can crash you can also use a future keyword the method that calls this kind of method okay like this this this method is calling this method okay so that's what we are doing here so eventually this returns end okay so that's why here over here so it returns int so it will get into result from here so we need to define the return type as int okay now anyway uh so we should be good to go and another thing we could do we can now if you see that what it returns it returns the id of the last inserted row so if it can insert successfully then it will return the id of that row so it's returning here we are grabbing it here as well and the returned id actually we can grab over here so we can declare a variable where say into value okay we'll save the value over here just to print out that what's id is being inserted so we can print over here so we'd say my id is with the value okay and with this we'd be able to print all right now hopefully everything should be good now we'll uh stop the app stop all okay and restart it okay well now here we have this message creating a new one and let's see so hopefully it created okay because it printed this log okay so now we can go ahead and uh create a over here a form so would say flutter learn flutter and i will keep this for now default doesn't matter we just want to test it so now let's go ahead and now before we go ahead and uh create this task button before we go ahead and click on this task button actually we can print oh well yes we'll get the log over here so we can go ahead and create it create the task all right now it returned id one that means there was uh one id created successfully okay it means that one row has been created in the database now let's create one more and we'll see say programming call it programming learn programming and this time maybe we can also do a bit of this operation and say 57 okay say when it's early so now let's see this time we should get uh this page my id should should be two right let's go ahead and check it yes my id is two so that means that we are successfully uh able to insert the data in the database okay next we'll see how to retrieve the data in the database and show them over here okay [Music] [Music] [Music] you

Channel: dbestech

Views: 18,954

Keywords: flutter sqlite database, flutter sqflite, flutter crud, flutter, flutter mysql crud, flutter local push notifications, flutter sql crud, flutter sqflite crud, flutter sqflite database, learn flutter step by step, flutter for beginners, flutter ios and android app

Id: 6SaCntGgi5o

Length: 153min 46sec (9226 seconds)

Published: Thu Sep 23 2021