Flutter - Todo App from Scratch - Part 1

hello and welcome to another tutorial in this one we will be building a to-do app from scratch in flutter so here's the example that you see on the screen i will be providing all the project files in description and also the design files that you see here i have already laid out the design in adobe xd you can get the file in description as well you can see the only difference in the design and in the app is the blur background which you can see in the app rest is same as the design all right so let's take a look at the functionality of the app here you can see a splash screen that you'll see only for the first time once you launch the app then you press the get started button to get rid of the splash screen here you get a default task that i have created you can edit the title you can also edit the description you can check the task that you have done or you can create a new to do hit enter to create that similarly you can create a new task where you can enter a new title for a new task hit enter to create the task and you can go back to the home screen to see the task you can enter a new description for the task and again submit to add the description then you can similarly create the new to do for the new task maybe another one and you can check once these are finished so pretty simple functionality for a pretty simple app and we will be building all these things from scratch so let's get started of all i'm going to create a new project a new flutter project and i am going to call this one as what to do let's select the flutter api and i'm gonna edit the description so a simple to-do app in flutter hit enter and hit finish to create the project make sure you enter the package name that you want let's go back to the xd file i have laid out all the flat colors including the gradient which i have used for the button i will be providing all the icons exported you can get these in the description and you can pick the colors from the same file here all right once our project is ready let's initialize let's set up everything so that we can start working i am going to clear the event log and maybe i'll increase the font size so that you can see everything properly 18 okay all right so this should be visible maybe for the whole all right so this should be visible so first thing we want to do is add the font so i have used the nunito sans from google phones so it's really easy to implement all you need to do is search for google phones flutter and the first link that you'll get from the pub.dev open that go to the installing section and you just need to copy the dependency and paste it inside our pubspace.yaml file after the cupertino icons here in the dependencies i'm gonna remove all these comments so that we have more space and everything is more visible all right now here we obviously require the assets uh but we don't require this whole font section because we are using a plugin for that a package for that and the only thing that will require for this is let's uncomment these using control and forward slash so the only thing that we want to do is create a new folder for the assets so i'll be placing all the assets inside this folder make sure that this is inside your root directory then here i'm gonna create another folder for the images and i'll place all my images here so for the assets i'm gonna add this path so assets slash images so that it will add all the images in the folder to our project so don't we don't have to do it manually for a single image then hit the pub get button all right once this is done our font should be imported and now we can start working with our app so let's select the emulator and i am going to once launch the app so that we have the basic default project ready and we can start doing the editing all right so once our project is running what we can do is we can start removing the code so i'll start from here right after the material app and i'll select all the way to the bottom right till here till the very second last yeah the last bracket and hit save so right now we don't have anything in our project so i'll add a home to our material app which will contain a scaffold and the scaffold will have a body which has a simple container and a text so this is the very default project right now this doesn't have anything so the scaffold contains all the styling the white color background and the text that you see on the screen what we can do is we can wrap the text inside the center widget so that we can see it clearly at the very center another thing that you can do is you can add a comma right after any widget and then hit ctrl alt and l to reformat the code it's quite easy uh so let's start doing some modifications so that we will see that the font is working fine i'm gonna add a style a text style to our text so that we can see the font i'm gonna make it 22 for now so that it's visible and let's change the phone for our whole app now to change the font all you need to do is add a theme to our material app and this will be theme data inside this will provide the text theme so text theme which we'll get from our google font the google fonts package so type in google phones dot here you need to pass in the name of your font which is nunitosense in this case and we don't need to select the neutral sense directly we need to select the new neutral sense text theme because we want to apply this for the whole app so select that and inside that add theme dot of context and here you pass in the text theme so once you do that and we hit the save button you can see the font has changed now we got our nunito sense font and one last thing i want to do is to remove the banner the debug banner and you hit save to remove that all right so this is looking pretty fine our basic project our basic project is ready now uh now we can start doing some design implementation maybe we'll start from the home page so i have exported all the icons let me just copy and paste all these so you'll again get these in description i have exported all these right inside our images folder i'll drag and drop these if you want to copy them hold the ctrl key and then hit ok so all the images will be imported to our assets folder now i'm not sure i need to do the pub get thing again but i'll do it anyway so that we have all the images inside our project i'll test it once by removing the text here and i'll place an image just to be sure that our images are imported so i'll use the asset image the logo here so assets slash images slash logo.png and hit save all right so this isn't working maybe i'll restart the app all right right after the restart you can see the images are imported as well and we got our logo in the home page so what i'm gonna do is right now we don't want all these here i'll create a new folder or a new package inside the library folder and i'm gonna call this one as screens so we'll store all these screens here and the first one is going to be the home page and let's create a stateful widget for this one and i'll call this home page and let's import our material.package so all you need to do is type in sdful to create a stateful widget it's quite simple it will create the widget and the state as well so we got the home page now what we need to do is remove the home from here we need to remove the scaffold from here and instead we'll place the home page let's import this right so if i hit save you can see the black screen that's because all the styling is gone and we are left with the container instead of a scaffold so we need to add this scaffold here and once we hit save you can see the white background is right back so let's add a body and we'll place a container inside this uh i like to place container as many containers as possible because this keeps my objects in place i guess i'm not sure why so we'll see so i'll create a child and this will be a column now you can obviously place the column directly inside a scaffold but i want a complete control on my div you can call it uh if you are into web design you'll know what div is but i want to wrap everything inside a container so that i have a control over the whole thing if i want to add a padding to it or a border or maybe if i just want to move this somewhere else so that's a nice way to keep everything inside the container or maybe it's just me all right let's continue uh the first thing i want to do is add a logo at the top and you can do that by simply adding an image and you can assign an asset image here so we have assets images slash logo.png so we got our logo at the very corner of the screen now here you can see we have a nice little padding around all sides of the page so maybe we can place add a padding to the container so that we don't have to do it again and again for each object yeah we should do that so what i'll do is here i'll add a padding to the main container so agent sets from all sides 24 to be exact because i have calculated that in my design here and another thing i want to do is wrap this container inside another widget which will be safe area so that this doesn't go beyond the status bar or even beyond the navigation if if the screen is curved hit save and you'll see that this we got the nice little padding from all the sides and if you want to add more padding from the top and bottom maybe we can do a symmetric instead instead of doing from the all sides so horizontal will be 24 but we can increase the vertical one to be 32 yep that looks something similar so this is our logo now and right after that we want to add a task card so what i'm gonna do is instead of creating a container and then doing all this thing inside the container and expanding the code a lot what i'm going to do is i'll create a new package and i'll call this one as widgets we don't need a package for that we can create a simple file because we have a very few widgets so we can create a single file for that here what i'm gonna do is okay so if you want a stateful widget let's create a stateless for now so i'll create a stateless widget and i'll call this one as task card widget so this is our task card let's import the material package and now we can place the task card widget right here so that we don't have to place a whole lot of code here so now if i add a text to this one you can see this is visible on our home page so it's looking pretty fine but now the whole layout is messed up so we can enable the debug paint so this shows the outline for all the widgets so you can see the container is not expanded for the whole page to the whole page so what we can do is either add a width to it so double dot infinity this will expand it for to the so this will expand it to the whole page yep it's looking pretty nice now and now the column is aligned to the center of the page uh so what we can do is we can change the cross axis alignment so we are doing cross axis which means from the left to right and the main axis for the column is from top to bottom so the cross axis alignment is going to be at the start so cross axis alignment start that mean everything should be from the left side of the screen all right so now everything is fixed we can start adding the widget uh one more thing i'm gonna do is i'll assign the color so i have placed a light really light color here i'll copy the code which is f6 f6 f6 three times i'll copy this code and i'll assign it to the main container or now comes the real problem i guess because all right so let's see uh we assign a decoration to our container or we don't even need a decoration we can just assign a color so 0xf and then you can paste in your code if you want to assign some custom color or hex code to your container hit save and you can see this the background has changed now and now we can change the color for the container the task widget the task card widget and i'm gonna make this white so you can see there's a slight difference uh maybe you won't be able to see in the video but i can see it right here okay so next thing i want to do is add a lot of padding to this so again symmetric padding i want vertical padding to be more than 24 but horizontal should be 24 because i have measured all these in adobe xd maybe i have done a little extra but that's looking nice uh now we can't assign the color right here because we want to change the border and if you want to change the border you obviously need a decoration a box decoration for your container and say for example if i add a border radius of a circular 20 and if i hit save you'll see an error that's because you can't have the color property and decoration property both in a container so if you want to change the color now you need to place that inside the decoration all right hit save and we got the nice border radius as well another thing i want to do is again the width we want to make it the infinite width which is to the whole screen okay after that uh another thing we can do is add some margin to our logo maybe yep let's add some margin to our logo so that we have nice spacing after this so edge inserts dot only we only want it from the bottom edge yep this looks nice so we got our task card widget and now we need to start adding some text so the first text is 22 bold and the color is this one all right so let's quickly add that okay right here so i'm gonna type in get started for now and reformat this and add a style textile now the formatting has changed for the border so i'll add a comma hit ctrl alt l and this should fix everything so let's add color first because i have copied the code and we don't want it to go away from the clipboard before we paste it then we change the font size and also the font weight this should be bold so font weight dot bold hit save and we got our get started title another thing we need is another text for description so we can't have the text directly here we want it inside the column now so i'll place a column with some children and i'll place the text instead inside it and again we need to change the cross axis alignment of this to start as well so now we have a column we can now add the text here i'll quickly copy and paste the whole text hit save we got the text now let's copy the style 16 pixels semi bold and this should be this color code all right so again let's add this style text style font size 16 color 0x ff and paste the color and this looks nice i also want to change the line height to be around one and half to make some nice little spacing around it and we can also add some padding or maybe margin at the top of our description so i'll add a padding and we only want this for just the top so edge inserts dot only from the top around 20 nope 15 10 yeah this looks nice so we are very close to creating the ui for our home page now uh let's see how we can add more cards so if i place one more card here you can see we got the get started card again as well so as you can see the spacing is missing from the card so we can add some margin for the container so we want this only for the bottom so edge insets door only for bottom we want 20 margin here as well so here you can see we can't actually change the text now because we are placing the widget directly from the other page so to fix that what we can do is we can create some custom fields so for example if i create a final string and i'll call this title and now i create the constructor so what we can do now instead of typing in the text we can provide the title that we receive as an argument and if that is null then we can provide some text so for example i'll type in unnamed unnamed task and as you can see now right now we haven't passed any title to the task card widget so this value will be null and we are saying the unnamed task but now if i add a title to this for example get started you'll see the title goes right here so it's pretty simple to add title and similarly it is pretty simple to add description as well so i'll add another field and here similarly we want desk or if that is null then we want some other text so we want to have no description edit right so hit save you can see no description edit but now we can go back to our task and we can add description hit save and we got description for our task and for the task which doesn't have any values we can we now got the unnamed task and no description edit alright so this looks nice uh the only thing that's left for the home page is a floating action button now you can add a floating action button directly to the scaffold and we could do that but i'm not gonna do that because i have some reasons and i'll mention that in next video but for now let's add a custom floating action button so what i'm gonna do is insert instead of the container here or yeah maybe instead of the column here i'm gonna add another column and instead of this column i'll change it to a stack so that we can place things above each other so inside this stack we have a column that contains all our layout and we are going to add a container that contains our floating action button all right so if i type in some text you can see this comes right above our main column all right so what i'm going to do is i'll wrap this container inside a position widget so we can place it anywhere on the screen so what i'll do is i'll position it to the bottom which is zero pixel from the bottom and zero pixel from the right and it goes to the very bottom right corner of the screen then i'm gonna add decoration the box decoration to my container and i'll add a color so for now i'll add a flat color and later we'll change it to a gradient so i'll add this color the main primary color paste the color code hit save then inside the child i'll place another image so we want our add add button so we have add icon dot png so asset image assets slash images slash add icon.png and now we can also change the width and height of the container so i'll make it 60 and height to be 60 as well hit save and we got nice large floating action button i'm also going to change the border radius for this button so we want here inside the decoration i'm gonna add border radius and this is going to be 20 i guess yep all right so we got nice ui for our home page uh i guess this should be it for this tutorial uh in the next part we'll convert it to a list and will create uh the ui for the task page and then we'll start creating the functionality for the whole app so i hope you guys enjoyed this tutorial and i'll see you guys in the next one

Channel: TVAC Studio

Views: 38,335

Keywords: flutter, tutorial, app, development, ios, android, todo, application, software, learn, free, download, project

Id: mOiXndQAZpw

Length: 26min 24sec (1584 seconds)

Published: Mon Aug 17 2020