Building An App From Scratch: Building it with Flutter | #2

today I well today I'm gonna I think I haven't really decided what I'm gonna do in this video we're gonna get into building the app in flutter or if we're gonna start with the back end so building the rest API but what I thought I'd begin with is just to show you what I've done during the weekend and so what I did where we left off was basically here we were trying to figure out how to show the entire week to the user oh wait all right so where we left off was here we were trying to show the entire week to the user and what I decided to do is this sort of layout where we show all of the days like this like small little cards and then each task is essentially going to be represented by a black little line so this way you kind of get an overview of how many tasks you have for each day and I think this gives kind of a good overview at least at least for what I can come up with right now and as you can see when you press one of the days you'll get a pop-up window type thing that'll look like this and within this you can then scroll and go through all the different tasks for that day and I'm not really sure what it's gonna look like when you haven't pressed anything so if you don't press any of the days essentially right now it looks like this so it's just a black screen basically and I'm not really sure what we're gonna do or what way or what to have here but before you actually press something so that is one of the things that are left for that for that view essentially over that screen and then I decided that we're gonna have this kind of look or design for the month so if you go to a month view then you get all the different days like this and then you get also the date or the actual number of the day on each card as well and basically this is just the same as this one but it's all the days for that month I'm not I'm not like super happy about this design but I think that this I like this design though but I'm not sure how well all the different lines are gonna work to give you a like an overview of your week but I think I think it does a pretty good job at showing you kind of how many tasks you have and then as soon as you press one of the days you get a more specific list of all the tasks so then I think the combination of showing this overview and then also being able to go into each day to see what the specific tasks are I think that that combination is going to be good enough to kind of display it or to get the overview that we want so this these are the four screens that we've come up with so far and what we're gonna do today I think I think we're gonna start with just building it out in flutter just because that is the more fun part the back end is also gonna be the more like just slightly more advanced part so I feel like that it makes sense to have that a little bit later on in this series I guess and even though some things that would be good to do like if we if we built the rest API straight away it would be kind of good to do that because then you'll be able to get the data from the API in the way that you actually would in the real or wait so when we if we were to build the REST API first then we would be able to once we build the when we start building the screens out in the in flutter we'd be able to actually pull the data from the API in the way that it actually would work in the final app so that way it kind of makes sense to start with the wrist API but we can still start by just designing the layout and kind of getting the base functionality of the UI up and running so I think that's going to be also more interesting to watch and I like I said I feel like that makes more sense to start out with so we're gonna start by just creating a flutter project we're gonna use my command that we have and we're gonna call this to do and then this does everything we want it creates repo rates the project and it pushes everything to keep up all right so this is our project now what we need to do is we need to create a we're gonna start by just creating a subdirectory called app because we're gonna have both the app and the backend in this in this project so I think it makes sense to kind of split those up into one folder called app and one folder called back-end so now we're going to and now we do or is it yeah I think that's the way to do it all right [Music] all right so what I just came up with right now is that it might be interesting to also kind of create to do for this project in github so let's so that we kind of build this out in a little bit more of a realistic way okay create a project report name all right so what we can do now is we can show you kind of the whole workflow ideas of how I would build this app if I was doing it in like a bigger group or a project so what we're gonna do is we're gonna add and this is github where we basically save all the code and we're gonna create a couple different columns here to do is one of them we're gonna also create a in progress create column add another one and then complete it the reason for doing this is that once we have this kind of list we can then or one of the problems when you're building something or when you're coding something especially when you're doing it in a big group is trying to essentially keeping every like making sure that the scope of the thing that you're working on is as small as it can be essentially because the smaller the scope of the thing that you're working on the less likely it is for your changes that are the changes that you're making that they are gonna actually affect the entire project or affect something else in someone else's code part of the code so what we can do now is we can then go through and kind of say what are the things that we need to get done and then we can list them here as to deuce so for the screen we could have actually different boards so one board for the UI and flutter and then one board for the back end and I think that's what we're gonna end up with but today we're just going to do the front end so essentially what you could do then is you could divide this up into for instance creating create the navigation bar that could be one of the traduce so we can create a new task here call that create and and then we also added it as an issue so that we can go here we can see a list of all the issues that we have yeah so that's that's gonna be one of them and then what we want to do is we want to create this thing here I'm not sure what to call that so the the thing is that this is kind of up to you or yourself because you you're just trying to make this as specific as possible so that you're really clear about like okay this is what I'm doing right now so that you kind of so that all the changes that you make in the code are super small as small as they can be and therefore it's kind of up to you to define how small the thing that you would like to have as an issue or as a task for yourself for instance you could have something as small as like okay add this text here add a button here I would probably divide it more into like creating the nav bar and then maybe creating this part that's I'm not really sure what they called that part so this little fold or something and then the button I think that's going to be the second issue so we're gonna create a new issue what do we call this let's call it in in tray [Music] so top bar I guess [Music] okay [Music] yeah so then you add it to the project the thing is I've been working with gitlab a little bit so there's that's a different site essentially so it's github and then there's get lab I've been doing this in github for the last like five months I think so I've kind of forgotten how to do it in github and I haven't done it that much at all in github at all so I'm not really an expert on how to do it but now it should be added so now we have two tasks in our project board ok there we go alright so now we have those two tasks we can add another one and the second one is going to be creating this list so a list of all the tasks essentially we're just going to call that create list [Music] okay now you could go into even more detail and if you're working on a more proper kind of project you probably would go into more detail so for instance what you could do is you could go into this and you can edit it and then you can add oh wait here well what you could do is you could add things like what needs to get done for this to actually be accomplished so criteria or something and then you could say like okay we need to have a list of tasks should the scroll bow and then you can just have those things as all the criteria and then when when you're like when you feel like you're done with the task then you can go to this issue you can see okay what does it have all the criteria does it fulfill all the criteria and if it does then you can commit or like well if it does then you can commit or you could create like a pull request and you can connect it to this issue and that is just kind of an easy way to organize all the commits so that all the commits make sense and make sure that everything is like connected to something in a sense so that we so that it's it's just a way to kind of structure the project we're not going to be super detailed about it like I said so we're gonna start with just this issue here creating the navbar and we know that that's going to be on top of the screen so now what we're gonna do I pretty much always use this screen or this this article that I found for creating nav bars but I just have to remember what the name of it is yep so this one and the reason that I will always use this one is that I like the ability of swiping between the different screens or between the different tabs and also being able to press the different tabs because I feel like that it's more intuitive to be able to swipe between the different screens and yeah I just kind of like that design so now we're gonna actually go into all right so this is what the app or the code that we have would like right now [Music] so now we're running it just to say what it looks like at the moment just removing all the comments because we don't really need them all right so now that is what it looks like we've cleaned it out so we've removed some of the things that you usually get when you open up a starter project for in flutter and now what we're gonna do is we're just going to implement this navigation bar essentially all right you just copy that and then we paste that here but we also need we're just gonna run that see if it works all right so that works already straightaway which is good now what we want to do is there's something like it's home navigation all right so now we need to figure out how to do a top navigation bar because right now we have a bottom navigation bar and that is part of the yeah so it's part of the default tab controller bottom navigation bar so it doesn't really it and it doesn't seem like it has anything called like a top navigation bar so what we need to do is we need to figure out which what thing we can use for a top navigation bar but I'm not like entirely it doesn't matter too much to me if we go with the top or bottom navigation bar so in we might just for the like the Minimum Viable Product thing we might just end up with a bottom navigation bar just because it's faster essentially to do it this way but we're gonna do a short little google search and we're gonna see if we can find something that's really simple for how to implement the top navigation bar and if we can't find that then I'm gonna give it about like five minutes maybe if I can't find it in five minutes then we're gonna go with the bottom navigation bar I wonder if we can switch because now this might work so what we did was just switch bottom navigation bar for at bar which could work seems like it may have worked okay so that actually does work but as you can see we have some issue here with like the top part of the screen covering some of the icons so what we need to do is okay so there's some widget in flutter called safe area widgets which essentially like protects against this stuff it adds some space up here so that we so that anything you add on the top of the screen will end up like down below so that it won't won't get covered by anything okay so I'm gonna try to just not Google this and just see if I can figure it out and we're just gonna go say okay so that that work now so we that moved everything down a little bit more so that we have the navigation bar up on the top do we okay so apparently you can't press the buttons now but I don't think I was able to do that before either all right now we have three tab bars okay so the question is how do we make something so that we can actually press the things usually you do this and then within this you can type things and that usually always works for the on tap and on prices functions but that doesn't seem to work now for this once it's probably some special one okay anyway okay okay so this might be what we're looking for let's just copy this and see if we can if that works straight away oh go ahead have some more things okay okay so that works but we don't want the title so we're going to remove that [Music] okay I'm just gonna say kind of what it looked like before okay up in the documentation okay maybe if we don't wrap this thing but we're at the top or something Oh okay wrap this thing yep so wrap that in the safe area widget instead okay see if that works okay so that works now apparently it was just because I was returning a safe area widget up here instead of a material app and it expects a material laughter so thank you Juan Marko in the comments for that because that was what helped me solve it okay so now that works now now we need to actually design this thing to make it look the way that it should look [Music] all right okay so we're gonna wrap this thing in a container [Music] hmm okay maybe that doesn't work [Music] scaffold table all right all right call those the lines so now that is white safe you know wait tours what the safe area out we're gonna do [Music] [Music] we're gonna remove the indicator because we don't want that [Music] so what I want to do is I want to have something below here and I'm pretty sure that that is possible but I'm not sure quite in what way okay I think yeah all right I think I have an idea container right and then we run it just to say that it works the same way that it should and it seems to be working the same way that it should which is good what we do then is we wrap this again but we wrap it in a column chill run and then what we need to do we need to do this [Music] all right so that did not work so the question is how do we add something below the app bar or the yes of the app bar and scaffold okay so this in maybe this works yeah so that seems I think I think we have finally found the way to do it okay so that's the title so now we have that in the title of the bottom of the app essentially what we need what we can do then is we can go with Bourdain I think no bottom okay let's write this nope a part title content No what does the Apple have within it for the scaffold bodies by title actions for Denis all right so in my you know what we could probably do something else trying to think of like because there's a couple ways we could do it that we could either have it be like the app bar up here and then that also has the container below it like this with the button law and all that so that this is like constant essentially so when we swipe to another to the to this page for instance this stays the same like that thing stays where it is or we could do something where this so the part that's like below the app bar that is essentially attached to the page that we're at and I think that it's the way to do it right now so when we're on this page here is where we have each of those like little folds or I don't know what to call them but we'll call them folds for now each of those little folds is going to be attached to the page I don't like that that much because I feel like that the way that it would be better is if this is like constant and then when you move to a different page that stays still and just changes kind of what it looks like or what's on the actual fold but it seems like that is pretty difficult scaffold stack children okay so what if we did this [Music] okay maybe this work okay I think yeah I think I think we solved it all right that's good now what we need to do is we need to make the app bar look the way that it should which we don't want a shadow on it so elevation all right so that now has no elevation okay so we have this what we can do now is we can do box declaration office decoration or the radius all right I am and I always forget this I think I've said this and another stream but as soon as you add the decoration to a container and flutter you have to remove the color from the container and then move it into the box decoration which I always forget so therefore as soon as I add box decoration there's always like an error okay so then we have this little bottom part we're gonna actually set the yellow we're gonna do gray just so that it looks a little bit more like the actual app alright there we go so the reason that this app bar up here is blue is because because of this I believe but if we do whites here well let's just try to wipe ten I'm not sure what that does yeah okay so for some reason white is not a material color so for that reason it gives us this error okay the reference duplicated use of color stock gray the constitution of these juices for naming okay so that apparently will smell all right I think I think that was the problem all right so there we go now it looks like that but if we look at this design the corners are a little bit more round than we have it right now so what we need to do is we need to make them even more round and the way that we do that is by increasing this number so we're gonna go 50 okay I think that is more what we want now we're gonna have to make that a little bit bigger as well probably 200 okay what are we teach something I think that's a little bit too big maybe we're gonna go with 150 all right is that too little okay that's probably perfect all right so now we're gonna add the title so entry here and then we're gonna add the button to this one and the way that we add okay well let's just start by adding the title okay go the reason that we need to add a row is because we want the title to be slightly to the left so we need to have a row here with one object here and one object here so two objects in a row and one of them is just going to be an empty container like so and the first one is going to be our text that will say intro oh we also need to make it or add it in the right place all right so that is now we should also do this you main axis alignment the space between that means that we're gonna maximize the space between all the different things that are in here which means that this the text is going to get cooked as far to the left as it as possible and then the container is going to get put as far to the right as possible now we're going to save it and we run it and it should look like that so we have entry here and the container is probably somewhere over here also what we want to do is we want to add some padding edge inserts dot only okay so there we go we have entry there what we need to do also is we need to make the size of this bigger and the right color and then the right font as well what we're gonna do for this I think is let's create a new folder on the side here and we'll called that what are we gonna call it models right and then within this we're gonna create a new file I'm gonna call that global and within here is where we're gonna actually have all the different text fonts and all that stuff so that when whenever we want to access a certain font or rather when for instance let's say that this font is always going to be the same so even if we're at a different page we want to use the same phone the same color instead of having to create a whole new text object or text style object to get the right style we can just access the title style or something like that from here so what we're gonna do is we're gonna import material and that's just so that we have access to all the different things and then we're going to go ahead and create the different colors so we're going to create a list of all the colors that we use color red color equals and this is where we need to add I think it's like 0xff and then color code so we're gonna start with this one actually because this is more useful so we're gonna call this [Music] [Music] yep and this is also a good way to because if we want to do something where you can choose your own theme or something like that so you can choose a light theme or a dark theme or something then having all the colors like this makes it also easier to just change the colors so if they want to go to a light theme that we could just change all of these variables to to be the light colors all right so we have dark grey color I'm gonna save that for now and then we're gonna create the textile text all right so we're gonna call this [Music] so when I'm trying to figure out my what to name the different variables the problem here is that I think this is only going to be used here like we're not gonna have the same font anywhere else or the same size of the font anywhere else which means that we're really only going to use it once we might use it twice and therefore we can name it very specifically to be in tray title color or something like that but for instance for these ones we can name this one what we call it task let's let's see if we can call for this it's a task title dark color or something like that and that is less specific so it we know that that's going to be every time we want to show a card like that then we know that we only need to access the task title dark color and I don't know if this makes sense but yeah alright so entry style equals new text style font family and fun family is a veneer and formed weight is weight unfold and then we have also color and that is our dark gray color and then we also need to set the size so it's a size I think we're gonna have 40 because I think it's gonna be pretty big all right so now we have that now we just need to import this into here [Music] [Music] [Music] okay so now we can access that and we can set the style here style to be in trade title style alright so now we've set that if we run it now that ends up being a lot bigger and it looks a little bit more the way that we want it to look I think we still need that to be a little bit bigger now this isn't super important this is like really a little bit too much detail even it's actually care about this early I feel like the size of that title is not super important especially not if you're creating a minimum in a Minimum Viable Product because we only really want something that is semi useful that we can push out to people so that they can kind of test it and see what a lot what they like about it and what they don't like indicator all right that's good okay the label color is supposed to be powered Orange now we can access our dark gray color as well the unselected taps sure to be don't let them be blue for now alright the background color of this one should also be dark gray color right there we go we have the dark gray there and [Music] all right now we need to add the button here so that we actually can add different tasks and what we want to do is we're going to add a button that's like halfway between or halfway between the different places essentially and the way that we do that is so we have a stack here we're going to add a floating action button I think and then go to our child all right good on Bruce okay so let's see what that looks like now all right so we see we get that up here and that's actually pretty good because we want to then place that in the right spot okay maybe let's wrap this in a container all right and what we do then is we add some margin which in sets only 140 okay 135 okay so that's then in the middle and now we want it to also be in the center of the screen so laughs let's do this get screen with there we go multiplied by 0.5 okay so that is now placed in the middle it's not quite in the middle it's like I think the way that it works is flatter looks as at this as the starting point of the of the widget and therefore that point is in the middle and then it puts the button at that point so that's why it's kind of off to the side so what we need to do is we need to also include the size of the button so but first we need to actually decide what size the button is going to be so no okay I think the way to do this is to add a container in here because then we can set the size of this container size let's go hundred all right let's see if we do this sighs all right okay so why does that not work okay so that's why so we didn't need to wrap that in a container we can remove that all right there we go but that's a little bit bigger I think so it's going to be that kind of size and I think that that maybe 80 and I think that we also need to actually design our own icons for the for the plus sign here because I don't really like that that's so thick I compared to this this is pretty thin and I kind of like the that that's so thin compared to what we have right now which is that thing that's pretty big okay so now we know that that is going to be the size eighty we need we know them that we also need to either add or subtract I'm not really sure so we're going to start with subtracting subtracting half of the size of button yeah so that seems to end up in the middle but then this also needs to be alright so that I think that's pretty much in the middle what we need to do now is we also need to get the color for this button so that we have the right color now this color that we see here I don't think it's the same one that we actually want that we want because what I did was I built this app or this sort of thing a while ago and it turns out that that color doesn't really translate to the color that we see here but I like this color more but when we add this color into the app it turns into this color so that's why I don't think we can add this color I hope that made sense all right copy that there we go and now we'll go into our global and we'll add a new color paste that all right and then we'll set the color of our button to be the red color and then when we run it it now turns into this kind of red color maybe we should I'll try it with this one too just to see that looks better okay so I think that actually just looked a little bit better so we're gonna use that all right floating action button I love animation I'm not sure what that will do okay I don't think that did much all right so now we have that added so that's good what we do then is we go here and we do get ad mid and and what we do is we go to our github account again I will at the issue that we created so this one and then we copy this and yeah and then we just paste that in here and then we do get Porsche all right so then one we go here we look at the commits we can see that we have this connected to this yeah so that's connected then to this issue which is good because that means that we've then finished this issue so we can do we can go to our project board we should have moved this into this place first and then move it into testing we don't really need to test this that much so we're just gonna move it into completed straightaway and what we're going to do we go to this one and then we close the issue all right so that means that is done and now the next thing is to create the navbar we did that too actually so we can close this one out as well and this is the difficult part that's like I've been doing these things that I forget to just commit and add it to github because and by doing this sort of stuff it's easier to make it so that you actually can track what you've done basically now I've already like just done those two things in one which really simple what I wanted to do but it's not super important for right now all right we can move this into in progress and now let's add our list we're going to create a new folder and we're going to create a folder called UI and then within this will create a folder for our entry page okay and within this will create a folder or a file called entry page dr. alright and what you import material and what we want to do is we want to essentially just create this copy that taste that here and then we'll remove all this and we'll call this in page it doesn't need a title we're gonna remove this actually and we're gonna call this in tray page States all right so there we go and what we're gonna do here is we're going to return a container for now and this is going to be color colors dot red and it's gonna have a height of 100 and a width of 100 and main so here we want to basically get so that's this is where we want to show that page so we just created a page essentially and now we want that to respond to the right tab so what we're gonna do is we're going to add a child here and that's going to be in a page okay we run it okay so that adds it up there which is not where we want it to be added oh yeah here we go that's why so we need that to be here entry page there we go and now when we run it I think it should look yeah so there we go we have the entry page here and now we can just go ahead and edit this in here so we're going to we're going to dark import run it and now it's gray again we can actually remove the height and that stuff and now we can go ahead and build out our list and what we want to do I think it's just have a list view straightaway you get a list and then we'll create a method here list okay and that should then return a list of a ton of widgets so what we want here could be like several containers is to see if this works this one can be color rose red and then paste it here add it comma and then we set the color here to be green and this is just to demonstrate and to see whether it works or not okay now if we run it we don't get anything aiya that's stupid the reason that we didn't get anything is because we haven't set the size of them so we need to set the height let's say 100 I think that is all that we need I don't think that we need to set the width save it didn't give us an error at least so that's good but there you go you see we have a list up there what we also need to do is we need to add some padding or yep padding edge inserts the only top and that should be 140 okay that probably needs to be even more oh yeah there was something wasn't this like because right now the if we do this that means that the list stops there so let's say that we do 300 so right now the list stops in the middle so that means that if we scroll it's just going to look kind of weird because the list just disappears into the middle of the page what we would like instead is like that it would disappear beneath here in like a smooth way so it shouldn't be like a line here where it disappears into it should just like so if we do like we did before 150 save it run it you see there's like a line here and if we pull up it still disappears into that line so it doesn't disappear smoothly and also if we do if we try to fix that and make it so that the list starts even higher up then we get a different problem and the problem is that if we have a task up here then we can't really see that task unless we pull down so what we want to do is we want the list itself to kind of start with all the tasks pushed down a little bit and I feel only that from what I remember last time I did something similar to this there's actually something in list view where you can do this where it's like it starts a little bit down all right let's see ListView okay it's that simple so the the thing was just to add instead of added the padding to the container you just add it to the list view and it takes care of that itself it's in hope so now it starts in the right place or not exactly in the right place but it starts in a better place okay so that's probably where we wanted it to start and then essentially it's just going to be a long list of all the tasks that we have something like that and then we can just scroll through all of that list essentially okay so now we've gotten started on that the I think that the next step is going to be to actually make some of the backend work so that we can then pull some data into this and pull some notes in here or to some to do's and or well we can actually alright so it's been like an hour and a half I think of this stream and so I think this is going to be at the end of today's stream and the next time in next episode or next session next Monday what we're gonna do is we're gonna go to actually design the cards here for all the different tasks and then after we've designed that depending on how long that takes we're gonna get into some of the backend stuff so starting to build out the rest API I'm not sure whether we're gonna do that in the next one or whether we're gonna start by just creating the different objects in here so what we would do is create files for all the things like tasks got dark and then create classes for the different stuff that we want to want to have in the app so I think that that's alright so that is what we're gonna do next week I'm deciding it right now so that I don't have to think about it next week so this is what we're gonna do next week we're gonna build the cards so these little things here that's going to show a list of all the tasks that we have essentially and once we've done the design of those cards then we're gonna go into and create the different classes that we're gonna need and once we've done that the next step will be to start building out the rest API and start pulling some real data into the app so I hope you enjoyed this little this part 2 of the build and I can see that a few of you been pretty active in the chat so I appreciate that I'm gonna go through and read that after I finished but yeah that's pretty much it for this one and I hope you enjoyed it like I said and I hope you look forward to the next one I hope you join me the next one as well so if you haven't already understood it I'm going to be streaming this build every Monday at 2 p.m. and the end time is supposed to be just one hour but I feel like it's hard to just stick to one hour because it's a little bit short to get this stuff built but I want to get built but yeah that's it for this one

Channel: Kalle Hallden

Views: 135,392

Keywords: building an app, hot to build an app, how to make an app, building an app from scratch, how to make an app for beginners, building an app from start to finish, building an app with python, how to make an app for android, how to make an app on iphone, how to make an app with flutter, flutter, python, flutter tutorial for beginners, flutter app example, flutter app from scratch, flutter app design, how to build an app for ios, rest api python, build rest api python

Id: i52vHm9q_nI

Length: 93min 5sec (5585 seconds)

Published: Tue Sep 24 2019