📱 FULL Flutter Beginner Course • Programming Basics / Widgets / Navigation / User Input / UI

hey what's up welcome to the flutter beginner course my name is Mitch and I'm going to be teaching complete beginners with no coding experience at all on how to create beautiful apps with flutter the reason I made this course is because this is something I wish I had when I first started getting into flutter app development and this ain't a joke but this can pretty much replace a computer science degree because I'm going to teach you assuming you have no coding experience at all I put myself in lots of student debts so you don't have to now you don't need any programming experience but one thing you do need is that I ask you to have flutter installed on your computer and you know how to open up a new flutter project if you can do that then I'll take care of the rest so we're going to start from the very beginning with the basics of programming fundamentals and then everything in flutter is a widget so I'll teach you the essential widgets every developer needs to know then we're going to look at navigation and how to navigate around to different screens then we're going to look at the difference between stateless and stateful widgets and then a really important concept is user input and then I'll show you how to put this all together and create a functional to do app and I'll also show you how you can save the data in the phone's local storage and then we're going to finish off with an e-commerce type app that has a very beautiful UI and the necessary functionality like adding items to the cart and things like that so that's the plan instructor for this course now some general tips before we start the first thing is remember you have the entire internet at your fingertips so if you come across something you don't understand the act of formulating the question and searching for the answer is how we learn and the second thing is what's more important than taking this course is for you to actually just sit down in front of a computer and code there are many little nuances that are difficult to learn just by reading or just by watching someone else do it so make sure that you put in some time and some hours into learning this cool so that's all the housekeeping stuff out of the way I'm ready if you are so let's start from the very beginning so I've opened up a brand new flutter project and you should just get this demo encounter up now I'm just going to delete everything below the main function so I can teach you how to do this from scratch so with any code base everything always starts off from this main function and you can see we're just running our app so let's just create our app real quick now in flutter there's two types of widgets we can create a stateless widget and a stateful widget I'm going to just go with the state list widget for now I'll explain more about the difference between the two later on so the first thing you always need to do is just to return a material app and this will just be the basis for everything so if you save this it'll just be a dark screen because it's got nothing in it and in the home we're going to just specify a scaffold so this will just be a blank app and it would be the basis for everything else that we create now one thing is you can see that debug Banner which is there just to show that we're still developing the app now I don't like to see that Banner so I'm just going to set it to be false yep so we just have a nice clean app and the other thing is you see these blue squiggles is because they want us to put a const tag but don't worry too much about that I'll explain that a bit later on now before we look at any app development the first thing that we should do is to look at the programming fundamental so I'm going to teach this as if it's for people that have no coding experience at all and I'm just going to get you up to speed on all of the basic concepts that we need to code so the very first idea is a variable so we can store different types of information into variables now the sort of main variables I'm going to show you here so the first one is a string now a string is just a string of characters which in other words just means text so we can say like my name is Mitch Coco and the next important variable is an integer so like a whole number say like an age I'm 27 and then you've got double which is for numbers that have a decimal point right so for example like pi and then the last essential variable we need to know is a Boolean and Boolean just means if it's a true or false value so it's just one or the other so for example is beginner yes I'm a beginner true so these are the main variables that you'll need to know there are other variables that you will pick up along the way but I think these four are the the most important ones and so now that we have information stored in different variables we can now look at some basic operators so the first thing is just the basic math operators now if you know any level of math this should be sort of familiar for you so I'm just going to run through them anyway so we've got the plus the minus we've got the multiply divide and also remainder so if I just go through these let's say for example one plus one we know is two four minus 1 we know is three and in code for the multiplying button we use the asterisk sign so we know two times three is six and for the division we use a slash symbol and finally this percent is for the remainder so if I say like 9 divided by 4 gives us a remainder of one so these five basic math operators are pretty much all you need to know so we've got the add subtract multiply divide and the remainder cool so by the way if you want to test any of this out so I told you everything starts off at the main function so we could just go and do a Quick Print here say for example let's print hi there and if you bring up your console and you restart this you can see it'll just print in our console hi there so if I just play around with some of these numbers we could say one plus five and it will give us six so because they're like nine remainder 4 gives us one so yeah we can always use some little print statements just to see what's going on but now we have the basic math operators down the next thing we need to know is the comparison operators so for these ones we have say starting with the equals one so this kind of double equals it checks if the two values are the same or not right so five equals to five is definitely true we also have the not equal to which is represented by the exclamation mark So 2 is not equal to 3 that is true we also have the greater than signs right 3 greater than 2. we also got the less than sign and just like in math we have the greater or equal to as well as the less than or equal to so hopefully you're following on so far so if I just come back to my main function and just play around with it a little bit if I print 9 is equal to 9 you can see it's true let's do another one say 9 is not equal to 9. we know that is false suede which brings us to the last type of operators which is The Logical operators so for this one the first one is just the and symbol so and operator so this returns true if both sides are true so for example we could say is beginner and the other condition is is age less than 18 years old so we had some variables at the top that we created from the beginning so we can see that is beginner we are true and the age I'm 27 years old so is beginner is true but age is less than 18 is false so this one should be returning false because for this to be true we need both sides to be true now there are situations where you might want to use an or operator and for this one it's only true if at least one of the sides are true so is beginner we know that the left hand side here is true but the right hand side is false but since one of them at least is true then this will return true overall and then the last thing which we kind of talked about before is the not operator so this one just Returns the opposite value which is this exclamation mark So if I say exclamation mark is beginner then we're going to return false cool so if I try this again now since we have our variables in this stateless widget let's go down to this build method and we can just try to print some things here so let's say like like that all operator you can see it returns true cool so we looked at some variables we looked at the basic operators that we need to manipulate this information and so just to sum up just to make sure we're on the same page every code base starts off in the main function we're running our app and this will build the widget down here so let's continue this on so now let me teach you about some control flow so that's for right now at the top let's call this programming fundamentals and now we're looking at the control flow so control flow is how we're going to tell the computer how to get things done so for example the very first one that anyone needs to learn about is the if statement so the way it works is if certain condition is true then let's do something so for example we could say if age is greater or equal to 18 just print you are an adult right so let's try this out you can see yep if I restart this our age is definitely above 18 so yeah we are an adult now the next thing is we can have an if else so just check for a standing condition and then we can have all of the other cases so just going off of our example if age is greater or equal to 18 print you are an adult else print you are not an adult so this will just account for all the other situations so just to show you here if I say like I'm five years old then it'll just go through the control flow and tell me that I'm not an adult cool let's change that back to 27 so we looked at if we looked at if else and one more thing is an else if so what this does is it just checks for another condition right so the example I can give for this one is if your age is less than 13 then you can only watch G-rated movies else if you're less than 18 then you can watch G-rated and also PG-13 rated movies right so this will just go in order and check the first condition okay so if I don't qualify for that first section then it'll go on to the next condition and so on and then at the very end of all of this you can have another else just to get the remaining cases right so if none of those conditions are true then at the very end you can watch gpg and also R rated movies so if else and else if these are the fundamental control flows for any programming language so you're going to be using this a lot now sometimes you might be using it too much so for example let's say we have a grade like a school grade of B and I just want to know by checking the grade how well the student is doing right so we could definitely use an if statement here say like if grade is a then print excellent else if grade is B print good if grade is C say fair and then you can keep going down right now if you find yourself using too many if statements like this it might be a better idea to use a switch statement just to show you if I was to do the exact same thing but with a switch statement it says okay switch and we're looking at the grade and we can think about the different cases that this grade could be the first case it could be an a and so if it's an a then print excellent and then we can have the case for B have the case for C and so on and then similar to the very last else statement that accounts for all of the other situations in a switch statement we can just place that in a default so if none of those cases are true then just print invalid grade so these two blocks of code do the exact same thing but if you have a lot of cases then it might be better just to use a switch statement instead of an if statement right so Yep this is the general structure for a switch statement awesome which brings us to Loops now just to sort of illustrate the need for Loops I like to think of an example so I want you to imagine you have a box of 10 colored crayons and you want to draw a circle with each one so one way we could do it is we can say draw a circle with the first crayon then draw a circle with the second crayon and then the third and so on right but instead of giving the instruction like this it's much easier for us to just say for each crayon in the Box draw a circle so this is what a loop is going to be used for so the very first type of loop is called a for Loop and so if I was to just show you here the requirements for a for Loop is we have to have an initialization we need to have a condition and also an iteration which sounds complicated but if I just show you as a quick example here for my initialization I'm going to start with I being 0. so most of the time we just use an integer for this and you can pick any letter but I'm just going to pick I and let's say okay starting at zero and as long as I is less than or equal to 5 then keep incrementing and going through the I so I equals zero is our initialization I is greater than equal to 5 is our condition and then I plus plus is our iteration which I guess I haven't really explained that plus plus what that is so coming back to our basic operators let's add it on here so plus plus just means incrementing by one it just means I'm going to add one to myself and similarly minus minus means we're going to decrease by one so these are kind of nice short way hand to do it so for example five plus plus is just six five minus minus is four so that's what that's doing right so that's our iteration we're just going to keep increasing I by one so if I just show you like what this is actually actually doing if I print out the I right let's see what happens so I'm just gonna restart this and you can see starting from zero it'll keep incrementing by one until we get to our condition which is being less than or equal to five right so it would just go through the loop and print I equals zero one two three four five so if I make the condition say 8 then it's going to print it eight times cool so that's how you use a for loop on a very basic level now one couple key words that's going to be helpful is you can actually say something like this we can say if I is equal to say 6 then let's break out of this Loop and so if I just run this again what happens is it's going to start at zero and it's going to go through until 8 but let's see what actually happened so we went zero one two three four five and then it just stopped and the reason why it stopped is because we have this little check here saying if I is equal to 6 then break out of the loop and so it'll just stop the loop entirely now similar to break which just breaks out of the loop we can also have a continue keyword and what continue does is if I just show you the behavior first of all starting from our zero going to eight it'll print everything but it just skips six right so that's our condition here so if I is equal to 6 then just continue and skip this current iteration and that's what continue is saying cool so using these you can actually do a lot of things now I'm going to teach you one more type of loop which is a while loop which actually looks simpler so in a for Loop you have to specify the number of times to Loop so that condition but sometimes if you don't know how many times to Loop then you can use a while loop which basically just keeps looping until that condition is met okay so for example right let's say I've got an integer saying countdown being five so while the countdown is still a positive number then print the number and let's go down okay so this will keep going down until we reach basically zero right so if I print this out starting from five four three two one and then it just stops right so you can also do loops in this way as well maybe I should make this look a little nicer let's put some lines here just so that our notes look pretty good but yeah let me teach you about functions so we just looked at some cool blocks of code that gets stuff done now we can organize these blocks of code into functions so that we can reuse them easily later on so I'm going to create a method here by the way functions and methods they are the same thing and just to remind everyone this main function is a function it's a method so the whole app starts off by running that main method and so let's create a very basic one so I'm just going to say void greet and let's just say a message here saying hello Mitch so when this widget gets built let's call that greet method and then you can see it will just print it out and by the way the word void what that means is void means that the function returns nothing uh shortly I'm gonna show you some functions that do return something but this one for now when it says void all it does is it just executes whatever's in that function so I'll show you in just a second a function that actually has a return type but for now let's have a let's keep it simple and just do void so we have this very basic function saying great now I'm going to show you how we can have functions that have some parameters and so what that means is okay let's say we have another grid function here and in this bracket we can accept a parameter and so the parameter I want to accept is a string called a name right and by the way we should make sure the function is called something else like great person cool so then we can say all right print hello and then also let's just add on the name of whatever we're given so coming back to our method here we can say greet person and you can see it's asking us to provide a name right and the type we need to give is a string you can see here so I'm just going to say just as an example if I say five it's not going to work it's got a red squiggle because it says here that int you can't give it to a string right so we need to give it a string so I'm going to say all right let's give it Steve and if I just restart this then there we go it's just saying hello Steve cool now just by looking at this we can see maybe we might need to add like a comma and a space yeah that looks a bit better but yeah this is the idea of having some parameters it's also called arguments and so you can have many of these parameters as necessary so maybe you can also ask for an age right then if you're asking for another parameter you can see there's going to be a red squiggle here that says two positional arguments are expected but only one found okay so we can just say 27 or 55. so that's how we work with parameters and now let's look at a function with a return type so I showed you and explained earlier that the word void means that the function is not returning anything so now I'll show you a function that does return something so instead of using the word void I'm going to call this method as a type integer and a very basic function here that we can illustrate as an example is an add function so I'm going to say I want two integers as the parameters so integer a integer B and I want to return the sum of these two integers so let's store a plus b into another variable called sum and you can see that the functions has a red squiggle here right because the void function from earlier all it's doing is just executing the code inside whereas our add function currently it's got an integer as a return type right so what that means is we have to return something right that's what it's saying here we have to return an INT so you have to say return and then just return the sum okay so how do we actually use this in practice if I say add say three and five this the way we kind of write this right now is doing nothing because it's calling the function but but we're not storing this sum anywhere so because it's returning a certain value right we can just print this value straight away like eight but it might be a better idea in these sort of situations to store that sum somewhere so I could say integers my sum and call that add function three and five and then we can just print my sum so the main point I want to illustrate here is that this function add actually returns a value right and we can store it in our integer called my sum right this is different from the void where the void just executes the code inside but it doesn't return anything awesome so now that we've gone through most of the basic programming fundamentals I want to just show you some of the important data structures to be able to store our variables in a nice way so the very first type of data structure is a list so we can have like a list of numbers say one two three and just to sort of connect this back to some of the earlier Concepts that we learned I'm going to create a quick method here called print numbers and I'm going to show you how we can use a for Loop to go through these numbers so remember before in a for Loop starting at the initialization of I being zero we next need a condition right and so instead of specifying an actual number I'm just going to say numbers dot length so just however long that list is we're going to go through it and let's just print the numbers for each of them so if I come to my method down here and I just print numbers and I restart this you can see it's going to print one two three right everything in that list and just some notes Here the way you can access the information in a list like this is through the index so in order it starts off as zero so for example like numbers and you get the number zero then that'll return that first number okay numbers one will give you two numbers two will give you three and so that's what I'm doing here in my for loop we're just going through each of the numbers and then the letter i is becoming 0 1 2 and kind of iterating through until we print them all out that's useful now that's pretty smart at sort of knowing what type we give it like we just said list and we didn't specify what type of variables this list should hold but you can manually specify it if you want which is a good idea in a lot of situations so we can say like list and this list Can Only Hold integers for example you can also have like a list that only holds strings right so for example we can say a list of strings that contains names so Mitch Sharon Vince and we can do the same thing here so we can say print numbers we can have another method say print names and just go through the length of names and print me out all the names so Yep this is useful for all types of information cool so that was just a list and just to make this a little bit clearer just so that you know the idea very clearly I'm just going to change these to names so that you can see where the numbers are going cool so that's how a list works the next one I want to show you is called a set which is very similar to a list by the way so a list is an ordered collection of elements and you can have duplicates whereas a set is an unordered collection of unique elements so it has no duplicates so we can have a string a set of strings and have some unique names and so this will make sure that there's no duplicates and it's just a set of unique values and then the last important data structure I want to show you is called a map so this one stores key value Pairs and so what that means is let's say I'm going to create a map called a user we can create a user and say like okay the name is Mitch Coco age is 27 you can even have like more Fields here like height is 180 and so you can have like a list of information kind of as a key value pair you're going to see this a lot throughout your app Development Career and by the way the way to sort of access the information in a map is similar to how you access it in a list so we could say like user get me the name and then that's going to print me the Mitch Co and user give me the age it'll just print 27 and so on so I'm just going to write some notes here just on how we can retrieve the data cool now if you can understand everything I'll just showed you just then that's the programming Basics that you'll need to know so the fundamental concepts now if you know the basics and the fundamentals really well so just the things I showed you just then it can take you very far and to be honest if you can understand what I just showed you then you've pretty much saved yourself a lot of time and money because this is pretty much what I learned in my computer science degree so so if you didn't go to a university or something that and you didn't get a computer science degree don't worry this is basically what we learned and these ideas and concepts are not just exclusive for flutter and diet this is carried over to other languages as well so it's quite Universal these Concepts so you have to make sure you understand these programming fundamentals before we move on awesome so now that you know all the programming fundamentals let's just delete all of these notes and now I'm going to show you about widgets in Florida so everything in Florida is a widget and so just to show you again I just want to delete everything below the main function and let's just start this from scratch so our main function is going to run my app which we're going to create here the stateless widget called my app and just like before we're always going to need to have a material app in here and if you look in the material out for the home this is where it's going to go to as soon as the app starts up and the very first widget I want to show you is called a scaffold now if you save this and you run it a scaffold is as you can see it's just a white blank app and by the way just before we move further you can see these blue squiggles is because they want us to put the const tag on but I don't want you to worry too much about what const and final means because it's not a huge deal for us right now so if you hover over the blue squiggles just go to the Quick Fix and let's say ignore prefer const Constructors for this file so I'll explain a little bit later on about what const and final means but again just to keep everyone on the same page so in our material app we're going to display a scaffold and the scaffold is a sort of skeleton widget that holds the different parts of your app so if I was to show you here the first thing you can control is the background color so I could say blue and by the way I don't like to see that debug Banner so I'm just gonna check that to be false so yeah we can choose a background color and again if you hover over this you can see that there's a lot of different shades of that particular color so you can choose the strength cool so just pick whatever color you want now the other component in the scaffold is you can see here the body so in the body I want to show you one of the most fundamental widgets in flutter which is called a container and a container is a really flexible widget that you're going to use for many many different purposes so just to illustrate what it does here we can specify the height and width let's say like 300 and let's also give it a color so if you save that you can see there's our container now you can wrap this container in another widget called Center which does exactly what it says it just centers it and like I said before everything in Florida is a widget so this container widget you can give it another child and put in another widget so here let's introduce the text widget and say Mitch Coco and you can see there is our text now let's just change the color of this container to Green so that we can actually see the text and one thing you're going to use a lot in containers is this padding so if I just say padding all for 25 you can see it's got some spacing around that text widget now and there's a lot of different versions of padding you can use so for example a lot of the times symmetric is useful so you can specify it just for the horizontal or just for the vertical and then the other one you will need to use is the only so you can specify padding for only a particular direction like left or top bottom right Etc but for our purpose let's just say we're going to put a padding of 25 all around and if you want to decorate this even further you can go to the decoration and in this box decoration if I just show you here and I save it this is a very common error you'll face and what it's saying is you cannot provide a color and a decoration so if you want to specify some further decoration then you have to put the color inside the decoration so everything should be working fine now what can you decorate further well one thing that I do all the time is curving the corners so you can see this border radius we can make it say 20. and you can see the corners are much more rounder so this is a very common use and coming back to our text widget we can of course switch up the style so in the text style we can of course change the color we can also change the font size which by the way with any of this stuff if you hover over it you can see the information so it says it defaults to 14. so let's say like 28 and you can also change the font weight make it bold so you can change pretty much anything about it so that's a text widget now the next widget I want to show you here is an icon Now by default flutter has a lot of icons so you can just pick whichever ones you want now let's say I'm just going to go for the favorite icon which is a love heart and inside this widget you can change everything you want to again like color you can change the size and so on so this big collection of default icons are going to be pretty useful just out of the box you can use any of these easily cool so we've just been working on the body of the scaffold which by the way if you look at the side here you can also minimize certain widgets but let's go to our app bar now and you can give it the widget called app bar and again just to save it you can see there it is and then inside this app bar we can specify the title and you can also change the background color of course to whatever you like and if you look carefully there there's a little Shadow because it has some elevation so if you want you can set the elevation to be zero and that makes it much more flat with no Shadows cool and then if you specify this leading you can give it an icon for the left hand side if you want to put an icon on the right hand side that's going to be in the actions and you can see with the actions it requires a list so you can put more than one if you want but let's say I want to put an icon button here then yep you can see there it is sweet so that's the basics of the app bar now just coming back to the body I'm going to show you the next widget that is really important and it's called a column so I'll show you columns and rows but just starting with a column it requires a children of widgets so let's just put in say three boxes here and I'm going to make the first box just a container let's just have a height and width of 200 and make it deep purple and then I'm just going to copy this exact same container but maybe let's just make the colors a bit lighter so if I save it then there it is now let's actually go back to our scaffold and delete the background color so that we can see these better awesome and let's also delete that app bar as well since we're done looking at that for now and let's just focus on this column so columns are good widgets to display in a vertical fashion and Rose are going to do the same thing but for the horizontal and this current column that we have here we have our three boxes so a couple things about a column is you can control this main axis alignment and just to show you the differences right if I show you the center this is going to be aligned to the middle you can also go for the end and a lot of the times space evenly comes in really handy as well as space between so a lot of different ways we can space out the UI so that's main axis alignment now the other one I want to illustrate is the cross axis alignment now to show you this one let's make our first box bigger and make the following boxes a little smaller so if you save this then we get this kind of three containers like this and so we looked at the main axis alignment and how that changes the column I also want to show you about the cross access Enlightenment so if you say start then this will align everything to the left like this and so we're looking at the other axis now you can say end and it'll align to that side and center of course so using the cross axis and the main axis alignment you can space these out however you like cool so let's just bring them all back to the same size now you can see here in our containers we very specifically gave them a height and a width right they are very they are fixed to be a size of 200. now let's say this last box here doesn't have a height then it just disappears obviously but you can wrap this widget in another widget called an expanded widget and this one is also super super useful and expanded widgets go well with columns and rows because what it does is it just expands the widget to fill up the rest of the space so you can see that third box if I save this it just fills it up to fill the rest of the space and so if I just get rid of these widths as well and then I get rid of the heights for the first two containers and let's just put them all in expanded widgets let's see what happens now this is why I like expanded widgets a lot because instead of manually setting a specific size if I say like three expanded widgets then it's going to divide the screen evenly into thirds so it's going to be very proportioned out and so one thing you can have a look at is this Flex property and if you hover over it it's initially just a value of one and what the flex property tells us about is pretty much the ratio of this current widget in comparison to the other ones so for example right if I say Flex is two then that widget is going to be twice as big as the other and if I say three it'll be three times as big as the other so you can kind of have a good ratios going on cool so that's an expanded widget like I said it goes hand in hand with columns and rows so now let me show you one problem when you're using columns and rows so let's say our first box has a height of 350. in fact let's say all of these boxes have a height of 350 which is quite large and if you save them you can see it's not going to fit all on the screen right like the bottom Square doesn't fit so you get this sort of overflow problem and so now the next widget I want to introduce to you is called a list View so if you just change that column to a list View and you save it we're no longer going to get this problem because what a list view does is it's pretty much the same as a column but it can scroll so now we have a scrollable list which means all of our children should fit and you can also control here the scroll Direction so it's going to be vertical by default but let's say I want to make it horizontal and let's give these guys some widths then you can have a horizontal list view as well I didn't show you the row explicitly but it's going to be the same as a column but columns are vertical and rows are horizontal so columns and rows are for vertical and horizontal UI layouts and list views are used for when you want them to scroll now you can see the way we created this list view we specified the children for the list view right you can also create them on Demand by using a listview.builder and this one will be really helpful as well so in the item Builder you can create a list tile which is another default widget and we can specify the item count so how many do we want to create well let's say 10 and just to show you what's happening here just for the title here let's put in a text widget to display the index so the index is going to be starting from zero and we're going to go up until we have 10 items so that's going to be 0 to 9. and you can see that index if I print it we have a vertical list like this and so just to kind of connect this back to some of our previous Concepts let's say we have a list of names so I got Midge Sharon Vince and let's say I just want to print these names in the list view so if you look at the item count again instead of just manually specifying 10 you can say names dot length so this will just get the number of how long that list is and then in the text we can say names and just get the index so we looked at lists earlier on in the course so this is how we can display it now using a list View for the UI so similar to list views we also have grid views so if I show you how to do a grid view in the grid delegate just to keep it simple the one I always like to use is the sliver grid delegate with fixed cross access count which is a mouthful but all this means is let's say I'm going to put eight it's just how many you want in each row for the grid so let me show you here let's say like a chessboard right a chessboard is an eight by eight grid so let's say for the item count I want to have 64. and the item Builder let's just create a container here and it looks like everything's stuck together so we can't really see it so let's just put some margin padding on the container there it is so there's our grid that's eight by eight and so like I said before this grid delegate is just saying how many you want in each row so right now we have eight in each row we can say four and so that's what that number is controlling awesome so that's a grid now let's move on to a stack now stack also has children and what it does is just like the name suggests it Stacks different widgets on top of each other so let's illustrate this so I'm going to have three different boxes let's have a big medium and then a small box and so by default you can see it's just all aligning to the top left corner and stack has alignment properties just like columns and rows so you could say give me the center alignment you can do bottom right and just anything you want also now the very last widget I want to show you for this particular section is a gesture detector so let's just delete all this and in the body let's just go back to our very basic container and maybe let's just give it a child and let's just say like tap me and let's put it in the middle right so so everything in Florida is a widget which is really cool because you can just go to any of these widgets and you can wrap it with something called a gesture detector and what that does is it just detects gestures from the user and a very common gesture is the on tap but you can see here there's all sorts of other ones like long press you know double tap things like that and so if you specify this on tap method this will do something when the user Taps on this particular widget which means anything on this screen you can wrap it in a gesture detector and so the user can tap on whatever you would like to be tapped so I really love this widget and so just to show you with our sort of console just to show you that this actually works you can see if I tap on this box it'll just print it out user tapped and so now we can just start creating different methods and functions for this gesture detector so just to show you in a bit more practical way you can fill out the ontap method just right there in the widget tree but you can also separate out the function which is probably a good idea and so when we call this on tap then just go straight to this method awesome so I hope some gears are turning and some dots are getting connected in your brain but comment below and let me know if you have any issues with anything I'll try to comment help around but those are the most fundamental basic widgets that you need to know in flutter so now in the next section let's look at some more practical ways to create some real functioning apps sweet so now that we went over some of the fundamental widgets now I'm going to show you a couple of widgets that have to do with navigation so let's delete all this and I'm going to create a folder called pages oh what's going on with this testing oh let's just add this little const tag now in these Pages let's create first page and let's just have it as a stateless widget with a blank scaffold and let's create another page called the second page now when you come back to our main dot dot file in the home this is where we created our scaffolds before right so now what we can do is just go directly to our first page and it says Auto Import so it hit enter and so now if you just restart the app it'll just go straight to this first page so just so that we know which page we're on let's just create an app bar real quick and just say it in the title and what we're going to do is in the body in the middle we're going to use a button and when we click this button let's try to navigate to the second page so we have to specify the unpressed and so when the user presses this button let's try to navigate to this second page so let me show you how to do that we're going to use something called a navigator and we're going to push to the second page so if I just save this and I rerun it and I click on the button then yep it brings us to the second page which also is a blank scaffold so just so we know what we're looking at let's create an app bar real quick sweet and you can see automatically in the app bar it's already got that back button so this is why flood is really useful and easy to work with and this is the basics of navigation now a couple things I want to show you is another way to sort of handle navigation especially when you have a lot of different pages is to use some routes so in the material app you can specify a few different routes so for example the first one let's just call a second page and give it the second page and so once we have a route what we can do is instead of this bit of code we can just say navigator and before we did push but now we can say push named and then we can just give the route name here and so this one just makes it look a little nicer and easier to deal with and of course you can just add as many routes here as necessary Wilson so that's the basics of how to navigate to a different page now what I want to show you is a very common way to handle navigation is to have a drawer so if I just delete everything and if you have an app bar and you also have a drawer without even specifying anything here you can see that there's already that menu icon on the top left and if you click on it it'll open up a blank drawer so what we can do now is inside this drawer we can start decorating things so for example like the background color and the child it's common to use just a big column here and also for the very top there's already a default widget that's really useful for this situation which is called a drawer header and all this does is like if I give it an icon it just takes up a good chunk of space at the top so this is where you would usually have your logo and kind of similar to what we did before let's just ignore these cons tags for this for now yeah we don't need to worry about that cool so below this logo we can now have a few list tiles so say one for home page one for like a settings page and so what we can put in here now we can create a container with rows and columns and text widgets to create a nice looking tile but because it's such a common use case Florida already has some nice tiles to use so for example we can use a list tile and then give it an icon and give it a text and let's just copy this and do one for the settings as well cool now if you look in the list tile it's got that on tap and so if we press this then let's go to the home page and So currently we've got first page and second page so let's just delete that second page and I'm just going to start creating some new pages here so I'm just going to call it home page and then a settings page so it's just going to be very similar to what we had before cool and coming back to our main dot dot file let's get rid of this route and call it home page and maybe another one for settings page awesome so coming back to our drawer here if I click on this home I want to go to the home page right so now I can just use that navigator.push that we looked at before and same thing for the settings page sweet and again just to come back to our other Pages let's just create a quick app bar so that we know what we're looking at so if I just restart this so I'm in my first page go to our drawer and then we can click on the home page and navigate around cool now one thing I don't know if you noticed but when I open up this drawer and I go to the home page when I click back it still shows the drawer and if you look at most of the apps that we use today that drawer should be closed when I go back so what you're going to do is first of all we're going to pop the drawer so navigator.pop this will just exit whatever we're looking at currently so we're going to pop the drawer first and then we'll go to the home page so if you just save this and restart it what's going to happen is let's open up the drawer go to the home page but then if I go back the drawer is closed and that's kind of the behavior that we want for most of our apps cool so that's how you use a drawer which is going to be very helpful to navigate around to different pages in your app now another common way to do it is to use a bottom navigation bar so this is also something that you see a lot on in many apps right it's that bar on the bottom so if you look at the bottom navigation bar we can specify some items and I'm going to have just say three things here so the home the profile and the settings and then so you can look at this and say bottom navigation bar item and just give it the icon and the name sweet and if you save this you can see there it is on the bottom now decoration of course we can make this look prettier by changing up the colors and things like that but the main thing I want to show you here is how to navigate around so if you currently if you click on it nothing's going to happen okay cool now if you come back to our home page I actually want to get rid of this app bar now and I just want to show that it's our home page through the body because on our original page we're already going to have an app bar so I'll show you what I mean let's do the same thing for the settings page and we're going to need one more page for the profile okay awesome so just coming back to our very first page right let's create a list of pages so we've got that home page we've got the profile page and the settings page and then in the scaffold if you go to the body let's display the page of whatever we're looking at right now so at the beginning of the course we looked at how lists work so if I say like give me the zeroth index for the page that's going to be the home page as you can see if you go one that would be the profile page as you can see and then finally number two is going to be the settings page so we're going to need an integer to sort of track which page we're looking at right so I'm going to create a integer called selected index and let's just start off at zero which is the home page and then we've got these list of pages and so now if you come back to the body we can just say show me the page of whatever the current selected index is so it's going to start at zero and then now finally we just need a method to update the selected index so navigate Bottom bar what we need as a parameter is an integer for the index the new index that we're going to so when this method is called let's just set the state and just update our selected index to that new index here awesome now I just realized velocity is set State we need this to be a state full widget right because we need the screen to update but we actually made this as a stateless widget from the beginning so if you're ever in this situation where you need to switch between stateless widgets and stateful widgets you can just click and hover over the word stateless widget and on Mac if you press command dot you can see it's you can see there's a convert to stateful widget and so there's going to be a similar command for Windows as well but you can convert this to a state full widget and the reason why I need to do this is because I just wanted to set the state and update the index so now that we've got this nice method if you go back to that bottom navigation bar it says current index yep we can give it our selected index and also there's going to be an on tap and so if we type anything on the bottom then let's navigate The Bottom bar so we're going to call that method awesome and so if you just save this and you click around then we can navigate between the three different pages cool so then you can just go to these individual pages and decorate whatever you need to do sweet so that's how we handle navigation in flutter now we've opened up another brand new flutter project and every time you open up a new project you always get this demo counter app and it's worth having a look at individual bits and pieces of this code but just to show you I think it's a good idea to show you how to do this from scratch so I'm just going to delete everything below the main function and let's try to code up this demo counter app ourselves so first of all we're going to need to create my app and as we discussed earlier everything's going to start off from this material app and for the home let's just create a counter page now when we create Pages it's a good idea to create them in a separate folder just so that everything is organized and so this counter page is going to be a state full widget so so far we've been looking at stateless widgets but now it's time to look at State full widgets so for now let's just put in a blank scaffold and let's come back to our main.dot file because we can now import what we just created cool now when we create an app on a very kind of high level we need three things we need a variable we need a method and we also need the UI which is the kind of visual user interface that the user is going to interact with so for our counter app our variable is going to be an integer and let's start it at zero and we're going to create a method to increment the counter so anytime that we call this method then we want to get the counter and just plus plus which means to increase by one now anytime that we change the value of something and we want it to be reflected in the app we have to make sure to put it inside a set state so set state is used for stateful widgets and essentially what it does is it just rebuilds the widget and so if you don't do this set State then even though the counter value has incremented it's not going to be reflected on the screen if we don't set the state and rebuild the widget so that's the difference between stateless widgets and stateful widgets stateless widgets are widgets that don't change ever whereas State full widgets change depending on the state right so if any kind of new value has been updated and you want to change and you want to show the change on the screen then that's for stateful widgets and we can use set state to rebuild it so let's see this in action now I'm going to create a very basic counter app here so let's have a column and let's just have some text saying you push the button this many times now it looks like it's at the very top so I'm just going to access alignment to the middle and let's just Center everything so we've got our message and now let's show the actual counter value so in a text widget if you just show the counter you can see it's a red squiggle because because it's an integer and to show it as a text we have to convert it to a string cool so there it is just zero now it looks like it's quite tiny so let's just change up the style for this text and make it much bigger awesome and then the final thing we need is a button of some sorts so one of the default widgets that flutter has is called an elevated button so when the user presses the button let's just call that increment counter method and let's see what this button looks like cool there it is now if you click on the increment button you can see It'll increase and so if I just show you real quick if I was to say let's increment the counter but you don't include the set State part of it then it's not going to change now the actual value of the counter in the code is increasing but it's just not rebuilding the widget so we can't see the fact that it changed so that's what set state does okay it rebuilds the widget to reflect the change awesome now if you're a complete beginner learning and understanding how a very basic app like this counter app and how it works it actually goes through some really important ideas so I really recommend playing around with this and seeing what you can do you can create calculators I think that's a really good app to try to make as a challenge for yourself because if you think about what we made for this counter app we looked at variables we have a method to change the value of the variable and then now we know some basic widgets to to create the UI for it and now you understand the difference between stateless and stateful widgets to create a counter app like this now let's continue on with our learning so I've created another flutter project so again I'm just going to delete everything below the main function to start from scratch and let's create my app and our material app and what we're going to do here is we're going to create a to do app so let's create that in a separate page folder and so the main idea I want to show you with this to do app first of all is getting the user's input so in our counter app all we get from the user's input is just the user pressing a button so now let's collect some more information from the user so in the body in the middle I want to introduce you to another very important widget which is called a text field so without any further customization if you just save this you can see that text field at the at the middle there and so if you click on it you can actually start typing in the text field right away and now it begs the question well how do we actually access what the user typed so to do that we need a text editing controller so I'm just going to call it my controller and if you look at this text field one of the options here you can see is controller so we can give it our controller and so this controller just stores and gives us access to whatever the user typed in there cool now let's wrap this in a column so that we can have some other widgets here as well below the text field I want to create another button and let's say if the user presses this button let's have a method to greet the user and we haven't created this method so let's just do that real quick so wait there it is now let's just make sure to send to this alignment so that we can bring it back to the middle and now if I type in say Mitch and I hit tab and you can see without controller we have access to the text that the user typed sweet now if you look at the text field there's a lot of things you can customize about it so if you look at the decoration and you have a input decoration we can specify a border now there's a lot of styles you can go for but one that I usually go for is an outline border and it looks like everything's stuck to the sides so I'm just going to wrap everything in a padding there we go and one important thing that you should be using is a hint text so you can see here that this is just a string so the hint text is sort of the grayed out text for what you want the user to type in like give them a hint about what should be typed in here so for example let's say type your name sweet so now that we can actually get the user's input and we can have access to it let's actually spit back some information as well so let's output something so I want to have a greeting message so let's just create that at the top so I'm just going to have a string called creating message and let's just have a blank string at the beginning and what we're going to do is when we greet the user instead of just printing it to the console let's try to print it on the app so to do that we're going to say greeting message is hello and then let's just add on whatever the user typed in the controller right and since we want this to actually be reflected in the app when the change happens we have to set the state which again just means to rebuild this widget okay sweet so at the top you can see and I think now if I say type in your name and I hit tap then it says hello image cool so I hope that made sense now the main important thing that we learned just then is about the text field and using the controller to access what the user typed in the text field now there are some coding practices that will help your code be more clean and easy to read and so for example one thing we can optimize here is it's probably a good idea to just create another string here called username and then just store what the controller has in this string and then so now we can just say instead of directly going to the controller we can just say add the username so this will just make it easier for us to read the code later on yo what's up welcome back to another quick flutter tutorial in this one I'm going to show you how we can create a functional to do app using flutter so I'll show you how we can check off each task and also create new tasks as well as using a little slidable widget to delete the task as well and then finally I'll show you using Hive how we can store the data in your local device and it's actually really simple to do so let me show you by jumping into the code so I've opened up a brand new flutter project and just to keep everyone on the same page in my main function I'm running my app which brings us to this home page and in this homepage I've just got a blank scaffold so if you run this you should just have a blank white app and so this is where we'll begin now the first thing I'm going to do is for the background color let's make it a bit of a say yellow theme so let's go with yellow 200 and then let's create an app bar which if we save is going to be blue and so instead of specifying the color individually in the app bar let's actually just go back to the main.dot file and use this theme so this will probably be a good idea especially if you have multiple pages so the primary Swatch color you can pick whatever theme you want to go for but I'm just going to go with a yellow color okay so that will automatically change the app bar as well as The Floating Action bar which we'll use later the default colors are going to be whatever we specified here so that's good and let's give the app by a title and I'm just going to say to do and one other thing I like to do in the app bar is you can see there's a bit of a shadow there which personally I'm not a big fan of so the elevation let's make it zero I kind of like this flat aesthetic to it cool now next thing is in the body we want to have a list View of tiles so we want to have a few to do tasks in a list and so let's say just for now just to keep it simple in the children I'm going to have something called a to-do list which we haven't created yet so with this one let's create it in a separate folder so in my library you can see I've got the main function and I've got a Pages folder which currently we just have one page and I want to create a new folder called utilities so I'm just going to call it util sometimes I call it components but essentially in here let's create our to-do list or sorry to do tile okay then we can import my material dot dot and create a stateless widget called to do tile so before we create this tile let's just go back to the home page and you should be able to oh I called it to-do list I want to call it to do tile you should be able to import what we just created there it is and if we come back to our to do tile we can encapsulate the code inside this folder okay so this will keep our code nice and clean in the home page so let's start with a child just saying some um some tasks so let's say make tutorial which is what I'm doing right now here it is but let's give it some decoration and let's give it a color and let's just go for a yellow color cool so there it is now I'm just gonna put some padding around this container okay so you can see now there's a bit of padding there but maybe we could go for like 25 and then let's put some padding not outside the container but within the container for the child so let's say um maybe 12. that's looking pretty pretty good so far Maybe 24. yeah I actually like that better cool and you can see that the corners are very sharp and you'll know I don't like sharp Corners so let's go to the Border radius here and let's make this 12. okay looking pretty good so far now how about we include a check box next to this so that we can tick off a task which means in the child of this container we're gonna have to wrap this in a in a row okay so I'm just going to say put some comment here I'm going to say task name and then let's put in a checkbox so if you just start typing checks book checkbox you should see this default widget in flutter so you can see when we create a checkbox we need to give it two properties so the value and the unchanged so the value being a Boolean so it's going to be a true or false value like I did this task or I didn't do it and then the unchanged allows us to switch between the two so if we think about the to do tile right and if I just kind of comment this checkbox out for a second coming back to our homepage what I really want to do is I want to create multiple to do tiles right and if you think about what changes between each tile like what varies between each tile is going to be the task name and the value of each task like if I've done it or not and also we needed to create a method for when the user Taps on a particular checkbox so there's essentially three things that's going to vary between tile to tile okay so that's what I'm going to create here up here so I'm going to say final string the first thing is the task name and then we also need to know the Boolean so um task completed right this would be a true false and then the last thing is I need to have a method so I'm going to have a function and this is going to be a Boolean and we're going to call it unchanged because that's what this is called so if you're not sure about what this stuff is if you just hover over the unchanged I'm just copying the type of method that they require Okay so these three things let's create the Constructor for these so the first thing is the task name and then we need to know if the task is completed and then also we need to know what's the on change function let's get rid of this cons tag and now we can say instead of just fixing it to be make tutorial you can see it's going to replicate for each tile let's just say whatever the task name is same thing for the value we now should be able to know what the task completed is and the unchanged method we're going to give to the unchanged method cool so what did we just do if you come back to the home page you can see that out to do tile is a red squiggle because we have to fill these things out right so let's say the first task name let's call it main tutorial and then task completed let's say true and then on changed now unchanged we're going to create this method in just a second so I'm just going to say do nothing right now okay so if I save this you can see here it is so we have make tutorial now if I copy this and I create another one I could say do exercise and let's say this is false okay so this is how we create different to do tiles now one thing is this checkbox isn't clickable because well we've fixed these values to be true and false and we didn't specify the unchanged method so let's do that now now let's create this unchanged method in just a second and just before you do instead of using a list view that has children and we have to specify like what the widgets are inside let's make this a little bit more Dynamic and so what I mean is later I want to be able to have a plus button here so I can create new tiles and also delete new tiles so it's not ever going to be whatever's inside the children so I'm gonna just get rid of this and we're going to use a listview.builder okay I've made a separate tutorial on focusing on list view Builders so check that out if you need but I can show you real quick how to use it first of all let's come up to the top here and let's create a list of to do tasks okay so I'm going to say list to do list okay and let's put in some default to-do lists and the way I want to structure this data is first of all let's have the task name so I'm going to say make tutorial and then the second part of this list is going to be a Boolean to to denote if it's been done or not so let's say at the beginning it should be false because we haven't done it and maybe let's create another one here and say do exercise and this is also false so the reason why we created this separate list is because now we can just use this list view Builder and we can do some cool things so say item count we have to specify how many we want to build so this one is going to be just the to-do list length so however many we have inside and now we can create the item Builder let's grab this and we're going to return a to-do tile which is what we created earlier right and so now we can specify here so the task name so this is going to be to do list and we want whatever index we're looking at so this index will go from zero like zero one two three for however many items we have so for a particular index let's get the zeroth one so that's going to be this and then for the task completed it will be the same thing but number one so this is number zero and then this is number one and for the unchanged we haven't specified this yet so let's say let's create that now actually and I don't know why it's called P0 this Boolean I'm just going to change this to be value okay and let's call this check box changed okay so let's create our method so let's create our method here so this is just for the check box was tapped okay so let's create a void check box changed and so if the user Taps on the tile then the value we can give to the checkbox changed so let's actually accept this value so I'm going to say Boolean value and also let's get the index so which which to do task are we talking about right so that's controlled by this index so now I can so now I can give it a value and I can give it in the index I should put a question mark here some no safety cool so if I tap on this I want to be able to check this on and off right so let's set the state and what we're going to change is this value here or these values so to do list which index are we looking at are we looking at this one or are we looking at this one and if you take number one so that's going to be these guys let's set it to be just the opposite of what we currently have so I think this should work so let's just refresh this so if I check this off and on you can see now we can take this on and off cool if you have any questions about what we just did just ask below and I'll try to help out now one thing about this let's just go back to the to do tile and just kind of clean up this decoration I think that having a padding all the way around the 25 all the way around is not bad but you can see it creates this kind of double 25 there's like 50 here so I am a bit of a aesthetic creep so I want to change this from all to only and just put it on every side except for the bottom side so what that does is it just creates a nice uniform padding around all of these widgets so that's good now the other thing is I want to change this checkbox active color it's yellow which is in theme with what we want to do but let's make this a bit darker so let's go to this check box and let's say and in the check box we should be able to see the active color and let's say let's actually go for black to be honest yeah that looks much better and one of the touch I want to do is you know the you know this text widget right I want to have a strikethrough like if I if I did do the task we can show it with this checkbox but let's also cross off this text so if you look at the style in the text Style the decoration we can go for text decoration line through there you are cool so right now I actually made it to be always aligned through but we want to kind of follow whatever this checkbox is doing right which is good because we have this task completed Boolean so we can say all right in the decoration depending on if the task is completed if it's completed let's put a line through it if not let's just copy this and we should just be able to see a none option okay so this Boolean will control this for us so let's check this out cool if I check this then it's aligned through it and if we uncheck it then it's back to normal cool so we want to kind of put a line through it to get that dopamine hit as we do these tasks you know okay cool so in terms of our to-do app it's looking pretty good so far except for the fact that we can't add or delete a new task right so that's going to be the crucial bit of functionality we need so let's focus on that one so first of all let's create a floating action button so if I go below the app bar you can start typing Floating Action button and the widget is also called Floating Action button and we have to specify unpressed if I save it there it is let's give it a child sir I want to have a plus button maybe an add button yep here it is and so if I click on this if I unpress it what do you want to do I want to create new task so this method let's come up here create a new task so void create new task now what I want to happen when I create a new task is I want to show a dialog box so that the user can input the name of the task okay so we can say show dialog and this is where we return an alert dialog and say if I just save this yep there's nothing there because we didn't create it now usually we can create it inside here but again just to keep our code nice and clean let's create this in a separate folder so this is where the util comes in handy so in the utilities let's say dialog box I'm going to call it dialog box and so we're going to return an alert dialog and now we can come back here and we can say dialog box and press tab to Auto Import it okay so this dialog box we're going to create in this file here so let's have a look at what we're going to do so in the content let's create a container maybe height of 200. and the alert dialog let's give it a background color of yellow so let's just restart this and if I click this cool here it is this is our little little box that we want to have a text field now so let's create a column and I'm going to create a text field so get user input and then also below that I want to have some buttons like a save button and also a cancel button okay so if I just save this right now we just have a text field in there so we can just type stuff in cool so the text field it's fine the way it is but I like to have a border around it so let's say in the decoration input decoration and you can see in the Border I want to have a outline input border which if you save yep I kind of want I like this style just having a border around it as opposed to just a line cool and we can give it a hint text or maybe that's inside the decoration and this should be a string yep so let's say add a new task here it is and then if you click on it you can start typing and this yellow actually let's make this a little lighter cool okay looking good now below that we're going to have a row of buttons okay so I want two buttons a save button and then a cancel button so these buttons let's actually create another separate file so that we can reuse this button widget I'm just going to call it my button cool and when we think about creating this button what are the two things that we need we need to know the buttons name right and we also want to know that on pressed and so for this one I'm going to use a void callback which is a a suggested detector like it's a it's a method but it's going to return nothing okay so remember in the other one we returned a Boolean this one is just going to be a void and let's call it unpressed and let's create these Constructors and the button itself we can actually use a material button here and so the on pressed is going to be whatever we create in the other page and the child is going to be a text widget because this is just a widget and let's just give it the text cool and the color of it let's use the theme so theme of context color primary color okay so now that we created a little button let's come back to our dialog box let's say my button and so here it is let's press tab to Auto Import it and the text the first one I want it to be a save button and on the unpressed let's just execute nothing for now and let's create another one down here saying cancel cool so here's our two buttons now I actually want to have it more on the right hand side I want to have it like on the end and also this column but space evenly cool and actually we want to have a bit of a gap here so I'm gonna put in a constant sized box width of just four I guess yeah I just want a bit of a gap there maybe like maybe eight now when the user types some stuff in here how do we access this bit of text well let's go to our text field and you can see that there is a controller so we can give it a controller now I want to be able to access this controller in my home page so I'm just going to create the controller as a Constructor so when you create this text field you need to give it a controller and we can give this controller to this guy and so what we did is if you come back to the home page you can see that the dialog box has a red squiggle because we have to give it a controller so I'm going to create my text controller so I'm just going to say prola is text editing controller and give this controller to this guy cool so this would give us access to whatever we type in here now we now need to create the method for Save and cancel okay so coming back to our dialog box right now if I press save and I press cancel it executes nothing so let's create the methods here all right so let's say void callback on Save void callback on cancel require this on Save require this cancel my boy let's get rid of this constant tag and this method let's pass through to this guy cancel method give to this button so again what did we just do we now come back to our home page our dialog box has a red squiggle because we need to create these two methods so on Save let's say um just save new tasks which we haven't created and on the cancel we could create a new method but this one is just going to execute one line of code so I'm just going to say navigator.ov pop and what that does is it just dismisses this dialog box for this one we'll create a new method though now when we click save so let's say um code and when I click save I want to do a couple things uh if I just set the state I want to add whatever's in here into this list okay so let's say to-do list dot add and we're going to add a list because the first thing is going to be the controller and the text in the controller so remember the controller is what we can use to access this bit of text cool and if you're going to add a new task then obviously you haven't completed the task right so let's just say it's false for the Boolean cool and let's see how this looks so if I say add a new task let's say code a new app and I hit save you can see actually behind it if you look carefully it created the new task but I want to dismiss this damn box so let's say navigator dot of context and just pop it okay so let's just restart this again code new app hit save dismisses the dialog and we just added a new task to this list cool and actually one last thing is if I click this button again it still says code new app which we want to clear so go to the controller and just clear it okay sweet so now we can add new tasks right like let's just add this and let's say code app and we can keep adding this stuff now let's actually have a way to remove a task so obviously we can check off the checkbox and say we did it but maybe we want to be able to just delete it entirely so this one what we're going to do is if I go back to my to do tile I know a perfect widget for this if you go to your pubspect.yaml let's just include one dependency because this will make your app feel nice and good under the Cupertino icons it's called flutter slidable and we're going to go with version number let's go with one oops 1.2.0 so again I made a separate tutorial covering just this slidable widget so check that out if you need I'll link it below but I can show you here real quick what we need to do so save this post spec yaml and close it and now go to the container of our to do tile so that's just this tile here I'm going to wrap this container in a widget called slidable there it is so what this does is you can actually spin specify this end action pane there's a start action Pane and an end action pane so that just means a dragging from the left or are you dragging from the right so I want to drag from the right the end and here we're going to give it an action pane and if you have a curious just hover over this to see what it requires you can see motion and I need to give it children right for the motion if you look at the actual package there's a few different animations I guess you could go for and the one I want to go for is just a stretch motion and then the children so in the children so if you slide you can have multiple options but I just want to have one option so slidable action and then the point of this slidable action is to delete this task so I'm going to say a delete function is what we need to do and we need to give it an icon let's go with that bin and also maybe a background color let's go with like a red cool so if I come up here every time we create a to-do tile we need to give it a task name a Boolean of if the task is completed or not and this unchanged just to check this on and off right now let's create one more function which if you hover over the on pressed it wants this type of function so function build context and I called it a delete function okay so let's make sure to require that as well and so if I come back to my home page now we should have a red squiggle somewhere on this to do tile so the delete function what should happen if we delete it I don't know why it's called po but I'm just going to change the name of it to be context and let's create a new task called delete task which we haven't created so we have a create new task let's also have a delete task so void delete task and we actually want to know which task we're looking at so let's require an index right so is it zero one two or three let's give it the index and the way to delete a task is basically to just remove it from this list right so let's say set the state and to-do list dot remove and I want to go for remove at because this is going to require an index which we already gave it so let's check this out let's restart this Okay so we've got these two things and actually let's check this hey there it is so you can this is what the slidable widget does again it's super sharp and I hate sharpness let's come back to the slidable action and it's already got a border radius property my man all right that's what I'm talking about cool so these were the default tasks that we always going to have when we open up the app right but now we can just delete it and we can have no tasks at all which is good this will be a nice functional Standalone app cool so our app looks like it's working pretty well but one thing you'll realize is let's say I add a new task here and so I've got three tasks but if I close this app completely and open it again it's just going to come to the default so it doesn't have any memory so that's why we're going to use the hive local database so that we can store some of this information on the phone so I've made a separate tutorial on hive itself so check that out I'll link it below but I can show you real quick how we can use this in our to-do app so the first thing is to go to your pubspect.yaml and let's add the dependencies in so you've got to add these two dependencies there's this Hive and also the hive flutter and we actually also need to add it under these Dev dependencies so again check out my hive tutorial for more detail this is just straight from the documentation and we have to do a little bit of setting up so if you go to your main function let's initialize the hive so let's start typing hive and if you click let's import the library we just put in a pubs back yaml and you should be able to see this init flutter cool and we actually also need to make this function asynchronous and we can await this so that's how we initialize flutter and we also need to open the box or I guess open a box so we can say like VAR box oh wait hive open box and here we can create a new box so we can call it whatever you want let's just say my box and so if you come to our home page if you ever need to reference this box you can save we can store it in a variable so like final my box is Hive and then we can open the box so let's make sure the import Hive here as well cool now while we're doing some database work let's actually create a new file create a new folder here called just data and let's create a new file called database Dot and in this I'm going to create a new class so to do database okay so let's separate our home page UI from the database related stuff okay so let's reference the box as we did earlier and we're going to need to import Hive here as well let's open the box which we created my box when it comes to this to-do list so this make tutorial and do exercise is the default tasks that we can have when the user first opens the app in the history of the app like the very first time so this is going to be the default information right so I'm actually going to say let's say like list to do list and let's just start with an empty list here and without doing any more customization I actually want to now delete this list but all of our other code requires us to work with our list right so what I'm going to do is I'm going to say to do database and I'm going to create an instantiation of our database so to do database I'm just going to call it DB for database and we can create an instance of this class okay so we're going to have this to-do list that we can access so all of these red squiggles of the to-do list we had before you can just put DB and the dot in front of it okay so this is the sort of overall to-do list we can use okay now we need three um we need three methods here so the first one is create initial data so this is going to be used if run this method if this is the first time opening this app first time ever opening this up okay and if this is the first time opening this app let's just say to-do list is and let's put our default tasks so make tutorial and it's false do exercise and it's also false so if this is the first time the user has ever opened up the app then let's just show these default um these default tasks just to give the user idea on what this app is actually doing now the other method is we need to load the data from the database right so void load data and just before you fill this out we also need to update the database okay so if the user makes any changes we also want to update it in our Hive database okay so if this is the first time running the app then the to-do list is going to be these two tasks now anytime after the first time the user opens it it would mean that we already have some information in our database right so let's say to do list equals to my box dot get oh actually I made a little mistake The Hive open box we just need to say box when we reference it yeah we don't need to open the box so in the main file we'll open the box and then in our code if I want to reference the Box we can just say hive.box so now we can say in our load data to-do list is equal to my box and let's get The To Do List so the way Hive works like I said I'm going to link my separate tutorial for Hive below but the way it works is it's like a key value pair and so we can call the key to-do list and then it will return our to-do list and same thing with the updating the database like if I make any changes if I check these off then that means our to-do list would have would have changed and so I want to update the database so let's say my box dot put and then for this key I'm going to put in the to-do list okay so it goes two ways we can update the database and then we can also get the data from our database okay so how does this actually work so now that we've set up these three basic methods if we come back to the home page what we really need to do is to look at the init state so the initial state so when the app first runs we have to do a couple checks okay so I want to say if this is the first time ever opening the app and create default data right so how do we do this check well let's just reference the box and we're going to check in my box and let's get this key value now if this is null right if there's nothing in there under the to-do list then that means we've never stored any information so this is the first time ever opening the app so if that's the case then let's just go to the database and create initial data which will execute this and give us some default data and then else whoops else they're already exists data so this is not the first time that the user has opened the app then I can say database and just load the data okay and this will execute this function and it'll go to the my box and if there's something in the to-do list then let's put it in our list here cool and then finally we have the update the database so this is kind of going from our app session data to giving it to our Hive database and so I actually want to execute this anytime the user makes a change so anytime like if the checkbox happens or they add a new task anytime the user makes an interaction then let's update the database okay so the checkbox was changed then let's update the database save a new task update the database and create new tasks where good if we delete then update the database awesome so this should this should work so I'm going to let's restart this cool so this is the first time opening the app so let's just say I'm going to check these off and let's see if it remembers hey and there it is so it stores the memory so if I have a new task new task and I create it here and I kill this app and open it again it's still in the memory so this is how we use some local database storage to make our app more functional hey what's up welcome back to another quick flutter tutorial in this one I'm going to show you how to code an e-commerce app like this sneaker shop I coded up where the user can browse through the shoes for sale and add them to the car the user can also of course remove items from the cart so let me show you how to do this by jumping into the code [Music] so I've opened up a brand new flutter project and you should just get this demo flutter app so what I'm going to do is the first thing is to prepare some images we might need so I've got that in this folder and I've got four different shoes and also a Nike logo so I just got this off the internet so make sure to just prepare some images and go to your project library and let's drag this image folder in so let's come back to our project and tell the pub spec yaml if you scroll down you can see the assets so just comment this out and tell it to import some images in cool so now everything below the main function I'm just going to delete and let's create this from scratch so let's create our our material app and for the home page the first thing I want to display is actually the intro page so let's create a new folder called pages and create intro page and so this will just be that nice greeting message at the beginning so let's make sure to import this cool now for the background color I'm going to go for a bit of a light gray as opposed to a completely wide background and in the body of the column we're going to have the logo at the top and let's just have a bit of information like some text on the bottom and a button so that the user can enter the app so starting with the logo this is just going to be our image so this one right here now we can control the height of this image and also let's make sure the center the column cool and maybe we could add some padding around this as well sweet now let's use some sized boxes so this will just be some empty space and below that let's have a title so let's say just do it now this one I want to make a little bit Bolder and bigger and create some more space and for the subtitle let's say something else like brand new sneakers and custom kicks made with premium quality and this doesn't have to be bold it can be a bit smaller and maybe let's make it gray cool and also let's Center this alignment and I'm just going to add some padding on the sides here there we go cool now the last thing is the start now button so this one I'm just going to create using containers and let's say like shop now and let's create a bit of a dark button now that means our text should be white and let's of course curve the corners here cool now this is looking really good now let's just go to this container and wrap it in a gesture detector and if the user Taps this button then let's navigate to a new page so we're going to go to home page which we haven't created yet now for this column I'm going to space this out now I'm just going to comment this out for a second and if I save this you can see it's spaced out nicely so now let's create our home page and import it cool so now we should have a blank app inside so far so good so now in the scaffold the first thing I'm going to do is to create the bottom navigation bar so I'm actually going to import a Google navbar and I've made separate tutorials for this one so check that out if you need but I think this one looks pretty modern so I'm going to create this in a separate folder called components so let's call it my bottom nav bar and it's going to be the G nav there it is and so for the tabs I'm going to have pretty much two tabs so the first G button is going to be home or shop let's call it and the other one is going to be the cart okay so now we can go to the bottom navigation bar here and import this sweet so you can see there it is at the bottom now let's just decorate this up a little bit says gray there for the unselected options and if it's selected then make the gray bit darker Also let's have a bit of a border here and fill in the colors cool which reminds me the background color of the home page let's make it the same light gray cool now one thing I like doing with this one is the main axis alignment to be in the center I actually like this in the middle because we only have two options anyway cool and let's just add some padding and the Border radius seems very round so you can make this a little sharper if you like yeah I like that kind of squared off look a little bit better sweet now the main thing here is really the on Tab changed value so this function right let's just copy it to the top and require it right so if you come back to the home page we should have a red squiggle because we have to fill out this on Tab change so for this I'm just going to change this to index now this is just basically for navigating the Bottom bar so let's try to create the create the stuff up here now the first thing is I need to have a integer to keep track of the selected index right so starting at zero let's have a method to update our selected Index right so zero for the home and one for the cart so with a given index let's just update it using a quick set state cool so now that we've got that taken care of we need to have some pages that we can navigate between right so the first thing is a shop page which we haven't created and the second one is the cart page which we also haven't created so let's do that now so for now what I'm going to do is I'm just going to create some text in the middle just so I can see this working okay so if I save this and it looks like it's not showing and that's because we have to give it to the body so now if you give the pages to your body you can see now we go from shop to cart so everything is set up nicely so now we can just fill out in the shop page file now just before we do that though let's fill out one last sort of setting up which is if I create an app bar here for the leading I want to have a drawer icon so like a menu icon there it is if I press this I want to open up the drawer so the background color for this I actually wanted to be transparent elevation also zero so I basically don't want to see an app bar but I do want to see that menu icon so if you want to open up the drawer you can say scaffold of context Open Drawer and just create a blank drawer here so let's try this out so it looks like we have a bit of an error and that's because we should wrap this button in a builder okay sweet so there it is there's our drawer so now we can start decorating this drawer so this one I want to make a bit darker and let's have a column of like the logo and some other Pages we can go to cool and if you didn't know you can actually change the color of an image which I'm gonna do and let's create a quick divider here so this one's just a a line that's all it is cool and believe uh beneath this we can now create other pages so let's just create some list tiles here and so we can have a Home tab let's create some padding and everything is dark so let's just make this white and we can copy this and maybe create just a couple more so this one is going to be highly dependent on your app right like what what pages you want your app to include so I'll just show you how to sort of set this up and then you can decide on what what buttons you want here so I'm just gonna have these three buttons so home about and logging out now I want the logging out at the very bottom so I'm going to wrap everything on the top in another column and then let's space out this entire overall column cool so that way we can push the log out to the bottom so let me know or comment below if you have any questions I'm happy to come and explain this in more detail if you need okay so now we can come back to the shop page and start filling this out so again let's have a bit of a CL a bit of a plan on the top of my column I want a search bar and then I want a bit of a kind of nice message and then the hot picks which is the list of shoes so for the search bar I'm not actually going to incorporate the functionality of a search bar here but let's just include it anyway because we might need it later on and building uis with flutter is just so fun make sure to curve these borders okay so that's the search bar and then underneath I just want to have a little message here I saw this at a Nike shop before I thought it was pretty cool I think it's like a Michael Jordan quote but yeah everyone flies some fly longer than others just a nice cute little message okay finally now for the main part of this entire app is this hot picks so let's put in some text first I'm gonna put in a fire emoji and make this um have the see all option as well on the side and let's change up the style now for the CEO I think this one could be like blue sweet now underneath these we can now have a list of shoes cool so I want to use an expanded list to fill up the rest of the space and we're going to return a shoe tile which I'm going to create now in my components so basically I shoot tile I just want like a kind of card to display the shoe and the price and all that stuff so let's try that now now with a given shoe we should be able to fill out the shoe tile now this is a good time for us to actually create the models so let's go to our library and create a folder called models and what models is is basically say the first one is going to be shoe dot dot so that's the main sort of product for our app and so we can create a class for a shoe and what do different shoes have so the different shoes have a different name different price they have a different image and also a different description so let's create the constructors for this so that we can create it in other places cool so now we can import this shoe tile so with a given shoe so let's create a container here and let's just add some margin to the left hand side because I don't want to stuck on the left side of the screen cool and for the child I'm going to create a column and for a bit of a plan let's say I want to have a shoe picture and then the description underneath and then the price below that and also button to add the card so let's start with the image of the shoe picture that should just be with a given shoe we can get the image part of that shoe so let's actually come back to the shop page and pass through this shoe Okay so what I mean is we can create a new shoe here right so in the list view Builder when we go through the index starting from zero to however many issues we have we can go through the image file so just as an example we can create a shoe here and give this shoe to our shoe tile so if I just save this by the way if it's not loading forgot to do the item count here so just say like four and the scroll Direction I actually want to change it from vertical to horizontal and it looks like something on the top corners look a little weird I think it might be because of the image let's wrap this image in a clip racked to curve the corners now for the description this case sheet description and this one can be kind of Gray okay now for the bottom part of the shoe tile I'm gonna create a row and a column at the beginning which contains the name and then the price below that so let's just save this as we go along now you see that plus button I want to go to the row and say space between to push it to the end and then here let's see in the column let's do the same thing now for the plus button I want to wrap it in a container because I want to kind of give it some color so in the decoration let's say black which means my plus button should be white and I want to sort of use a border radius but only for the top left and bottom right yeah that's the kind of look I want to go for and now looking at the left hand side let's align this to the start and space this out a little bit and change up the style so the name of the shoe should be much bigger and let's add padding just to the left hand side okay and also let's align the cross access alignment to the stock okay this is looking pretty good now I'm just going to add a quick divider at the bottom just to just to give us some space cool so now it's time for us to create a new model called cart so I'm going to create a class here and just a bit of a plan again we want a list of shoes that are for sale we want the list of items that the user put in the cart and then a couple methods so a couple get methods so getting the list of shoes for sale and getting what's in the cart and then what the user can manipulate is adding items to the cart as well as removing items from the cart so this should be the functionality of the app so starting with the shoe shop it should be a list of shoes I'm just going to create the four different shoes that we have okay so the zoom freak let's say the price is 236 and then for the description I'm just getting this off the Nike website but you can put in you know any bit of text here and the image path is where our shoe is okay so I'm just going to go ahead and fill this out for the four different shoes that we've got so we've got the Air Jordans um the zoom freak which we started with then the Kyrie and KD tray so yep let me just go ahead and fill this out cool now the list of items in the user's caught so again this is also a list of shoes and for the user card it'll be just blank at the beginning nothing in the cart and then we can also get the Shoe list so let's just return the shoes shop and we can also get the user card so let's just return the user card and for the two methods that the user can manipulate is adding an item to the cart which we would need to know which shoe that they're adding and then also same thing for the removing so let me know if you have any problem understanding any bit of this code just comment below I can help you out now I'm gonna come back to my pubspec.yaml and I'm going to import this package called provider which is a very simple common state Management in Florida so I'm just going to do the sort of setting up here so in the main function let's wrap this in the change Notifier provider and coming back to the card model let's extend the change now to file and also notify the listeners anytime we need to update the state cool so we need this to sort of deal with having a lot of different states in a few different pages like the cart as well as the shop page so so if you come to our shop page we can now wrap everything in a consumer so that we can consume the data so if you look at this value we can say okay coming to the list Builder here this one right here we kind of manually input it in right so what I'm going to do is instead of this part let's get value let's get this shoe list let's look at the index okay and the index is going from zero to the item count that was specified cool and there it is one thing I can just see in the shoe tile I should add some padding here wait now this plus button we need to make it clickable so let's wrap this in a gesture detector but you know if I come back to my shoe tile we have a on tap function so let's add shoe to cart and let's give it an individual shoe so we haven't created this method so let's come to the top and let's create the adding the shooter cart method so we've created it we just need to access it using our provider so you can see here the add item to cut and then we can just give it the shoe now one thing sort of good uh user experience is you should let the user know something happen so if you added it to the car let's just create a show dialog and say successfully added okay so let's check this out yay there it is cool and then now if I come back to my cart we should display it here so let's go to your cart page and let's use a consumer and we're going to create a column here so let's just have a bit of a heading here that says my cart and then below that after some space let's have an expanded list view so expanded will just fill up the rest of the space and in the list view let's do something similar let's get each shoe and return the card item so we can get the individual issue from the user cart okay and return the cart item so this one I'm going to actually separate out the code in a different file I'm just going to create it in my components and so the cot item when given a shoe let's create a little tile here to display in the car page so I'm just going to use a list tile again and for the leading let's put in a little image of the shoe okay and also let's display the shoe name and also the price underneath it okay so if I save this I can add it and it looks like we have a bit of an error and that's because we didn't do an item count so let's get the users caught and just the length of the user's card cool and you can see if I add it like in the cut we have it so if I had another shoe then we have it in the card as well so there it is now let's just decorate this out real quick add some margin and the Border radius those are the main things that I like to decorate cool now one thing is I need to change this cross axis alignment I need to add a deleting button so in the trailing of this list tile let's add in a icon button and we need to allow the user to remove this item from the car right so let's create this method oh this one needs to go in an icon of cool so let's use a provider and access our method that we created before and give it the shoe and there it is there's that delete button so now we can delete so we can add and we've got the shoes here and we can also remove them cool and so that's the basic functionality that's done so I think they are aesthetically also looks pretty good so let me know what you guys think if you made it this far into the course congratulations that type of perseverance and work ethic is what will make you a good coder I hope you learned a lot during this course and before I send you off I just wanted to give a few final ideas and thoughts the first thing is with any skill it takes time to gain expertise so the most important thing is that you are coding consistently make it a daily Habit to cut a little bit every day and the second thing is start small and build it's good to have ambitious goals but to get there we have to start collecting small wins under our belt the most common way for people to lose interest is if it's too difficult so try to aim for a flow state level of challenge just hard enough to keep you interested and just easy enough that you can continue making progress and thirdly the internet and AI are your friends as Naval ravacant says the resources to learn are abundant but the desire to learn is scarce there is something to be said about someone who is curious and self-motivated they have the ability to just figure things out and that's actually the most important skill in coding and programming the ability to just figure things out without waiting for someone else to teach them and finally if you like this style of content you should definitely check out my YouTube channel at Mitch Coco for more flutter content and tutorials good luck with your coding Journey peace

Channel: Mitch Koko

Views: 752,992

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: HQ_ytw58tC4

Length: 143min 25sec (8605 seconds)

Published: Sun Sep 17 2023