Flutter tutorial todo App | Flutter ui speed code | flutter tutorial | Task manager ui

[Applause] [Music] [Music] what's up fellow developers today we'll be creating a design for a to-do list app so this is going to be the design let us start with creating the splash page of this application so i have an empty project here i'll import all the assets necessary for the application once that is done we'll open pubspec.yaml file and then let's add the dependencies i have also imported a font let me add that as well okay now let us get rid of the unwanted script and theme data i'll write the font family and then let us get rid of this stateful widget let's get rid of the debug tag now once this is done let us create a scaffold and in this scaffold i'll create a center widget let's create a container and then let's add the decoration to be box decoration image to be decoration image and let us import the icon of this application you perfect now we'll add a timer for this one so i'll create a new um in state function for this just above the build i've created an ended state in that i'll be adding a timer let us create a duration of probably three seconds and then let us keep the callback function now i'll define the callback function here and then let us create a new class over named as onboarding now for the timer to work we have to create dart async so that is already done now we will create a new class it is import material dot art and then let us create a stateless widget let us change this container to a material app let's define the home here and then let us import the onboarding dart file here okay so now when we run the application after three seconds it has to go to the next page perfect so on this page we'll create the debug to be false and let us also define the theme okay now for the onboarding page we'll be using a page view so let us start doing that first i'll create a scaffold the body i'll give it a stack let us create a column widget for this one i give the main access alignment a start now let us define the children of this column widget i'll first create a container now let us add a child as page view now a page view needs a controller so let us define that now in this i want the initial page to be zero and keep pages as zero i'm sorry keep pages as true okay and let us also create a variable named um current page that will be zero on the start of the application now let us create children for this page view this is the name of the image that i've imported already in the asset folder and this will be the text that will be shown on this page i'll create three more pages i'll also add on page changed function that is going to return a value i created a function that will take a parameter of this value let us define these widgets and the function also i wanted to return a column widget so i'll write as column on board page now the first one as you know is the string that's the name of the image and the second one is also a string that is going to be the title of this page now let us return a conte i mean column widget and i'll keep the main access alignment center i'll define the children here let's also define the set current page function i'll change the current page to the value that has been received and let us set state and now let us fill this column widget i want the height to be around 20 points and then after the size box let us create a container of height 200 and with same as that of the document i also give it a padding of around 50. i'll add it to the correction image we have already received the image path so i mean image name let us import that now you can see that all the images are in place and once that is done now we have to add the description or the title of that page so i'll give it a size box of height 50 again for a space and then let's again create a container now this time i'll give it a padding of 10 points on the vertical axis now let us create a child text widget and we have already received the title so that should be in place now good let's style that widget i'll give it a font size of 30 and font weight of probably 500. great and after this let us create a small description part i'll again give it a container i'll add it the padding of vertical axis 10 and horizontal to be 40 probably and then let's add a child widget again great now let us style this widget i'll give it a font size of 16 and color to be gray just to differentiate that from the title now i want it to be central line so i'll give it a text align of center now this looks good and then let's get back to the the other other division of this page like once the on-page event is done let us add a row widget and then i'll add a children and now i want to generate an indicator for the page number so what i'll try to do is that i'll try to create a a container i'll generate the list we have three pages i've given the index i mean the maximum limit as 3 i'll create a function for this one this is going to be the indexes i mean the index is the page in which it has to be active on the current page so let's create that it is going to be an animated container it needs a duration so ladder duration of milliseconds to be 100 let's give it a height of 10. and for the width it has to be varied like for if for example if it is the current page then the width would be 20 else it has to be 10. now let's add them at a margin and then let us decorate this container now again the color has to be different for the active page and the other pages so if it is the current page then the color would be black or else it can be gray now once that is done let us create a positioned widget for the bottom so i'll keep it as bottom zero i want it to be centered so i'll add left and right also to be zero i'm adding a margin only on the top let's give it a height of 300. let us decorate this page okay let us fit that to fill so it stretches to the screen and then let us add a child which is to this let us create a column and keep the main axis to be center and let us add the children of this column widget for now let us keep it empty let us create a shadow for this container the shadow should be a black color let us give it a opacity of 0.2 and then let us offset that probably nine pixels to the y axis and then let us add a block radius and a spread radius of three okay that gives us a good shadow here now let us try and create a child widget inside this container that would say get started i'll give it a size of 16. i just again create a size box of height 30. let us style that login text i want the color to be white and size can be around 18 and it it can be bold so i'll give it a font weight of bold great now for for the click of this get started button let us add a function open login page let us create a new document let us import material dot dot let us create a stateless widget and then over here we have to import this login page now let us get rid of the debug tag on top let us also define the theme back and this one again to be scaffold now for this login page we need a app bar that will have the back button so let us create an app bar inside the scaffold i want the color to be transparent and then we'll add the back button i'll create the color to be black now after this we'll add a container in the body let's give it a padding on all sides of 20 let us add a child column widget let us add the text saying welcome back now after this we'll have another text that should say sign in to continue and the font size would be lesser like maybe 18 or 19 yes and then let us give it a color of gray after that let us create a size box of height 20 and then we'll have another text this should say user name i'll have the font size a bit bigger and i don't i want it to be black in color again now let us create a text field okay then now let us style this text field i want the size to be 20 okay i'll just copy this and i want the size box with a bigger space and instead of username let us change it to password now let us add another sized box of height 10. let's create a row now over here we'll have we'll add the forgot password option so i'll create an equal widget let us create a new document i'll input that document here i'll make the size of this one a little bit bigger now after that we'll create an expanded widget let us add a child center widget let us create this in a color same as that of the path that we added previously let us add a child to this widget i'll keep keep the color as white great now when i click on the forget password it has to go to the next page now over here we'll again create a material app i'll remove the debug tag let us also define the theme now instead of a container let's create a scaffold now this will again have this same app bar so i'll just try and copy the app bar widget this is like this will probably have the same style as i've thought of the login page so i'm going to copy this body also you i'll get rid of this forgot password now let us change the text to say forgot password now this should say please enter your username to receive your password and reset information and over here it has to say mail id and instead of this let us say yes and then we don't need the password section so i'll get rid of that and this one should say send requests okay now when we click on the send request it has to go to the reset password page so on on the ink well of this one i've added the open reset password page great now over here let us again add a material page interior app sorry and then let us change the to scaffold great we would again need the app bar here i'm going to copy that now let us create a body and create a child as column widget the cross axis should be at start well this can again be the same as that of the login page i mean sorry i'm saying instead of the foreground password our instagram forward password has to say reset password now over here it has to say reset code and after that we'll have we'll have the password block so i'll give it another text field this one should say password and the hint can be now this one is for the confirm password widget now we will create a new page that will show the success message once the password has been reset do now let us create that function you now this button should say change password once we click on this change password it has to go to the next page again we'll create a material app let us create a stateful widget we'll have a scaffold now this has to be in the center so i'll add main access alignment center and cross access alignment also on the center let us add a height of 300 and width also as 300 so i get a square container you understand that description and then now let us add a sized box for now let us keep the on tap is empty we will add that later let us add a container that's again going to be the same as that of the other buttons that we have created the previous pages now instead of open success page it would be open home page let us define that function here i'll create a new home page here this should say continue great on the home page now let us again create a material app now in this scaffold let us create a stack the reason for using a stack is that i want the page to be having a pop-up like this so if i make a stack and then if i create these designs on one container i can have this pop-up on the second container so that's why i'm using a stack so we will do the next container later let us first start creating the main document in the children i'll add a column widget now i have app bar here now the background color of this app bar has to be the same that was created for the for the buttons perfect now i don't want the shadow so i'll keep the elevation as zero and then let us add a title i'll style this title now and give it a font size of 30. now let us add an actions widget and that let us an icon button perfect and then over here let us create a container of height 70. and then let us add a child rope widget what i'm trying to do is that i'm trying to create this today and month over here i want that to be clickable so i'm adding a inkwell widget and then let us create a sized box of height 10. now after the size box let us create a container then once this is done let us add the monthly widget here so that is going to be the same as this one i'll just take a copy of this and then let us paste it here and i'll name it as monthly perfect now now we need a variable that should say the filter type if it is today or monthly so let us create a string so on the start it has to be today and then what we'll do is that for the color of of the underline here let us write that function so what it would be is that instead of white it has to say filter type equals today then it needs to be white or else it has to be transparent okay and over here it has to say a filter type equals monthly then it needs to be white or transparent okay now you see that it's it is only enabled for the today's section now when we click on either of these widgets it has to change the selection so what i'll do for that is that over here let us write change filter to monthly and for here we'll write as change filter to today let us create a function now to see if this works perfect now after that let us create a calendar widget for that we i have used a package named stable calendar so in pubspec.yaml i'll add the dependency of that should say table calendar version number is 2.2.3 as of now okay now let me import this table calendar in this page perfect now let us try and add the stable calendar in place now if the filter type is monthly then i'll add a table calendar or else it has to be just an empty container so what we'll do is yeah okay so what we basically do is that we create a calendar only if the view is monthly now this table calendar also requires a controller so let us do that calendar controller is now let us define this table calendar here once that is done we need to write starting day of the week monday you now if you can notice that there is a small little icon here and a small little widget where you can have different styles of the calendar it can be bi-weekly weekly or monthly format now once this is in place if we select today it will not be there only in the monthly section it is going to be shown now once that is done now let us create an expanded widget that is going to display all the list of to do things or list of tasks that has to be added i'll create an expanded widget i'm giving it as a single chat scroll view because i if i have a lot of a lot of elements in one page i'll add a column and then i'll be listing all the uh all the tasks to be done in that column so if it is inside this single scroll view widget it will scroll properly without breaking the ui let's add a column now let us create the title like the date of today now i want it to show me the month and then the date and then the year so let us create a variable here over here that should say date time today equals new day time dot dot now and then i'll i'll add a array of months so in flutter i can only get the the number for the month say for example if it's january it's going to show me one so if i want the name of the month to be shown so i'm creating an array now this is going to hold all the names now let us get back to the script over here now it should say month names of today sorry now it is the first month like january it is going to give me one but the array starts with a value zero so i'm going to subtract one here let us see if that displays here see this displaying a september and then after this let us add the date and then i want to show the year great now after this let us add the task widgets the first variable would be the color of the task so this is just a random color and then this should be the description of the task and over here it has to be the time i'll just copy this let's change the color now let us define this widget uh there is an option for us to slide to edit or delete so let us create a slideable widget now for that let us use another library from from flutter so again in pubspec dot yaml we'll import the necessary dependency and then and then let's import the class perfect now now let us create this slidable widget here always needs to return a slidable widget and that action pane it needs to be slidable wire action pane now the ratio is to be 0.3 let's add a container as a child height 80 and then let's add a margin i'll also add a shadow you can see that we have created three containers and then let us add the title and the description over here now this would create a circle here and then let us also add a width here let us add and make the bit a bit broader now after that let us add a column widget okay and then let us add the time widget here after this we'll add an expanded widget i want a small bar here so let us create that now once this is done we have to add the second reactions like the buttons that will be revealed when it is slided so let us create that now do if you notice we have the edit in all these sections we'll also add a delete option now let us keep this color same as the color that we received as a parameter great now that this part is done when we have the monthly which monthly option selected we'll have the calendar and the task also after the expand widget let us add a container again now this is going to be the bottom navigation part so i'm using a stack because i want to have a different style design here like this one it has to be a stack then so let us add a position widget it needs to be on bottom zero [Music] great now let us add a padding here now let us create the icons to be added in this container sorry it needs to be chilled and then let us add a container here in that container we will create a column widget which will hold the icon the color should be white and then let us add a sized box here of height 5 and then let us add a text that should say my task color should be white size can be 15 perfect now i'll just take a copy of this container and then let's change this to menu and this one should say menu again perfect now i need some space in the middle portion so i'll add a container of with about 80 that should give me a space in between now again i'll have the same container and then let that say maybe quick task quick and this one would be profile great now after this let us create a positioned widget in the center now from the bottom it will be a little bit raised i'm giving it 25 on the left and right it has to be zero because i want it to be in the center and that needs to be clickable so i'll get a inkwell for now let us keep it empty let us create a container and i want the container to be square i'll give it height and width to be 50 again i just got a small gradient so i'll try and do that now i want the shape to be circled and let us create it a bit bigger so i'll give it 80 maybe great now let us add a child to this widget i'll add a center widget here and we'll have a plus symbol in this place let us style that perfect now when we click on this i want a task pop-up to happen so let us create that function open taskbar so what it would say is that taskbar would be open and it would set the state similarly i'll also create one for the close task of now let us create a string here on the top so initially it would be closed okay now what we'll have to do is that you remember we created a stack at the start of this page so after the stack we have to i mean inside the stack we have to add a pop-up design for if the pop-up design i mean if the task pop is open it has to show that container so let's add that just inside this tag let us create a container now only if the task pop is up maybe let us create this container height should be same as that of the document with also same as that of the document the color has to be black probably with some obesity perfect now let us create a center widget and then let us create an inquiry because that needs to be clickable i wanted to close the task pop if it is clicked let us create a container and let us add a border radius to it do now i'm creating a new container that will be dependent on the size of the document again so now let's create a column widget here let us add the options that will be shown in this popup now let us give it an a divider so after this let us add a container of height one let's give it a margin on the sides okay now let us take a copy of these two widgets second one should say add quick note and third one should say add checklist okay now i don't need this container because i don't need an underline here let us get rid of this and then just add a sized box of height one okay now what we'll have to do is that and instead of this container we'll add a condition that should say only if it is open it needs to be here so over here inside the container as a child let us add task bob open okay and then if if this is not here then we'll have just an empty container now if you notice that if we click on on any of these it is going to close the pop-up now what we'll have to do is that when we click on add task or add quick note and checklist it has to open a new page where we should be able to add these i mean we should be able to add new tasks and quick notes etc so let's try and do that now let us define these functions before that let us create some documents you now let us define these functions here that's for the new task then let us create one for the new node you and one for the new checklist also now let us create the task page let us create a material app let us also get rid of the default debug tag let us keep the background color as white let's add an app bar i don't want the shadows i'm giving an elevation of zero let's add a title and then let's add in a leading widget let's create an icon button and then on on press of this icon button i wanted to go to the home page now in the body let's add a container in a stack let us create a container first let's add a position widget so great now let us add a container let us create a margin on the horizontal axis i want this container to be only 85 percentage of that of the documents i have given a multiplier of 0.85 let us add a single child scroll view and then in this row we will add a text that should say for great now after the text widget we'll add a container and then let us add a text as a child of this container and then let us add a sized box again and then i'll copy the same widgets and the this one should say in and this one should say project great now once this row is completed let us create a size box again and let us then create a text field i'll get rid of the input border perfect and now let's also define the style of this text okay now after this container let us add a sized box again and after that let us create a container let us add a column witcher as a child let us add a border radius and then we'll also create a border now in this container we'll add a text field i'll get a max line of six let us style this style this widget let us get rid of the border ray border on the sides of these widgets now after this we'll also add a container for the attachment option so we'll also add a border for this let us add icon button once that is done let us add a sized box you let us add another text field let us also style this field you you let us add a border radius for this container let us add another container let us give it a color and then let us add a child for this container a center widget and then let us add a text here that should say add task perfect now let us go back to the add quick note page over here and then in the quick note the app bar part is going to be the same so i'll copy that one now perfect now this one should say your note yes and after that this part the top part over here and the bottom part and this container remains the same so i'll try and take a copy of this and remove get rid of the pages that are in between those let's do this so if you notice if we take the quick note it's going to be here now let us delete this part over here in in just about the column we'll add a container so i can give a padding for this one and then the column widget has a cross axis alignment of start and then we don't have to have this row widget and the size box i'll get rid of that one and now we have a container okay and we can get rid of this one too the rest of things remains the same and we don't have the member section here and the due date reminds the same oh i'm sorry we don't have the due date and the member section we don't necess need this anyone widget also this should say add note okay now just below this i'll need a title saying color i'll just take a copy of this description and then let us add it here it should say color perfect now let's create a row now this will have different color widgets so let us create a container of height 50 and width also to be 50 and let us add a color let us keep it as blue right now perfect now after this one i'll just take a copy of this container let us add a few more colors pink then maybe green and then let us add another color after this row let us add a sized box now we'll create the checklist page now this will also have the same app bar and the other stack widget let's copy that from from the previous page now let us copy the whole scaffold let us import the home page okay and over here we need to add some checklist instead of the description so what i'll do is that in the inside the single style scroll view the title should say title and then we'll have another small text in this space maybe a dummy text for now and then let's get rid of the description box and after the subtitle is over let us add okay check box list tile the title should say sorry so it should say list time control affinity dot leading so now on change of this list tile we'll receive a boolean so i'll give it as boolean value and then let us set its state if value now we will create the selected list in a minute it's going to be a list of hints now if you notice we can select and deselect this option i'll take a copy of this one and then let us create a few more list item but for the id i'll give it plus two and then the button should say add checklist and what the title on top should say new checklist let us try this from first we have the login page you can you can also navigate from this page to the home page if you select on login but right now i've given it from fob password that is an option for you to add the mail id and then reset password success message these are swipeable widgets you get monthly yoga calendar and then you can add a new task a quick note also a checklist so that's it for today thank you for watching please do like comment and subscribe you

Channel: Kaushik Chandru

Views: 24,433

Keywords: flutter, android App, iOS app, mobile app, UI speed code, flutter app design, responsive ui, theflutterway, COVID-19 App - Flutter UI - Speed Code, flutter ui, devefy, flutter source code, flutter dev, flutter ui design, google flutter, flutter app, flutter netflix ui, flutter speed code, flutter ui ux, flutter ui tutorial, ui design, flutter ui speed code, minimal app, flutter tutorial, task manager, todo app, todo flutter, project manager flutter, list app flutter, note

Id: N0ey96u8XmE

Length: 150min 19sec (9019 seconds)

Published: Wed Sep 30 2020