Flutter Tutorial - 1/2 Todo App UI From Scratch (Provider)

everyone has everyday something to do and therefore we want to build here a small to-do app where you can put all your to-do's inside for the day you can later also edit them and seduce them and we will go over all of this and we'll also wire everything up with firebase so that you can create read update and delete to-do's from firebase we start here in our main file and then we go to the material app to our home property and here we put our home page inside which is the page with all the to-do's which we want to create right now here inside of this home page file we go to our build method and what we want to build here is a bottom navigation bar with two items and here we have all our to-do's this is this page here and then we also have another page where we have all the completed to-do's therefore we create in our build method these tabs and we put here first of all containers inside and later we want to place here our pages inside so we have one to do page and one completed to do page but first of all we want to build the whole page here so we create a scaffold then we create an app bar and then we want to put here some title inside which i get here from the my app class so i have created here this field let's go further and also create our bottom navigation bar so here inside we first of all define the color which will be this pink color here let's also add here the other colors which we need so we add an unselected color and selected item color and these are the colors which you see here so if our tab bar is not selected then we have here this gray color otherwise we have a white color and this is exactly what we are defining here with these two colors now we also need to define here the current index so which tab should be selected and therefore we create here this selected index and go here to the top and create a variable and set it to zero so zero means the first tab will be selected initially and now every time if we click on one of these tabs then we simply want to change this tab so i put here this index which we get from this bottom navigation bar and put it into the selected index so that we every time change to this index and around it we put some set state method to update our ui and lastly we also want to put here our items inside so what we do is we create here one item which is from bottom navigation bar item and then you can put an icon inside which is exactly this here on the left side and we also give it some label and like you can see we also need a second bottom navigation bar item and therefore i also create it here and this time we put here this icons done inside and the text of completed and then it looks like this so we have here our both tabs and we also can change between them and if we tap here on one tab then every time this on tap handler is called and we change here the selected index the next thing is also to create this rounded floating action button which has here a different kind of shape and that's what we want to do right now but first of all we want to quickly put here also the body property inside and what we do there for is to call here this body and put our tabs inside so here we will put later our real pages inside and then we simply call here the selected index because we have here only two tabs therefore we have here only two pages and with the selected index we get then here the right page of this tabs list now we want to create this floating action button so let's create here a floating action button and put here also an icon of add inside and this looks then like this and we want to change it a bit so first of all we want to change the shape of this icon so we put a rounded rectangle border for the shape inside and then you can define the roundness of the shape so here we put a circular 20 pixels inside and then it looks here like this and we also can set here also another background color and also if we later click on it we add here this unpressed handler if we compare our design with the design which we want to achieve we are already pretty far and now the next thing is to create our to-dos and put them here inside what we do there for is to call here every time if we click on this button a dialog and this dialogues look then like this we can supply a title and a description and if we click here on save then our to do is add it here to this list and yeah that's what we want to build right now therefore we go to our floating action button which is this button here and inside of the unpressed handler we want to open this dialogue and therefore we simply call you this message show dialogue and here we need to put first of all the context inside and then we need to set here this real dialogue inside and lastly we want to make our dialogue not dismissible so if you click here with our fingers normally you can dismiss this dialog so the dialog will go away again however if you put this field inside then you can click here somewhere and the dialog will not go away all right let's also create now this edge to do dialog so this add to dialog widget is normally a stateful widget or stateless widget and here we simply want to add first of all two fields to our state so we want to add the title and description and these are exactly these data which we type here in later and that's what we store here inside of these fields now we create our dialog so we choose an alert dialog and there you can set the content and here we want to set a column and inside of the column we want to put all of our data inside so we start here with our headline and there we set some text and also this text style here and now we can already try it out so if we click here on this button then it should open up our dialog and we should see this text header and now we want to build also these remaining fields here and also this button and that's what we create under it so we have here some space and then we create here this to do form widget where we want to build our title description and button inside here inside we want to put some callbacks so first of all we want to add here this unchanged title callback so we get every time this title back from this widget and then we want to store this title inside of our title field which we have here at the top and we do the same thing for the description so we get every time the description from this widget and then we want to store it also this description inside of this field here at the top and lastly we want to also create here this callback on save to do and this is basically if we click here on this save button then it should be executed here inside of this to do form widget we put all the fields inside so we put here the title and description inside and also this callback so the unchanged title on change description and also if we click on the button and this is also what we put then into our constructor then we go over to our build method and here inside we create a column so we want to display multiple things under each other and first of all we want to build our title so i create a new method and here inside we create a text form field so this is a normal text field and here inside we put some decoration for this text field so we set some underline border which is a border under our input field and then also this label text and if we try this out we have here also our title input field and we can already type here something later we want to use here this to do form widget also for the case that we edit it to do and therefore we put here this initial value to title so that we put this title which we get from this widget inside of our initial value and this means that initially we have maybe already some title here inside and then we also want to add a validator because we want to make sure that this title is always filled and there we put inside if the title is empty then we return here this text that it should be filled and otherwise it is the successful case and everything is fine with our title later i will also show you exactly what this is doing so the last thing we also want to do is to call here this unchanged and then we call here this unchanged title which we have created and which is then later changed here in our ad to do dialogue where we simply put this title inside of this field so this means that every time if we type here something then in our add to do dialog this will be filled with this text here and lastly you can also set how many lines are displayed here so you can change this value if you like and also make more lines for the input available after it we go here to our build method again and also want to create our build description and therefore we create here this method and put again a text form field inside and this text form field will look quite the same like before so we also add here decoration and also add here some label and this looks then already like this so we have already this field and now we also want to change here a bit so every time if we type here some text then we want to call here this unchanged description and this will be then stored again inside of our dialog so this will be every time changed if we type here something inside of this field and then next to it we also want to put our initial value to the description field again so this is the field which we get initially and lastly we can set here three lines so this time we have some more lines for input and then the user can basically type his three lines and you see always three lines here displayed in our ui and the last thing which is missing here is this button and that's also what we want to create therefore we go again to our build method and create here first of all some space and then we create our button and the inside we create an elevated button and we give it a background color of black so here you can define this background color of this button and then every time if you press on this button we want to call here actually this unsafe to do callback so here i put it inside and we also want to put here our text inside and this looks then like this so we have here this button and every time if we presses then our dialog will later call here our functionality and that's what we want to implement later but first of all let's go back here and also put here a size box around so we want to make sure that this gets here the whole width and therefore you can set here this width to double infinity and then he will take the whole width available all right now we have done already a major step forward and we have created here this dialog and the next thing is to actually add here the functionality if we click on save and then we want to add our to-do to our list here our whole logic of this application we want to build with the provider package so make sure to go to the pubspec journal file and then we put here our state management provider package under our dependencies inside then you need to make sure that you restart your applications so close it and start it again like this then we create a new file which is called todos and here inside i create a todos provider and like this provider package is working we need to make it extendable from this change notifier then we need to go to our main file and wire everything up of our provider and therefore you simply wrap around your material app this change notifier provider and here inside you need to put this toduce provider inside which is exactly this provider here and that's all what we need for during the setup of this provider and now we can put here the whole logic of our application inside of this provider at one single place and this is pretty cool after it we also want to add here this to do file and here inside we want to create our to-do model object and our model object contains here every time a title a description then we also have here later a state if it is here in this list or in our completed list so this is a boolean flag for if it is done and then we also have other fields when this to do was created and an id and that's all what we create here inside so we put the created time of this to do inside the title and description which we've for example put here inside with this dialog and also a unique id later and this flag here is saying if it is inside of this list here of the tab 1 or on the second tab if our to-do is completed after it we also created our constructor and put here all the things inside and now we can actually build our to-do with this model and create it here inside of our application therefore let's go to our home page and here at the top we want to create the first page which is this to do page and here inside we put our to-do list widget which we want to create right now here inside of this to-do list widget we want to create first of all only one to do so we create here another to-do widget and then here inside we create our to-do object and then we need to set here the title for example and the created time and now comes the time to build actually the ui of this to-do widget so we want to actually build here exactly this to do here which you see with the same text even and therefore we create a new file with this to do widget inside of the to-do widget we first of all get here our to-do and then we can later show you all the fields which are here inside so we want to make use of the title and description within our build method we want to create here first of all row to display here some widgets next to each other so we want to create this checkbox then this text and also we want to make it here rounded and white let's start with the checkbox so we create here checkbox widget and inside we can set an active color so this is the color of when we have selected our shack box and this will be then in pink after it we also set here this check color to white and later it will look then like this so we have here pink check box and inside the check is of the color of white now we need to determine if this checkbox is checked or not and therefore you have here this value and here we put our to do is done boolean flag inside and if it's done then our checkbox is ticked otherwise it is not ticked and lastly we also created this unchanged handler and this is what we want to implement later if we click on the checkbox then we want to actually change this to do is done state after it we put then an expanded inside and here we want to put the title and description inside of our to-do so basically it will look like this so we have here title and optionally we have also here a description so let's build first of all the title so we get it here from our object this title and we give it some text style then we also want to look here if our description is not empty so this means if we have a description supplied then we also want to show it so we create again a text widget and here this time we put our to-do description inside and give it also some text style and this looks then already like this so we have here our checkbox and you also have here this text and we will also later formate this here everything correctly so that it is directly shown next to each other first of all we want to wrap this whole row which we have inside of a new widget and this is a container and here we can set a padding to all directions and then you have here some space to the left to the top and right and bottom and we also want to set here color so we want to make it here to the white color now we want to finish here this design so we want to actually build here this edit button or also on the other side we have this on delete button and therefore we want to use here a plugin therefore we go to our pop spec journal file and inside of our dependencies we want to add here this flutter slideable plugin which is exactly this plugin which we need for showing here these kind of effects on the left side or also on the right side again make sure that you restart your application and now back in our to-do widget we want to put this whole code which we have inside of a new method which is called build to do and we also supply here the build context inside now we want to put this build to do inside of a new widget which is called slideable and this comes exactly from this package flutter slideable and here inside we need to set two things first of all this is mandatory we need to set this action pane and also a key and inside of this key we put our to-do id inside so this is our identifier of our to-do and now we want to build here these two things so first of all this icon added with some text and also on the other side this i can delete with also some text let's create first of all this edit button so we have this actions inside of the slideable and here inside we can add an icon slide action so we can set here this edit icon and we also give it some color and text and also if you tap on this one then we later add here some functionality and this looks already like this so we can swipe here and then we see here this button and we can then tap on it and inside of it we set again the same icon slide action like before and like before we also put some icon inside some color some text and also this on tap tendla and this looks in like this and every time if we click here later on it then we will execute later our logic here inside what should happen let's go again to our to-do list widget which is this list widget with all of our to-do's which we want to build and inside we remove via our to-do and then we go to our provider to our to-do's provider inside of this provider we want to create a list of all of our to-do's and these are here later displayed here inside and then we paste here this to-do inside which we have created before and we also put here some other to-do's inside so we create here four to-do's and now we want to make this to-do field also public so we create a new getter and this is public then we go over all of our to do's and we filter them so we want to make sure that only the right to do's are displayed here on the left side and the right to do's are if they are not done yet because on the right side we want to display here all the completed ones and on this page we want to display only the ones which are not completed now we can go back to our to-do list widget and we want to display right now all the to-do's which we have created before here inside of our build method we want first of all to get our provider and you can access this provider which we have created here inside this todos provider with this provider of context and here you put exactly this to-do's provider inside and then we get here this instance of this provider and after it we want to get all the to do's so we simply call here this provider.todos and this will access and exactly this field here and then we get all the to do's which are here inside of this list and instead of showing only one to do we want to remove it here instead we want to return here a list view and here inside we put first of all this item count inside of our to-do list and then we build all these individual items so we get every to-do by going over our lists and putting here the index inside which we want to build and now we want to build here this individual to-do so we create here our to do widget again what we did before and then we put our to-do inside right now we go here with the builder and now our to-do's are already displayed so i put here this builder for now inside so that you see already our to-do's let's also put some space around our to-do's so we add here this padding to all sides and then we have 16 pixels to all sides and we also add here this physics bouncing scroll physics and if we do this then we have here this bouncing list view let's bring our separator back so we want to separate our widgets so i put here this separated again inside then we need to put our separator builder inside and here we put a container of a height of 8 pixels inside this means that we have here 8 pixels between our items and if you like to have more then you can also increase the height between your item i will again put it here to 8 pixels let's also cover the case if we have no to do's so if our list of todos is empty then we want to display here text which says no to do's and we want to center this text here inside of this page in the middle lastly let's go to the to do widget and here we want to make our to-do widget rounded therefore we wrap it inside of a clip r act and then you can set here the roundness of our to-do widget and if we do this then you see that our widget here is rounded on the left and also on the right side if you want to check out the whole source code of this example you can get it with the first link in the description and with the second link you can get my flutter course where i teach you how you can become a more advanced and better developer hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye you

Channel: HeyFlutter․com

Views: 37,663

Keywords: flutter, tutorial, app, development, todo, ios, android, programming, ui, design, flutter tutorial, flutter ui design, flutter ui, provider flutter, provider, flutter provider, flutter todo app, flutter todo application, todo app, todo flutter, task manager, ui design, flutter ui tutorial, flutter ui speed code, minimal app, flutter speed code, ui speed code

Id: kN9Yfd4fu04

Length: 22min 27sec (1347 seconds)

Published: Wed Dec 02 2020