Flutter ToDo App Tutorial for Beginners - Apps From Scratch

[Music] hello everyone in this video we are going to build this simple to the app as you can see we have a simple functionalities where we can create a new task we can delete the task and also we can check the check box when we are done with the task so let's get started and create this this is where we are going to get started so inside my main do Dart I imported homepage class from Pages inside a homepage. dart as you can see so let's go to homepage. Dart and here I have and there is nothing special basically there is a blank scaffold so this is where we are going to get started so inside a scaold let's just first create a app bar app bar app bar let's give a title and for the Tex let's say simple too and now if I save it you see the simple too now let's give the bigr color for this app bar colors. deep purple and if I save it you see we have a background color but I want to change this text color to the white so for this we can give the foreground color colors. white save it you see now we have a white foreground color now let's give the background color to the is scaffold background color colors. T purple and shade would be 300 now we will see some you know differences between app bar and body I mean the scaffold so now let's just add a const here and let's just now move on to the body part so inside of body what we want basically we want to create a containers you know some to-dos so for that we can use the list View basically uh specifically I mean the list view. Builder list view. Builder and this actually gets the this list VI do Builder actually gets the item Builder so for the item Builder let's add a build context context and comma we also need to specify the index and this will returns you know the item so we don't have any items yet we need to create a one here so let's create a list let's name it too list and inside this list let's create another list and let's say learn web development for example and we also need to specify the Boolean which is uh for this check box you know we will add also some check box let's create one more let's say learn let's let say drink coffee let's just remove the web development and save flut and now we will remove this const and here inside a list vi. Builder there's a two things that we need to specify one is item Builder which we have already specified the another one is item count so item count would be to-do list do length So based on this too list lengths it will create this will build this list View and for the return we want to return the container and for the container we will add a child and for the tax we basically need to specify this uh too to do list index which is zero right now if I save it you see there is a learn flut and drink coffee uh let's just add some style to this container I'm going to give some padding and for the padding let's say 20 we will change it later but you can see we have some padding if I give the container color colors dot um let's say deep purple I save it now you see we have a deep purple color of the container now I'm going to give some padding for this Con container is do all 20 and if I save it you see we have some paddings of this container now um let's just style this TX because it's very small and color is black so after to-do list I'm going to add a style text style and first let's change the color colors. white and next we we need to change the font size maybe 18 and if I save it now you see we have a beautiful uh container with a text and now let's just change these sharp Corners to some border radius you know uh here I'm going to add a inside a container I'm going to add a decoration and it will be box decoration and make sure you put the color inside this decoration otherwise you will get an error so inside a decoration we have a border radius border radius do circular and will be 15 I save it now you see we have some border radius have a learn flatter and drink coffee but here you see on the in the middle of these two containers we have a huge padding so let's just remove this so in order to remove that we can come to this padding which we wrap at this container instead of all let's say only and just top would be 20 left would be 20 and right would be 20 and finally bottom will be zero and now we add the comma here and if I save it now you see the padding has we have just removed the padding in the middle so now we can see the beautiful UI I hope so it's beautiful not that beautiful but it's asking the normal right now uh let's just add the cons to remove These Warnings I don't like to see them you know now um let's just separate this you know the the styles that we have inside this list v. Builder I'm going to wrap this padding copy and remove from here I'm going to create a separate folder for that so inside a lip uh folder we want to create another folder which is utils inside of utils I want to create to-do list. Dart and here let's import package L from material. Dart let's create a stateless widget and let's say too list and we'll return this padding I save it now you see we are getting some errors but don't worry I'm gonna we're going to actually solve this problems the enti return let's just import this create to-do list class and you can see it will automatically import the package simple to-do inide of utils we have a to-do list. Dart now um let's go to let's go to too too list. and here let's just create you know let's make it uh Dynamic so for that I guess it's the dynamic I don't know [Music] the the arguments the Constructor uh let's say parameters right and here we first create a final string uh task name uh for the task name right which is learn flut and drink coffee and now we need to add a one more thing and let's just remove this one more thing because you might confus now let's just add a final parameter here task name and here we will remove the Todo list index zero and we basically add a task name and here inside of homepage. Dart set a list we have a task name which is too list to do list index zero right if I save it now if I refresh that you see we don't get any errors and we see the Len flut and drink coffee so if you add one more list and let's say for example code with auto back and if I save it you see you will see the one more container the reason why it's doing is that because we have a list. builder so this list. Builder is building the list based on this uh list that we have just created okay so we can just remove that I hope you understand it now um uh let's create a check box in the left side of this uh you know the container in the in the string which is learn flour or drink coffee so for this let's go to to-do list and let's inside a container we have a child and let's wrap this text widget with a row and inside a row first let's create a checkbox and this checkbox parameter will take you know two things like value and unchange it let's create this here inside a stateless widget I'm going to create a final Bull and it will be task completed and one more thing for the function final function it will be bulling and let's say it will be delete function right no it's let's say say unchange it unchange it and let's create these Constructors save it and here I'm going to for the value it will be task completed and for our unchanged function we added unchanged if I save it and if I go back to homepage. Dart and here we can add a task completed and for this we need to add a to-do list index one right here we have the too list index zero would be this string and index one would be this bull false and now we add we need to add one more thing which is function but before that let's just save it and see that if I save it and see that you see we have a check box we can see we cannot uh if I click on this check boox we cannot you know check it or uncheck it the reason why is that because we haven't uh created the function that we have just created which is unchange it so now let's go and uh create that which is uh unchange it so for unchange it let's create um let's give some value to this and let's create a function call it checkbox change it and this will takes uh basically the index now let's copy this checkbox change it and here inside a homepage I'm going to create a function checkbox change it and we need to specify integer index and here inside a checkbox change it uh what we want we need to specify to do list index one uh when it's not equal to to- do list uh index one so so if I now refresh this page and click on this check box it will not work can you guess and write the in the comment why it's not working because now I will give the solution but before that let's just stop the video and give the solution give the the solution in the comment section so the reason why it's not working is that because we are using stateless widget and we are not changing the state so in order to change the state we need to First actually change the stateless widgets the we need to convert it to stateful widget and and after that we need to wrap this to-do list let's copy that and set State and paste it inside a set State and now if I refresh this page and click on this now we can see we can click uh and we can see the check box it's clickable right now let's give some style to this checkbox here I'm going to set a checkbox I'm going to add the color which is the check color colors. white I check it you see it's white now but let's refresh this first and let's also add a field color colors. white and where is also active color colors. white I'm going to remove this field color and now you see we cannot see the check color because we added the white let's make it black and now you see now we also wanted to change this Border Side color to the white so for this you can add a site Border Side and inside a Border Side we can specify the color colors. white and now we can save it and refresh you see we have a Border Side color white now we can click on checkbox and we can uncheck it so the next thing is before the next thing let's just remove These Warnings I don't like to see them so now next thing is we need to when we check this uh check box we just want to you know the line through which means that we have done this task so in order to do that we can come to this text decoration text widget and inside a style there is a decoration and for the text decoration we can add dot line through and if I save it even if it don't check this checkbox it will you know line through because we need to add a condition so when we check this checkbox it should line through otherwise it should uh it should be line test decoration. n so for this we created already the Boolean which is Task completed so we can use this Boolean here so task when task completed what was the name let's just remove this Con because it will not work task completed we will use tary condition when the task is completed we want the text decoration. line through and otherwise text decoration. nonone I save it and refresh this page again and if I click on this check box you see we have a line through I uncheck it you cannot see that but I want to change some style of this line through uh for example based on your preference you can give any color I just want another color you know maybe decoration color colors. white which one is better black or white I I feel like white is better let me know in the comments so I also want to change the thickness of this line there is a decoration thickness I want to make it two so again I'm saying it's not really necessary to you know to follow my you know the UI it's your preference you can change it whenever you want so now we are done with also checkbox so now the next thing is we want to add you know some uh the button here on in the bottom so we want to add more you know to-dos more tasks so for that let's go to homepage and inside a homepage we have the app bar and we have the the body so after the body we want to create a floating action button and for this Floating Action button we have a floating action button widget and this will require is unpressed I'm going to make it blank now and now you see we we have a floating action button let's create a icon icons do add and now this icon we need to add inside a child actually and if I save it now you see we have a add icon but when we press this icon button we don't see anything but we will write some uh condition function inside unpress but before that let's just also add some text Feld here on the left side of this function so for that uh inside a floating action button we need to wrap this Floating Action button widget with a row and before floting action button uh we need to actually you know create a text field but when I create a text field and save it it will disappear so we need to remove uh we need to wrap this text Feld widget with another widget which is expanded and now if I save it you you will see the text field as well as the bottom so now let's give some style because it it looks very bad now so let's wrap this text field with the padding and let's say not all but let's say symmetric horizontal maybe 20 and if I save it you see we have some padding on the left side and right side and inside a text field let's give some style first let's uh enable uh let's use the decoration inside of decoration we have a input decoration input decorations inside of input decoration we want enabled border so enabled border outline input border and inside that we want the Border Side you want if you want a border s you can also add a border s for example border s we have a color colors. white just an example but we will change it later now you see the Border site and we can also add a border radius border radius. circular 15 I save it now you see we have a uh actually we have also border radi now now uh we want to add uh also FX border if I click on this this is box border you see we don't have a nothing so we need we can basically copy this enabled border and paste it and change it focus it border and now inside a decoration input decoration we want to add a color so first let's just add had a fill it through and S the fill it fill color I want colors. Deep Purple do shade maybe 200 now you see we have a fi color now we want to change this Border Side color maybe Deep Purple because white doesn't look good Deep Purple if I save it now you see have a beautiful text fil I hope so it's beautiful now uh let's just remove this warnings so now we have actually we have the text field and we have the button now uh we need to add a the logic but before that let's just give some hint to this text field for example um there is a inside a decoration I guess there is a hint text let's just add add more add new to-do items add a new to-do items you see we have a hint now let's just add the logic so when we press this function we want to create more to-dos so for that we can come to this Floating Action button and here you see can see that we have a one pressed function so here we will add a function name let's say save new task and we can come back come here and create this function so wait save new task and we create a set State set a set State we want to add a to-do list do add want to create a new item so for that uh we need to get the user input so to get the user input we need to create a you know controller inside a text field so for this uh basically uh what I want to go what I want to do is that I want inside a text field is my text field so here I have a text field you can see so inside of text field if I write a controller we have a controller property so we need to create this controller here inside [Music] the homepage date final controller text editing controller and we need to specify this controller here a private you can see controller and now we need to when we add this to-do list we want to add the controller. text basically what the user types here and we can add a column and now if I save it and write a new to-do item for example new to-do added and if I click on this add you see we are getting a range error the reason why is that we need to add here the integer uh the biggest we need to basically add here the we have a two properties right we have the control. text we have a string and we have also checkbox right we almost forgot the checkbox so we can add a column and say false now if I save it and here if I add a new item add a new item I click on ADD you can see we have added a new item we can also check this and uncheck it but you see we have a still the text we have added so we want to remove that how can we do that so after the to-do list. add we can add controller. clear and now if I refresh that page and if I add a new new to-do added I save it if I added this function you see it will disappear because we are using controller. CLE so that's it this is how we can create a or save a new task now we want to delete the task so how can we do that so in flutter we have the package called it slidable package so you can all either add the delete icon here inside a container or we can make it slidable I want to make it slidable so for that we have a slidable package as I told earlier so now let's go to slidable package so if you type flatter slidable package you will see the flut slidable so let's go and install this flutter slidable going to copy that and I'm going to go to pope. yaml and after the capertino icons I want to add it and make sure you get run flut popg you see I have already done that now we are going to go to to-do list and inside a to-do list we have a container so this container actually covers checkbox new Todo items like the strings we also we want to add the slidable action at the end of this container so for that let's wrap this container widget with the another widget and we will call this slidable and this slidable widget includes you know the another thing which is end action Paine and for the action pain uh we there is there's actually motion and children now if I save it uh we have a motion so motion basically means that the widget which animates when the slideable moves you know we want the stretch animation stretch motion animation and for the children you have to create a list and inside that we need to create uh slidable action slidable action so this slidable action includes or requires onpressed function because when we press this slidable action what happens so this is what it's asking for and also it will requires you know some icon so basically we want icons. delete and now uh for the function now for the function when we press this function what happens uh basically um we want to delete so I'm going to first go to the Constructor here I'm going to create a let's just add the required here I'm going to create a new function here the final function and this will be build context and I'm going to name it delete function and let's create a Constructor and here we will specify this delete function delete function and for the icon let's remove this icon and again say icons dot delete and now we can save it now if I refresh this page and if I slide this you see now we have a slidable um delete function but I want to change the Border radius first so for this you can come to the slidable action after the icon you can say border radius border radius. circular 15 and if I save it now you see if I slide it we have a delete delete function you can also change the the color of this slidable uh action for example color background color colors. red you see it will change it but I like the white color more here so now let's work on this uh function if I click on this delete function it this uh container should disappear basically it should delete this uh list so for this um we have created the delete function so now U we need to create this delete function so inside a to-do list let's make this required and inside a homepage we need to create a delete function and let's say delete task and this delete function basically gets you know the uh it will get you know the the value delete function and we'll specify the index sorry it will not uh get the value it will get the context because it's a build context right so now we will create a delete task uh we will come here and after the sa task we create a void delete task and we'll specify the index and inside a delete task we create a set State and we want to do list. remove at and the index and now if I save this and for example if I remove this drink coffee as you can see it will disappear so now if I create a new task for example uh learning to do and add it you see we have created now we can checkbox this because we have already learned flutter can say learn flutter and now uh if I delete this it will disappear so I think that's all about this here you see we don't have any padding I just want to add more padding here so for this you can come to this floting action button and inside this row you can wrap this widget with the pading and let's say symmetric symmetric horizontal maybe 15 or 20 I save it now you see we have some pening on the left side as well so you can add more to do so that's all about it for this video I hope you this video was helpful please don't forget to comment and like this video I will see you in the next videos

Channel: Code With Otabek

Views: 3,767

Keywords: flutter, dart, appsfromscratch, flutterdeveloper, fluttercommunity, flutterappdevelopment, mobileapps, todoapps

Id: VfdTUKt21Ls

Length: 33min 12sec (1992 seconds)

Published: Wed Apr 03 2024