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

the third part of this app build and oh I'm exhausted I've had like a really long day I was filming a video and like filming the stuff that I needed to save for it and that usually takes me a long time because I'm really slow at it but now I'm ready and we're gonna get to it it's gonna be one hour of building this out and yeah let's just get straight into it oh alright let's take a look so where we left off was here I think we did create a long list all right so we did create a long list of things but it's not as far as I remember it wasn't actually actual things it was just like random randomly colored containers just to kind of demonstrate that there are different different tasks in there or different cards for the different tasks let me just put that over there right so I'm just gonna have to check here and see where we're at we've got the entry page oh yeah that's right okay I remember now so in here if we do container all right so my computer is like super slow right now I'm gonna see if I can fix that all right hopefully it'll be a little bit faster now all right so we'll just do this will create a couple of containers colors dotted red all right and then set the height to be 100 and then we'll copy that and we'll do another one below it and that will be blue I'm just doing this now to see kind of where we're at because I don't really remember what we did it's been a stressful day so I haven't had time to do what I normally do because normally I'd go through what I've done and like prepare a little bit so I haven't really prepared for this one all right four and this for loop is essentially just going to create or add different all the containers to a list oh I less than 10 I think we want to create 10 containers and then I plus was alright then we'll do list add and we'll do the oh yeah that's right so we'll add a container here like so and then we'll remove this container and then we'll add that as well so we'll do this doc pad other stuff work all right so I think that's gonna work and then we'll return the list all right so now we are at we should be at where we were when we stopped all right so there we go we have a long list of all this would be the different tasks once you press like add and then you add a new task I think this what I thought of yesterday I think was that I'm gonna do something where I create a a Minimum Viable Product that's essentially gonna be just this part or this part of the app is just gonna be this screen so I'm gonna build that out and then I'm gonna try to publish that to the App Store and to Google Play because then we kind of get this base functionality up and working and then we can add on like we can iterate on that product and we can add the different pages because otherwise I think I think I personally I just want to get this app out and I want to work the use of myself so that's kind of why I feel like just publishing it straightaway also I can get some feedback from you guys on what you think of it and yeah then I can kind of improve it and we can improve it in a sense as we go and then we can add all the other different tabs and the different screens in afterwards there's like iterations on the first Minimum Viable Product and so what I'm gonna do is I'm gonna make just a little list of like what would be the things that I would need to have in order to be able to actually publish the the Minimum Viable Product so I'm gonna create a new let's see if we can do okay no pack requirements there we go alright so we're gonna remove that right so in order to actually publish a Minimum Viable Product what we would need is we need to build a REST API so that needs to be up REST API needs to be working we're just going to create a bullet point list here alright rest api we also need to create all the classes for like the notes that project all that stuff I really want to essentially have all that stuff working straight away so that we can then just essentially work on the flutter app and not really have to do too many things with the rest api we might have to change some things because inevitably i won't be able to think of all the things that might be needed straight away so you might have to actually add some things later on but these two things if we can create those then we can essentially pull that down in here and then we can add different tasks in here and then pull push them to the rest api save them on the database and then what we need is we need to be able to add items in the app we also need to be able to move different items hierarchy that's not how you spell that maybe that's not how you spell that either hierarchy I don't care that's close enough move different items so that's what I'm thinking is just that you when you add different items here they'll just get added in the order that you add them but I want to be able to also move them up or down and depending on what the importance of the task is so that's something that we need so we need to then also create the add new tasks screen or maybe window I'm not sure what we're gonna do with that and what else do we need I think that's gonna be pretty much all that we need because we just need to be able to in order to just publish this as like a very very simple to-do list app we just need to be able to add different tasks in our to-do list and we need to be able to like press done also on them like say that they're completed so what do we do today I think today we should design the cards here probably work on the move items in the hierarchy functionality and okay yeah I think that's what we should start with that mm-hmm and then once we've done that we can see kind of how much time we have left because I want to do it this stream for just about one hour maybe an hour 30 minutes and depending on where we're at if we if we're even able to finish that today then we'll go into maybe adding the screen or the window for adding new tests all right so let's take a look at what the cards look like so that is kind of what I've made them look like I probably want to add something like a little radio button or something like that so you can press that they are actually done as you can see here you can if they're I don't know what that would be called by when they're like marked like that they're done and then when they're not marked they're not done probably when you mark them they should disappear or something at least from the entry list so that is something that we're gonna do we're gonna have a radio button in them we're gonna have the card and then the title of the note right so let's design that create a widget here get to do with something that I feel like I need to actually get to is creating because this this way what I'm doing now is I'm creating a method that returns a widget what you could do and what I think is like what you should do when you use flutter is actually create like a separate create your own widget in a sense almost like you created a class I haven't really looked into that so I've failed to actually learn how to do that but we can actually check that now because I don't think it's super difficult all right let's see create [Music] first part [Music] all right so what we'll do this will create something in here maybe called widgets yeah all right we'll create a new folder in models and we'll call that widgets and then we'll create a new file and we'll call that intro entry card entry to do with yet dr. alright and then what it looked like is you create a class and then you name that class will create will name that entry to do and then this extends the stateless widget I think we need to import material and then the less widget [Music] okay I do read the chat sometimes but I feel like yeah as soon as I start reading the chat I kind of get lost in the chat and it just creates a long moment of silence when I like try to read everything out and try to figure out what to respond to but Sergio asked if you could or said you can run your or use your apps without publishing them right and that's true you can just use them I can just date basically connect my phone and then I could just pull the app over into my phone and then use it there but I feel like the the the advantage of publishing it I don't know if I would publish it to be like public but you could publish it in beta or something like that and then I could ask some of you guys to become like beta testers and I create could create like a small group where I could get some like direct feedback on the app and that would be the advantage of doing it that way versus just me testing it on my own so that's kind of the idea why I wanted to publish the app as soon as possible okay so why did this not work oh yeah creating this thing override there we go so here we go now we can create the or the the cards it's still super difficult to talk and do this at the same time like my thinking is way too slow to be able to do this hi a hundred color colors actually let's just you the red color alright save that and what we'll do entrer go to the entry page and then walk and list dot add [Music] did I call it to do I think I called it to do ain't ray to do okay no that didn't do it oh yeah that's why alright so there we go and if we run this now if we run this now it should show yep so there we go we have a long list of different cards and these are these widgets that we created up here so what we do now is we design these widgets essentially to look the way that we want them to look so we'll create a margin edge inserts and this is what then will separate the different containers so if we do edges let's talk and then go Tim and then run it you see they separate so then here we can actually see that we have different different items in this list so there we go we have some margins set for them we probably also want to have left and right 20 right 20 and we'll go top 20 as well maybe bottom is better the reason that I think bottom might be better is because if we have talked then there'll be a margin up here and we don't really need a margin up there we just need a margin down below so that's why we want to have it on the bottom all right so there we go we have a long list and now we need to actually create it in the way or design it in the way that we have it on in the design here all right so there we go okay let's do declaration box decoration and this is what we used to then set the corner to be round and that stuff so border radius for radius at all and then radius dot circular and in case you're like new to this I the only reason that I remember this stuff is that I've been using it so much now that I I just remember it and at the start I was just I would have to Google how to do this every time so it's not like it's pretty much just one of those things that you don't like I I don't what do you call it like route or rote memorization I don't use that to memorize all these different things it's just that once you use though or the things that you use enough you'll kind of remember automatically there we go round corners I think that the margin might be a little bit much let's try just setting that to be ten instead all right I think that this this stuff is again the stuff that I kind of get stuck in that's not super important but I feel like that was a little bit too too small of a space between them all right I think that's pretty good good enough for now and then we have box shadow and I know because I I just like learned this the other day because I I don't use this that much a box shadow is like an array and then in that you can add a I'm not sure what it was called now so then we Google folks actually I know I have another app where I used it job listings app this is for the video that's coming out on Friday name and then search for box-shadow all right there we go we have a shadow there we'll delete or exit out of that mix it out of that paste it don't have to rewrite it and now we have a shadow but it's like light gray so it doesn't look like great let's do black will that work okay don't know if I'll like that there's also I also found this out just like a couple days ago but there's something called opacity or you can just do when you when you have one of those colors you can just do dot and then with opacity and then you can set the opacity in here which is really convenient especially for this stuff so there you go I don't know if you actually saw that but it did change the opacity of the shadow so now it doesn't stand out quite as much let's take a look at yeah I think that's good enough all right so there we go we have those things what else do we need so now we look at this card and we imagine that we also have a little thing like this essentially this is what we what we wanted to look like so we want a radio button like that and then we want the title of the to do so the way that I look at this is we would need a container here or what we would use is a row and then we have this thing in one color or one section of the row and then in the other section of the row we add a column and then we have the shopping list and then the subtitle below that I'm not sure if we're gonna use the subtitle though but I think we're gonna make something like that anyway all right child for people what did we want okay ro children I think a lot just do radio button and hope that that's gonna look good straight away okay we're gonna leave that for now and then we're gonna do a column children and text title and this is then something that's pretty good about you so using these widgets it's that we can then add something like final string title and then we do what we do in tray to do or what oh there we go is that what it should look like though okay that seems to work though but I still mostly where I've seen it in other apps it looks like this and that's kind of what they use as well when you open up like the first Slugger project they use the curly braces and then the regular brackets or braces parentheses yeah anyway so that was what we for you what you would use to then get the title so then we can set this text here to be equal to the title all right and an entry page we probably need to do this we'll set this to be [Music] all right so that's what it looks like now doesn't look that great but what we need to do as well is we need to add some padding so margin is essentially outside of the the widget that you're using so when we're adding margin we're adding space on the outside of the widget if we add padding we add space on the inside of the widget so if we add padding here essentially the hello will get moved down a little bit instead of it yeah so I'm just going to show you padding edge inserts all I think ten so there you go it kind of gets everything moved in a little bit all right what we can do now so we can do style let's see what we named in trade title style okay so you want to create something that's this similar to the entry title style but we want it to be for a little bit smaller all right copy that and then paste it and then call this Darsh to do title that's going to be good enough and then we'll call that 30 okay copy that paste it here okay run it and then we get kind of the bigger title of the text which is pretty good we also would want this to be moveable so we're gonna I don't really know how to make something movable I think there's something called what is that called because I know I've used that some in some other app but it's one of those things that I don't use ever really so therefore I don't really know how to do it okay let's see draggable widget the difficult thing is like coming up with what the actual wording or like how are you gonna face the thing that you're looking for so what I'm looking for is something that's like a widget that's movable but it's not just movable like randomly I want it to be pretty like strictly movable if that makes sense so if we looked at this tutorial what they showed us is how to make something that you can just move anywhere on the screen and that's not really what we're looking for maybe if we don't use X or Y yeah if we don't use X that might work though okay movable okay we're going to copy all of that I'm going to paste it in here because it's easier to read moveable stack items stateful widget little stack item okay-y position is what we want we don't want the exposition color it's gonna be our red color but I don't really know I don't think this is the one though move items in list okay so that seems to be what we're looking for example all right so what we do I think there's gonna be a repo so flutter rate or the full list there we go okay go live [Music] [Music] as soon as I get this over like this and it's like how many lines is that like 245 I just want something that's like super quick and simple and I'm pretty sure that there is something that is way simpler than this all right let's do another try what did I Google just before [Music] [Music] [Music] [Music] prove items in list [Music] reorder about ListView widget of the weight I think that's all I got [Music] okay reorder with you I don't want to watch a video [Music] okay some this might work but I'm not sure so we're going to delete all of this I'm going to save it I think what we need to do is essentially instead of this being a list view it should be a reorder a little list view and then on reorder not sure what that's supposed to do but let's see all reorder call back old index new index okay on real Oh okay so what we'll do is we'll create a global list here with containers and that will be our to-do items all right and then what we'll do is we'll call this oh yeah so this needs to be something like that and then we'll delete that and we'll do what do we call that again item to do items [Music] okay I think this may work now hopefully it works 69 children all children must help right [Music] all right so the seems like that needed a key for some reason I'm not sure that this actually solves it but it might no it didn't solve it this is one of those errors that I've gotten before and every time I'm able to solve it it's like I never really know how I solved it let's see failed assertion position that's children of every widget widget does she does not know either the assertion indicates an error in the framework itself or we should provide it to say show me more information help you determine a fix on where in either case please report this assertion by filing a bug on github we did Christian Troy okay so that did not solve it okay let's google it then container key here wand because this is essentially what I did for this new one pretty sure I added a key for each of the containers and that still didn't really solve the problem reorder on reorder reorder list seven Oh children's reorder the list okay what if we do this then and we do okay and then we'll do to-do items here instead to two items I I don't think this should solve it but no okay tried calling instance of interface to do the method add was called on no okay I think we didn't even I don't think that solved it I just think it we created another error and it's still gonna give us the same one yeah cow on the link I shared line 79 there's a build reorder this simple method maybe it'll help you alright I'll check it out this is what one Marco zero sent in line 79 let's take a look seven art will build reorder below [Music] simple love reordering reordering allow reordering to do a simple sample items all right let's copy that one and we'll need to import that or to install that package oh-hoo-hoo okay we have that and what we'll do we'll remove that we call that our to-do items build this tile mr. Harmon entrer to do build this style allow reordering let's install the package where'd you find it copy that all right what we'll do is cuz I can't really be bothered I'd seems like I don't know I can't really find that there's a package for that for that one which means I might have to like get to clone it or like go through its repo to in order to actually get it or no he's no I don't need to get it wait build reorder a wall list on reordered it [Music] let's try this thing just to see if that works okay then we'll run it nope still didn't work okay he does something like with this math thing and I'm thinking that might be what is important in tre to do build list tile so we'll do that save it options we don't need options right [Music] okay so that actually did work oh okay this was a bit of an effort to be honest to make this work but now it seems that you can in fact reorder them which is good so now what we need to do is we need to make sure that we actually get what we want to get so we list tile alright so then just make this into a list tile instead right okay we'll try it now we'll see what happens list tile and [Music] [Music] right so this might work then [Music] [Music] all right so that didn't work either okay let's do list tile okay and then will do will remove what we changed here save that and I mean it feels like we're going in circles kind of doing something over and over again that should just be simple to do once or we should just need to do that in one place which I don't really like let's do padding 300 right so now we should be able to move them which we are able to do right so that works but it feels like we're doing we like doing everything twice really but I think that what in the thing is in reality when we build this app or in reality once we get the backend stuff going what this would be this list would be really a list of a to-do item what we can do actually we can create that class so create a new folder in here I'll call that classes and then in here we can create a file called to-do item if we go here I think I have let's say I'm gonna open up Evernote and see if I can find because I wrote down some requirements for the app or for the what I was thinking that the the classes would look like so here we go I think screens classes here we go copy that paste it here okay so here are the classes that I came up with so first of all we're gonna have a task I think these ones are going to be tasks so this could be a class that we can create straight away and these are essentially what the things that I came up with that I think should be in this class and that is a note so there's of course your notes or not of course but they can be a note where you write down some things about this task and then we have a date which is the time to complete and then we have a bowl whether it's completed or not and then we have a string which is for repeat so if we want this thing to repeat every week or something like that we have a deadline and then we have a reminder and then we have the task ID and then we also have a list of tasks within this task I'm not sure if you can do this but we'll see if we can do this but because I don't I don't know if whether we can whether we can create a class and then have a list of that class within that class I'm not sure whether that works and then we have another class here called project and that's gonna be like the more overarching thing where we'll have a list of different tab where you can kind of categorize things in a different way anyway this doesn't make a whole lot of sense right now and it's kind of difficult to explain it in a way for it to make sense so I think it's better to just build it out so and show you kind of how I'm thinking that it's going to work so we'll create that class in here I'll actually rename this to-do item talked our tasks it docked all right class task and then we'll have a list of tasks okay so that seems to work that's really good string note and then we have date time [Music] time to complete not sure what I meant for that because I we have a deadline and then we have time to complete I'm not sure whether I meant that the time to complete is gonna be like oh yeah that's right I think I think what I meant by time to complete is how much time am I gonna allow myself to complete this task so for instance if we say like okay I'm gonna do a live stream then I know that I'm gonna do that for one hour and 30 minutes so the time to complete would be 1 hour and 30 minutes I I think that should just be a double because we don't really need it to be actual time I don't think yeah actually it does need to be time date time time to complete which was created two times man all right boom completed and then we have string repeats then we have date time again did line take time reminder this could probably be a list so we could probably have this as a list because we might want to have several reminders and then we'll call that reminders instead and then we'll create a string task ID and then we'll create the what is this called again constructor that's the one right and this dot no okay I forgot to even add the title here so title so what we want is just we're not going to use all the things right now so we just want title and we probably want to complete it as well third okay so there we go we have that class done now what we can do is we can make this a little bit more the way that actually would be made so instead of this being a list of introduced it would be a list of tasks and then we import tasks alright so that is task list instead to be a little bit more specific get list okay what was it again it was title and we're gonna use just my first to do plus I dr. string and then the next one was false and false all right and then we're going to use ID as well so if you task ID on a I dot two string so that's going to be the ID for now we're gonna add that here task ID all right oh and that is just so that we can then get a key that we can then use up here so we can say that the key of the list I'll this is like the main thing or the thing that actually creates creates the each item essentially in this list so that and this the key here is the thing that what would you call it like identifies the different tasks or the different things in the lists and that is why you can then move them between down I think that's why it needs to be very specific the way that you do that okay and then title should be in tray to do and then we don't need a key value for this well we just need title equals item stop title okay and then on reorder okay I'm not really sure what I'm doing right now I think this works but I'm not sure whether I'm actually changing the right thing right now because we are what I'm adding right now is each of these things instead of reordering the class that's like the entry to do class that widget now instead we're just changing this list of tasks so we're changing the order in which in the order within that list essentially and I'm not sure whether all of them are supposed to just change the order on that list because that list is not really unless we yeah well we do set State here so it might rebuild this thing as well because the thing that I'm thinking of is like if we have this or here is where we essentially build that list of all the to deuce and what we're using is the list of tasks that we created and then we create a new list that contains the different entry to do so that widget so these widgets essentially and therefore we have a second list here that is just a widget list it just contains the widgets and then we have the first list here which just contains the tasks so what we're doing now in all the these set States and on reorder is we're changing the order of the tasks and we're not changing the order of the widget list essentially but since I think that we use set State and I think the only order yet that uses set state as well so that should then change to that list and that should also trigger this list to be rebuilt so I think that it works but we'll run it and see if it works okay so the way to test it is by moving something because I've added the some identifier here so it's like zero to nine so if we move this thing oh yeah it stays the same so that's good so that means that it works which is great because that's exactly what we wanted it to do all right now we're able to move the different items which is great I don't really like that it creates like this white background here so we're gonna see if we can change that list tile okay what if we do if we remove this you might want to do bottom-5 maybe this is just a little bit of extra design okay yeah so that looks pretty good and now we can press that and we can move it down if we want oh it's a little bit I think it's more difficult probably doing this on the on the emulator rather than doing it on an actual phone but it works pretty good so I'm happy with that so thank you to mark o0 for sending that in that tip because that helps me a lot I also want to get this across one this is kind of why I do this live is because I want to show that I'm not a magician I'm not an expert I just do these things I don't even know that much it feels like sometimes so it's really not super difficult to actually be able to build these sort of things because as you can see I mess up all the time and it takes me a while to do even things that may seem very simple so that's just kind of one of the secondary purposes of this livestreams all right but that's good we're able to do that now I'm happy with that the last thing before we stop this dream is going to be to try to change that color if we can because I don't like that we're changing the color behind there unless we maybe change it to something else yeah so we want to change it to something else let's see if we go here on order change color [Music] [Music] okay [Music] of the list [Music] [Music] [Music] [Music] so we might try something if we wrap it in a theme that might work [Music] my computer gets super slow when I'm streaming as well so it's like every time I'm scrolling it takes like a little bit of like a little bit too long to actually react okay new theme [Music] [Music] all right that works so that is sometimes one of the things that you have to do you have to wrap your things in themes and that way you think you can then oh I'm so tired I'm like loosing losing the train of thought all the time yeah so you have to wrap your widgets sometimes in different themes in that way you can then set the color for different things if we don't have this theme then selecting that thing just turns turns that into white oh okay it needs to be there yeah so anyway it doesn't matter too much when we press it now long press it it just turns into the dark gray it doesn't look great still because actually what we can do is we could probably do colors transparent maybe we'll see if that works because that way yep so their yoke now we move them and we can move them without any background color at all which is really good the only problem is that there's not really any like there's not that much feedback when you long press them the only thing that happens is like the items below it move down slightly but again if this is just gonna be like the minimum viable product it's not super important the most important thing is like that we can do some of these things the idea essentially is for there to be a couple bugs when you do the minimum viable product short and for minimum viable product is MVP so I'm gonna use MVP from now on because it takes too long to say the full thing it's not really the idea for it to be bugs in the MVP but there's it's okay for there to be bugs in the MEP anyway that's kind of it looks pretty good right now I think and we we've got that up and running so I think the next time what we're gonna do is we're gonna start working on the rest API using Python so that's gonna be pretty exciting and also before we end this I just want to mention that a lot of people have signed up to my newsletter that I created a couple days ago called clean code Friday so in case you haven't signed up for it I just want to mention kind of what that's about so it's gonna be a newsletter that I'll send out once every week so on Friday every week and it's going to essentially contain just a couple of like bullet points regarding things that I find throughout the week that I think are interesting and that I think you might enjoy and that might be things like podcasts that I'm listening to or books I'm reading or articles I've read or like tips and tricks when it comes to coding even productivity tips really just anything that I think you might enjoy it's going to be in the letter and so if you want to sign up to it you can go to Caltech comm and then slash clean code Friday I can actually go to it right now so you can see it Caltech comm slash clean code Friday so it's all spelled out like that and then you can sign up for it in case you want to get an email from me every week it's gonna be super short and it's completely entirely inspired by Tim Ferriss so in case you see some resemblance to the five bullet Friday that he sends out that's exactly where I got my inspiration from so I think that's just such a great idea because it's like it's a really short thing and it contains a lot of different informations and like things that I usually find quite interesting to read and I wish more people did this sort of thing so that's why I kind of started it so anyway that's gonna be pretty much it for today and yeah I'm pretty happy with how far we got today so next time it's gonna be the rest API using Python so I hope you'll join me for that one on Monday at 2:00 p.m. Central European Time today I was a little bit later so that it was 3 p.m. today but next Monday it's gonna be 2 p.m. Central European Time so I hope you'll join me then and I hope I'll see you next time

Channel: Kalle Hallden

Views: 54,461

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: WdFlNQaEvOU

Length: 90min 6sec (5406 seconds)

Published: Tue Oct 01 2019