Software Engineer Coding A Productivity Mobile App in Flutter | Ask me anything!

all right Hello everybody welcome back today we are continuing with our app last time we worked on some animations and this time we are going to work on creating a list uh a friends list and and we're working with fake data so it's not tied to a database or anything but this is kind of how local like local local reproduction start for creating a friend's list and kind of getting a feel for what you want it to look like in the UI and then after that um later down the line we can hook it up to a database use actual data connect it with real accounts um we can try with like beta beta testing data or beta users um but for now we're not going to talk about all of that we're just going to try to get something up and running try to make the UI look nice we're going to follow our figma mock which I'll show in a little bit um and we're just going to get started I'm just going to boot everything up load up the emulator get things running and uh we're just going to continue on with trying to replicate the machii that I created in figma which will eventually load up here give it a second my computer is slow uh we want to replicate this um kind of looks like this it has a username a Prof a profile icon a level and I don't know if we want to show like a level bar but definitely their level number and and their level title and this is the general layout that we're going to go for there's also a popup that we have to create for inviting people to join your friends list so there's a lot of different ways to share this with friends but we're just going to start by trying to get something up and running to share a link connected to somebody's account so that they can join easily through copying and sending a link over uh similar to like Discord I think Discord does that but yeah it's going to take a little bit of time just to load up the flutter project um in the meantime we'll also launch notion and just kind of see uh where we left off with uh let's see where we left off I'm pretty sure we left off exactly where I was talking about but yeah we're going to work on friends list search search bar functionality generating rows in the list for the friends list and creating big friends uh fig friends infrastructure which we did yester or we did on yesterday Saturday um we still got a lot to do um we still have some pages left but we will worry about that a different time also if anybody uses flutter do you know if emulators are supposed to take this long or if there's a quicker way to have the emulator run faster because I feel like it takes a good 5 to 10 minutes until until my my app launches and I can start working on it um I think the first thing that we need to do though I I kind of know where we left off uh we have to add functionality to have these rows as well as a profile icon which we currently don't have so this is a custom chevron chevron button row and we have to add a bunch of things so let's see there's a row here mixed in with another row expanded is the text title and and oh what is this man I I created this row really early on and it just kind of shows that I kind of didn't know what I was doing uh so let's see oh I see this is a trailing text row so this is like over here uh trailing okay we should really have this be uh hold on we should have this be something like this it should be trailing text and I also [Music] think um I also think that this title should also be title text be more explanat right see what's breaking here I see what else I broke yep uh we're going to have to save all of these let's see where's the red trying t uh like that okay did we fix everything there's one more uh done okay cool all right uh we made that a little cleaner so now we have to do a couple things uh the first thing that we need to do is we need to add a profile icon so here in the Chevron we have padding here that kind of covers that right let me see where's the color for this thing okay yeah the color is in the Box decoration Okay cool so there's a box decoration inside of it is more padding uh surrounding this and then we have expanded title space in between okay expanded title space in between so okay so this why is there a row opacity oh for oh this is to um indicate that a day is disabled oh okay okay [Music] so um I guess this takes up the left hand side and this is split between this and this row that represents the end of a screen and then that's space in between so there's like two squares here so the profile icon would be technically leading in it would it would be aligned with the leading elements so let's see here this doesn't make any sense opacity of the text okay yeah so so the idea is that it um okay wait I'm going to have to go to work schedule and disable it okay so it looks like that so it just kind of Grays it out trailing text is equal to this color is equal to white or it's equal okay so that's equal to gray okay so the color changes regardless dis the okay so the color is something that is manipulated in the moment which is why we only have manipulation for opacity here okay okay so regardless I think that this should expand and take up as much of the row as it can yeah um it should take up as much of the row as it can so we'll have another row here and this will be the title text and this will be like let's say let's go back to social page because for for [Applause] for for for h for for for see I don't think it would be a leading icon I think it would be an image [Applause] for for for for for for for for for for for that for for for there [Applause] um is [Applause] for for for for for for for for for for for for oh my God I'm not even showing the the app or the the emulator my bad [Music] um [Music] all right what am I doing here I'm oh we were making that social model too all right we were adding an image to the reasonable Chevron button row so this should be here right so let's see uh so if we're using a reusable asset image then they we're [Music] using an asset image all right in this case I guess we want what would the image be leading image is an image this returns a widget all right so I guess we can say this is a leading image widget Honestly though you can just call it call it a leading image and have it be a widget like just have it be a optional widget like this and then in our social page what we can do is we can have a leading image and use reusable asset image like that and if we do that it should show that and if we do border radius 15 uh H that doesn't really make it a circle though and this does make it a circle but [Applause] it's like this makes it this but that doesn't make it easier Because the actual shape is weird Okay so let's just say that we'll just have it as a box for now but eventually we want the Border radius to be a circle yeah we want their border radius to be a circle we want the Border we want the profile image to be centered in the middle so if things are cut out because we turn it into a circle then that's fine a person should just choose a profile picture that's kind of centered and we can make sure that the image that gets pulled through the network is also centered so this will make sense I think the next thing that we have to do here is um the padding let's see the spacing for the padding looks a little weird is there something for padding no there's not so padding here uh it looks like we just have a generic space so um let's do this dot leading padding yeah that's fine double um okay and then that way we can what is this what does this do okay so that brings it closer to the edge of the margin and then leading padding needs to be like 10 to be a little bit pushed off and um I guess reusable honestly reusable asset image should have its own own uh padding here yeah it should have its own padding to be honest or not padding margin [Music] and we can add margin in here uh we could start with 10 or make it even like uh 12 and this is margin okay that's a little too much a little too much though um I think I think that we don't want it to have any [Music] uh I think that we don't want it to have any vertical so we can just go uh [Music] um what can we do here in this particular instance we don't want any margin on the top left or bottom but we want it to be spaced from the right so honestly we should really not be worried about this and we should be adding a padding on the text um and we should say honestly we should do something where like if this is the case there's zero padding and it looks pretty clean but we should also say that um container uh margin and we should say that uh Edge [Music] only left uh and then we can have like a double here and we can say um leading text margin left margin is equal to Leading image being null and if it is uh we [Music] should do 10 if not we should do like four and we could say not equal to null not equal to null so it gives it that and then if we un margin this we get a better spacing between the icon and the name which I think is what we want what do we make it 12 is that too much 12 looks appropriate especially since this might be a circle at one point it may look a little nicer to have a little bit more space so yeah 12 and then if we don't have we don't have a leading image then it looks like that and let's see what happens if we do this uh what if we do this is that too far it is too far so I think instead of it being 22 now that we're adding a extra padding it should be 18 I think 18 is fair yeah I think 18 is okay this adds up to 22 and [Music] then uh in the event that there's a leading image that is what it looks like it feels like the lead image could be a little bit more to the left Maybe that's PR close to the uh that's Prett close to the edge of it uh what if you make an inverse shape around the pfp instead of shaping the image um an inverse shape I mean what we're doing I guess I kind of don't know if we could I don't know how to do that oh like a border oh yeah I mean that's kind of what we're doing kind of uh where is it like we wrap the image around a rectangle that has a specific border so it's kind of what we're doing like if I do this and I like have this technically there's like a rectangle around it that is like wrapping around the widget so like the image isn't really being shaped it's more like there's something that overlaps there's a widget that overlaps the image that makes it look like it's being shaped I'm just kind of playing around with the I'm just playing around with the distance cuz it's kind of hard to imagine because the the fake image that I have is a square and I don't really want to go through it to make the image easier to deal with I mean I guess I could just do this honestly you could just do like a 40 or like a until I until it's uh round enough oh I guess at one point it just limits huh yeah so I guess it doesn't really work yeah yeah so I would need to um I would need to redo the image and I kind of been lazy not to maybe it' just be worth it just to get a better sense of how it looks it looks like uh this all right now that I look at it it looks pretty bad so I think I just took it from here which is why it ends up being like a square maybe I take this instead uh [Music] download what did I call it flutter logo and it's a p right okay we do I wonder if I could just change this to a PNG and it'll be fine I don't know I mean we're about to find out so oh I shouldn't have deleted it a shoot uh I just don't know where this lives I see I'll just uh oh my you know what I'll just rename this for now that way I don't break it and I could do something like that all right let's see if this makes it better uh probably have to refresh since it's an asset brah it just ends up being more of a square how do we [Music] um okay well I mean that's a question for me [Applause] uh scaling parameter oh maybe that would be in here right uh image you need a vector [Music] logo I mean Vector logo makes sense but it says use an interactive viewer for built-in Zoom should I try that I wrap it right I just wrap an image okay the user can trans turn Try by dragging to pinch or Zoom that's like but that's just like a that just allows you to pinch in I kind of want it to be like a zoomed oh here maybe like a scale and oh you transform it with the scale okay maybe that works let's try transforming it [Music] oh you can use box fit oh oh you can just use it to [Music] Oh all bet so it is the uh the fit one so fit box fit and then we can choose the most appropriate one so as long as possible while still containing the source entirely within the target box um small as possible while still covering the entire Target Target box uh I guess we could do Phil Phil might be the best one I hope this is okay uh so we will rename this to logo 2 we will rename this back because I'm pretty sure that the first one kind of sucks yeah I'm pretty sure that this is okay like I I I like that image so we'll try refreshing it and seeing if the fit uh cannot open I mean that's fine we don't need logo one wait what cannot open file path flutter PNG what hello we don't need flutter logo one I think I'm crashing stuff no I think I have to restart the application h I wonder if there's a box fit that um like scales it properly scale down aligns The Source within the target box to ensures that the source fits within the Box yeah I think Phil is the correct one oh it restarted my app I wonder why okay nice Okay cool so this is perfect it looks really dumb but this is perfect because now if we add a border radius it'll look like a circle all right awesome yay okay it looks nice or I mean it looks bad but it looks usable you know okay cool so this will just kind of make it easier to kind of um draw similarities between these two things so I think it's looking good so far and now we want to uh all right we don't need padding then padn is originally two do we need that oh yeah we do okay adds a little bit of distance in between all of them right yeah also I don't think we need this container anymore we were doing this to debug so it looks like that and I wish this image looked better uh or I wish the image background wasn't white because I want this to be white but if I make this white it'll probably kind of not show the way we want it to so we'll do like pink or let's have a nice color that's a nice uh you can do this I guess nope Gray [Applause] all right that looks pretty bad can I just have like a decent color whatever green ew sorry it's just like really gross to look at I don't think there's any color that would be like nice to look at I mean I know what colors would look well we can just do a hex color or well pink and then we can do this and we can do something on the lighter side like that and that'll look somewhat okay okay good enough for me you can just kind of look like that for now or what am I saying I can just use um I can just use the color palettes we have here so we can go with this one maybe this one might look nice let's see yeah that looks okay uh maybe a little darker would be nice like this one yeah okay so this this at least looks looks okay to to stare at while we continue working on the columns so next we need a column within the row so we're going to work in the Chevron button row again and within this text we're going to have a column and we're going to have let's just do this and see what it looks like okay yeah that's exactly what we want we want it to be kind of wide and we want there to be um all right is leading text required it is okay so we want I guess we want strings right we're going to pass strings into here what the [Music] hell all right so we want it to be where if the string doesn't exist then we don't want it to show so uh what's a good name so we have lead text uh probably yeah probably secondary leading text and tertiary I'm glad that we don't have anything past the third because I wouldn't know what to call it or maybe we could just say second instead of secondary like second third second leading text third leading text seems good enough to me and uh we can bring these in make these empty and then we can say uh and we want to say that if second leading text uh is not empty then we show the text and if it is uh can we just leave it like this we can all right yeah yeah okay so we can't leave it like this so honestly what if I do this oh um wait let me fix this okay it still takes up wait why does it do this oh because third leading text is also blank but it also takes up the space if it's empty and we don't want that or else we'll have this ugly looking it'll just look ugly an ugly format so we want it to look like this and that'll help reduce the size and we'll do the same thing with this uh pretty much what we're doing is we're making it so we check if the string is null and if it's null then we don't show it um and instead we uh put an empty box and so an empty box will just have zero pixels and won't show and it'll look like this but as soon as we start to uh what do we do for H where is it man I have to start Xing things out get out oh I see I only uh this is their us username we can do level title oh I guess we're going to have to need uh let's get a chat bot um this is so dumb uh let me sure I guess we'll just have this um composure Commander wait did it say that oh no oh did it say it before I don't know Zenith Zone achiever part of me wants to just leave it like this uh random dot next int maximum is level titles dot uh length [Music] and oh my God this is so disgusting I mean this is what I get for trying to yeah let me uh I'll just do this for now and let me make a proper uh for Loop because the the short versions of them should be only used if the logic is simple and it is no longer simple so drawing a blank is [Applause] [Applause] [Applause] so what is this going to be level title uh random level like that and the last thing is what it's their actual level oh jeez okay um this doesn't make any sense now I think about it there's a level number and it shows a level title I mean it's fine but uh what is this going to be level and we return the fake profiles after that all right that looks a lot cleaner um looks less ugly for sure sure and then what we want to do now is where is get out I don't need any of you oh did I exit out I might have exited out in here no in Social page yeah in Social page we want uh second leading text and we want that to be social profile index dot what is it is it the level Title First it's the level number first oh that's so weird Okay um I might have to re-evaluate this in a second I mean we'll see how it looks right uh level title like that oh dear God okay um hold on uh uh why aren't they centering oh God uh it's because a column focuses on its vertical axis right oh no it's because um yeah no I think that's right it focuses on its vertical axis do we have to do cross AIS alignment maybe like that okay yeah so cross access alignment works you know that's never worked for me in the past before but uh how does that look compared to this I guess there's no level bar I think I wanted to initially have a level bar I feel like the level bar helps make it more interesting but I don't know if it looks weird or if it's even useful it's not really useful to have a bar there right like most people would just care about the level anyway and won't really care about the progression of where they are currently I'm just wondering like psychologically if it makes sense like if it makes people want to study more with people but I guess we can always just add that in if we feel like that's something we want to do but for now we should just worry about the base functionality that we need okay I think this is a good place to stop for now yeah it's probably a good place to stop I'm kind of getting tired and I didn't eat dinner yet if the bar has incentives what's the progression for um the bar is just to like show how far or clo or how close someone is going to be on the next level so maybe it's like to show that hey your friend is almost like level two like you should be working on being on level two also the uh the logic's oh wait the logic's not broken it's just that I need to restart it this should be randomly generated to be different levels and different titles okay yeah okay so I'm glad that it worked this way because we are getting um we're getting a error for overflow uh oh we can use WP WAP would be good for for okay I think I'm crashing my program like 50 times what if we do what if you make a row if we make it [Music] unlimited like going horizontally does that fix it for what for okay everything still looks good and we got rid of the Overflow issue the problem was that we had a margin alignment that split the row in half like it spaced the it spaced the widgets evenly so half of the widget belonged to the leading and half of the widget belong to the trailing elements but I think what we wanted to do was we just wanted things to naturally go to the right or left and then we wanted them to have as much space as they can so okay this is still wrong though or this is still getting issues [Music] for for for for for for I think what I need to do is I need to [Music] um I need to see what the containers look like after we try this out okay this isn't working so let's just reset this back and then we'll do I like how I said I was going to stop and now I'm not stopping we have this container be white at the minimum and then what is the what is being OV exceeded is I guess the is it this okay you're yelling at me you're yelling at me uh I'm just trying to see okay all right that makes it easier to see so this is flexible fit for for for for for okay I think that the flex is proper but for some reason let's see trailing text flexible equals uh let's do green I think this is what's happening I think that the container for the trailing text is taking up more space than it needs to if I'm right then this entire box is going to be green let's see okay apparently it doesn't for so is it that we don't need this looks intuitive uh right now we're dealing with a ren a renderer error it doesn't have a size for for for size missing oh wait maybe that's it does that work if I do main access size in and then what if I I think I broke it come on don't crash nice okay cool cool cool okay this is good this is really really good um the reason why this is good is because we got rid of the we got rid of the borders to expand things but now we can do main axis alignment and we could do space between and then this will separate them back out and this should fix everything all right cool and then we can just remove this and we don't have to worry about expanding at all um okay so the reason why this was a problem in the first place was because I didn't know what I was doing when I was using the expanded function and I just kept on adding it everywhere but it turns out that we just needed to remove all of them and then we just needed to make the row size the minimum amount so that it took the least amount of size so there wasn't any overflow so now we can remove the color here we can remove remove this container we could remove this container and this should all look clean now nice uh the only thing now is this looks a little too close to the yeah all the arrows look kind of too close to the thing all the arrows look too close to the right so uh left top right uh let's do like four Okay cool so that makes it so the padding is a little bit off and that looks a lot better nice okay so we fixed the Overflow the levels look nice there's different titles so I think that's good uh is flutter of framework similar to Ang uh it's similar that it's a framework but it's not similar to angular cuz angular is Javascript and flutter is is technically ran with dart so okay cool um a little rehash on what we did we were working on this mock UI uh originally we only had the username and and we didn't have the profile icon here like we didn't have any icon in this area so uh what we did was we populated this list with uh names levels and also a title and we also populated it with a fake icon so this is just to kind of represent what it looks like and because the icon has a white background we have a brown background for the row but eventually it'll also be white uh just to make it look more aesthetically pleasing so yeah hopefully you guys enjoyed this stream thank you everybody for stopping by I'm going to get some dinner uh but if you guys are new here or you guys are checking out the stream or the video when this goes out for the first time then make sure to subscribe so that you guys can check me out again when I go live or just so you could support me uh I appreciate it thank you all for coming I'll see you guys in the next stream hopefully what's today Tuesday uh hopefully Wednesday hopefully tomorrow uh but I'll see you guys around

Channel: Just Joemer

Views: 496

Keywords: Self improvement, Productivity, joemer ramos, study stream, work stream, justjoemer, code with me, software engineer

Id: ZLbWfGrpIs4

Length: 110min 31sec (6631 seconds)

Published: Wed Apr 24 2024