Software Engineer Coding A Productivity Mobile App in Flutter | Code With Me!

all right hello everybody we are back encoding it's a nice Saturday we'll be going for a couple hours but um we are working on the profile page that shows up for your friends or for accountability Partners however you want to see it um we're still working on a name for what we want the name of the list to be like a friends list or an account accountability partner list but uh yeah we're working on like this profile card that shows up um I did some work offline so it does look nicer than how we left it in the last stream but we're going to try to polish it up work on more of the logic and the buttons that come out of it um but yeah uh I had a few uh debug issues when I started so I just finished cleaning my build and we'll see if that fixes the app launch H it does not I think I might have to no pointer exception I think we're going to have to I mean for one we're going have to look this up is this on flutter oh uh did I add I think I accidentally added a file that I wasn't supposed to add days ago all right so I did add something and there was logic added to my grle file all right let's check this out yeah my grle file uh okay let's uh clean this up and let's open Android Studios and let's have ENT Studios build our grle file for us I'm not exactly sure what's happening but hopefully we could get it to work for e should I do this start the for I also want to upgrade my Android studio version because mine is from 2022 for hey what's up Evan hello hello did it work uh it's been successful you should test the update uh before all right let's try getting the dependencies and trying to build again and seeing if that fixed our build issue all right try again uh question when coding with flutter do does it have to does it have like the Expo go or have to use Android Studio like is there an option uh there is an option to run it off Android Studios specifically the Android app because flutter you you know just like react it it's crossplatform so you can run the Android portion of it um I don't I I think so actually I I don't know what it is I think it might be flutter build but I'm not familiar with the uh command line let me see I got you I did it like one time before so I know you can do it it might be flutter run actually but uh yeah it is flutter run okay yeah so you just do flutter run and that'll be like your Expo go for uh did it break again I think it did dang for for uh you might need to check your device for an authorization dialogue I don't know if that's I don't think that's necessary um um for maybe it's this maybe it's the dependencies that are what else did I add jet brain cotland Android or maybe it's that there's two of them let's see what this is uh watching from Kenya uh welcome what's up Luke Zack uh let's see this keyword tells grle the build system used by flutter that you're including a library this identified here's it's broken down it's an ed X cors cotlin extension I think I might have just been complaining because there was two of them uh let's see if that fixes it because I don't think there's any difference between the two of them okay hopefully I fixed it we see gr task assemble debug God this is so weird for for for I'm so confused I'm so confused did I change something oh I think it is that uh let me try what if I do this what if I remove the uh build Gro changes will that work I might get issues from upgrading to 8.0.1 but we'll see e oh all right I fixed it I just have to delete all the uh plugins that were added for some weird reason I should probably push a change because uh that causes the build to break since we have other people working on this app now okay nice for for for for for all right now that we pushed it let's get back to what we're doing we're working on this card that shows up um it looks really nice I like it a lot this is just generally what the card shows like um we have to work on getting the profile icon to show give me a second just had to R my eye uh have I fixed it yeah there was a problem with my build failure um it turned out to be some Gradle f file changes some things were added automatically I don't know when but uh yeah they weren't working very well uh so I deleted some past changes from a g push and that helped fix it oh what's up MK welcome back welcome back uh yeah long time to see uh I do like my streaming schedule is not the best I'm not going to lie I do try to get on as much as I can but sometimes I play volleyball sometimes I hang out with friends so forgive me for not having a a consistent schedule I try to make sure that I can get back to work as soon as I can but I was try to make sure that I can spend time with uh with the people around me which is also important uh all right so the profile header uh we have a circle Avatar here this is going to be our default and what we want to do now is we want to use this reusable asset image which is going to be where we already used the reusable asset image um it's in our profiles I believe oh no there's no profile um I just realized the social page here it just I'm pretty sure we just generate the image next to it right wait let's see reasonable Chevron row is just the search bar notification B social title row it's going to be here okay and yeah okay so we just have a reusable asset image with a border radius and I don't even know how the Border radius Works border radius oh I guess we could have their profile icon and different okay uh hey what's up Hamid saying hello from moanda welcome that's awesome okay so we I Wonder If there's a reusable asset in image if there's an AET image that isn't going to be a circle oh the notification Bell oh gotcha okay uh okay so in this case what we need to do this is a widget okay so this is a widget so what we need to store in so essentially what I'm thinking is each of these um each of these social profiles has an icon but they're currently not attached so this is just an image to the left which is supposed to represent like a picture of somebody's face and that face is supposed to show in their profile card when we click the um when we click the person's Row in order order to do this uh we need to generate a widget here and we need to generate a widget here but it would be too complicated to store a widget into the uh into the class that represents the profile so for example I believe it's the social profile so in this social profile we could of course just create a widget and have this be like a profile image but the problem with this is this class object we might need to store somewhere like let's say in a database and you can't necessarily I'm I'm sure you can store widget somehow but a widget is a specific class to flutter and it's not a it's not a um what are they called primitive it's not a primitive type like Boolean or integers or strings so instead what we want to store is going to be a path I believe so we can do string uh profile image path and by default we can have uh this profile image pad equal to and we can we can just use this for now and the reason why we do that is because in our reusable oh I have way too many things hold on uh in our reasonable asset image oh what why do we uh hold on okay yeah uh this is a little wrong so we don't want asset image we want a string and we want asset asset image path and this should equal this oh uh here and this and it looks like that so this is by default what it's going to be um so essentially this logic IC will validate to be the same thing as the default path but the idea is that we would pass a um an image path in so for example this would be the path um to fetch the profile image and then there would be like to do and it would be uh link this path to uh database that holds profile image something like this um actually I don't even know if this is true uh actually it is true I was I was thinking like oh somebody I was thinking oh somebody would just have to set their own profile image and for somebody's profile image that could be stored locally but this is a this is like a friends list so the friends list is going to be fetched from a database and the profiles related to each friend is also going to be pulled from the database um and that path should connect here um and eventually there will be logic to fetch the image path through the network and then uh and then we once we grab that once we grab that path we generate an image through that the items in the bar at the bottom are they available with the index or as a separate page items in the bar at the bottom oh here uh are they available with index or as a separate page uh they are technically each one index uh that you can you can access them through an index but they are also separate pages so yeah they're they're their own things it's a navigation bar so I think the navigation bar the default navigation bar has functionality for both to access both however you want to okay [Music] so uh now that we have this path the way we want the logic to look is where's the social page uh so here instead of leading image or I mean we would have reusable asset image and we would have profile or what is it uh us it's asset image path and this would be equal to social profiles index. profile image path or we don't need profile actually this is just I have way too many things open what is this H sure I'll remove this and okay and then the way that this would work is when we show the dialogue when you show the alert dialogue here there's our profile header and the profile header the profile header should should also use the path right so so it should be final string uh uh we have icon here oh icon isn't used we just have it here and it should be icon path what is the point of this what is the point of doing name equals this we should just do name icon default value icon PAAD default value and they're just blank and then that way we say if it's not empty here um it's not empty here and if it is empty then oh wait sorry uh if it's not empty it's this and or if it is empty it's the container with the icon and if it's not empty then it's reusable asset image uh border radius 30 I don't even know border radius 30 is appropriate it should be um I guess height is 60 width is 60 or honestly we should just um uh in icon size is equal to 60 and they should all be icon size oh it needs to be a double for nothing's broken nothing's broken and here we do icon path and we do the same thing we did here social image path all right oh whoops uh we need I image path to be icon path wait did I do this right oh it's because I need to reload the profiles right yeah I need to reload the profiles the profiles Got Loaded in and they don't have an image path uh why are you not fired by Google what's up ysar um I'm not fired because I'm not fired yet I don't know what to tell you I'm I'm questioning it too uh I also made my own video music download application it's took about 10 days and I did most of the integration I'll send a sample image on Discord okay cool it' be nice even if you could examine the image while you see this message yeah sure uh let me check it out uh here we go for anyone who's not in the Discord uh yeah the discord's in the description below so check it out we like we have a group chat here um in the community and yeah it's pretty much like the idea behind it hopefully is that if we we get a bunch of people online in the community then it'll kind of just feel like a messy chaotic group chat where people are just chatting about and hanging out um sometimes you'll see me in the streaming room um just chilling or streaming and concentrating but you guys can always join and hang out um and things like that uh what's up diip hello hello but let me check this out so you paste the video and it's a downloader I like how you used me my my YouTube as an example sample uh yeah looks pretty good it looks like you got a test ad as well so nice nice um not much to go off of but I like the default widgets um I could tell that these are all like default list views and stuff it it seems very like Android themed I like the Navigator bar I like that there's a share button um and a hamburger menu so yeah I think it's looking good so far MK uh thanks for for sharing appreciate it uh let's go making the next Sentry hit thank you thank you um I hope so I hope that this takes off okay so now that we've refreshed it it should work yeah there you go so now we have a profile icon and this also needs to be a container so I think what we need to do need to remove this widget wrap with container and copy and paste this and do something like that and now that it have the proper spacing it'll be around uh the icon size is flat right now this should be a dynamic size I think based on the size of based on the size of the screen but I think this is like good enough just to start we'll start like I think that a lot of this the static variables that make this look good on a simulator um if they look bad on other form factors we'll just uh we'll just deal with it when the time comes we'll uh we'll make a list at one point we'll make a list of all of the all of the instances that are static and then we will make them Dynamic uh let's see do I have here Android Studios Android oh none of these are Android oh here it is man this is so weird even my um 2023 configure check for updates sorry I'm just trying to update my Android Studios real quick does anyone know does Has anyone used Android Studios like a good amount I'm just trying to find out how to how do I upgrade this thing it says Ender Studio configure check for update oh wait that's not right this one okay I guess this is supposed to be here but [Music] because you know I don't even know where this is located did this just download by itself in my scop I'm pretty sure it did yeah I guess it doesn't have my Android studi so maybe what I'll do is all right let's do this um let's install Android Studios and we'll delete the old one because I'm pretty sure that there's I'm suffering performance issues because I don't have the latest Android Studios there's probably some weird things happening in the back so all right while that's happening uh the profile icon should be bigger right like this should be maybe 80 like something oh I just realized I closed I think I closed Android studios in that uh wait I think it closed oh okay I think I crashed it because I started unpacking a new Android Studios what am I trying to do uh well right now I'm just trying to fix the profile icon here to be a little bit bigger um I kind of want it to look like this so the image should be the biggest thing on this profile card uh and it's a little too small right now so I'm going to try increasing the size and see if that helps but uh my app just randomly like it was in debug mode and it stopped running so I don't know if that's because I tried installing uh this I tried installing Android a new Android Studios or not but I'm just trying to relaunch my application right now all right it says that Android Studios was downloaded now we have two versions of Android Studios they look the same to be honest but I would like to know where this one is please don't say the C drive it is in the C drive oh my oh no this thing takes up so much space you know that's the next thing that I want to do the next time that I have um the next time that I build a PC I'm going to make sure that my main Drive is the thing with the biggest storage I made the mistake of making my main drive 250 gigabytes and having a terabyte for my D drive uh use API 33 in emulator or if you have real time bugs like this uh no I don't have real I don't have any bugs it's okay it's just uh yeah no it's all good it's all good I'm not having any issues here hello are we back I clicked the button and uh it freaked out it looks the same man wait wait oh they're the same wait Android Studios has always been in my SE Drive oh I uninstalled it for no reason okay uh or not uninstalled it I'm glad I didn't uninstall it but it's is it's the exact same thing okay uh is it a Trojan exe shortcut with Android Studio no it's not it's not uh why are you using Windows uh like why am I using Windows like why am I not using a Mac or why am I not using a um why am I not using a Linux machine but I'm using Windows because it's just my it's just my computer right now oh okay yeah okay so the Border radius does matter based on the size so we do have to make this more Dynamic than I thought already so I also want to test um here wait if I did this yeah this ends up being too big so let's do this let's make uh two doubles um default icon size and icon size and these can be uh get screen oh how did we do it how did we do it here again we didn't I swear we made the reusable asset image is this really all we profile header social page what did we do for the notification page for oh we use a reusable icon container oh and we use the screen with okay a reusable icon container okay we have to do that [Music] so what do we have here uh the reusable icon container uses get scen width as the size box and it makes it fitted to contain so for example if we do this and we use reusable container usable icon container oh wait this is a circle Avatar wait this is an actual widget we can use background image foreground image who oh there's a child as well all right DP see you thanks for stopping by um I think you updated API 34d if the application does not open if there various problem is Heely that this may be a case if something like this happens I'm already telling you not to waste your time yeah I know um I mean I just updated it so it shouldn't cause a problem I think um it's just installing the API so it's not um it's not updating the uh the version I think well I mean it failed anyway so I guess it's not a big deal it's not a big deal anyway um right now we have an icon container so let's do this is specifically for icons I'm trying to see if we can do this for asset images as well but I guess asset images fill the width and the height and the width of and the height can be oh I see so reusable asset image already based on this will fill so we we can just scale this with get screen height and this is actually get screen get screen uh with and the icon size here is also scalable and we just need to get to have it have a color we need it to have a color final uh and the size the size [Music] of oh uh this needs to be this for for uh the size of the icon and the radius of the Avatar should be related to okay final double ion size size the size even matter not really right I don't think sides matters I think reusable reable I container icon equal icon person and color Let's uh comment this out for now and that screen h for all right is it working now all right so this size is clearly way too big yep um this is why we need to do things dynamically so the icon size or the reasonable icon container is too big is what I'm getting so what is in here width Factor width Factor um equals 0.2 oh wait hold on oh it's because the um no I think the width is fine it's the uh it's the radius of the circle Avatar um so let's do um let's do default icon s error default icon and we'll do 0.3 and get screen wi comma with multiplier like that and now this will be too big and we can do but at least now the sides looks appropriate and we can scale this down to like whatever we need it to be 2 looks pretty good right that's like a good size for the profile icon I like that so we can delete this now um so now the circle Avatar is fine right but now we need to fix because we made the path empty so now if we make the path related to the icon it'll look like that and we need to adjust this as well so um I think everything needs to be relative so the icon size can be that and the Border radius also needs to be equal to something related to screen I think honestly if we just made them all the same thing okay well hold on let's uh let's bring this down uh what's the default the default is one so let's bring it down to like five I mean that's pretty big down to like three that's a pretty good size but does point4 kind of get that across like is that too big maybe 35 that's a little too big right it's a little too big uh let's see 35 yeah 35 looks good um so 35 is good um I think it ends up I think this should be fine with the Border radius doesn't need to be something like the screen width will be large enough and the whole point is that it makes it round so I think we can do that um but just for clarity sake we should do double order radius icon size and and this will be border radius and we'll leave a comment here um uh what's up shalik uh is it possible to persist bottom navigation bar when navigating the different views um yeah I have that now so uh the navigation bar persists um if I had to give you a direct line of code here let me see if I can find it I think it might be the default Behavior yeah I think persisting is is the default Behavior if you wanted to not persist it that's a different question I think persisting is by default okay and then if you um if you want more things to stay there's things like istent Footers but button and things like that but in general being persistent is the natural default yeah I think it's the natural default yeah so that looks pretty good um yeah that looks good and then just to make sure uh let's just make this Brown for a second oh wait uh that's the uh whoops this is the alert dialogue yeah we need to organize this a little bit but if we make this brown okay yeah so the circles look like this they do look pretty nice um okay cool all right I like this this looks good so far uh the thing that we want to do now is uh we want to extract this widget uh um Prof social profile card and then I think what we need to do here is it needs to have a social profile and this needs to be social profile index I wonder if it's needed we don't manipulate the social profile oh we do right because we delete the social Prof um deleting what does deleting do here deleting uh we removed the social profile with index and social profiles index is compared by username so this would be incorrect so so what I'm thinking now is we have a delete function that deletes a profile um by looking through the array and looking for the name but that could be a problem because if we have two Amy or two Davids uh they're like it'll match to the first named like the first name that we find and that can be the wrong version so we need to [Music] actually change logic so there's an ID uh so in ID um I guess by default this do ID is equal to uh Z or No it should be negative one uh which state management do I prefer uh I use change notifiers right now hey what's up onit hello hello welcome welcome for for e uh please say my name I mean don't spam it I I said unit wait let me make sure that I'm not saying anything what's up Tang hello uh yeah what's up anit hello hello what some my pajamas broke I have to throw these out okay so now we have this and we should compare oh no uh compare should be a string yeah we should only use the ideas to find things we're using compare in order to sort them hey what's up kbox hello hello welcome back good to see that everyone's up and uh and being productive always happy to see it for for uh please show your house yeah no all right you got to stop spamming though uh because yeah just like to keep the conversations clean um and no I don't Len I do not um okay so now we have IDs uh for the social model we should honestly just have int um new ID is equal to zero and the ID will be equal to new wait ID is equal to ID I know you want M yeah know I'm good uh make a dating app um I'm not uh probably not I'm not really like a I don't really feel inspired by a dating app if I'm being honest I feel like dating apps don't like it it kind of has a negative connotation right now like people don't really like them or have a negative view of them so yeah I don't really feel like making them or making one it's not really like something that I feel like I resonate with um okay so now we're working on oh we're still working on this okay so social profiles index you need to change this would just be social profile and this is the image pad and it just so happens that the index um well the index gets shifted around honestly so yeah the ID is more important and we want this alert dialogue to do we have a reusable usable alert dialogue and yeah we can just do delete you can delete and give me a second here um let's just do this for now see what it looks like so it looks like this you press delete a new uh notification pops up and we can say yes or no uh right now it just breaks everything uh but we're going to uh right button action put in action and we can move this into here for uh remove that index remove L remove wear yeah we want remove wear um element or uh profile and we want social profile. to be equal to profile ID uh so this removes this removes the social profile that is tied to the current widget and uh it notifies The Listener pops the context let's see if this works a function ah uh whoops we have to restart this uh anit please please man I already oh oh I'm sorry I didn't see your message my bad see this is why you have to not spam it because like I would have seen your message but because you like spammed it I I had to like scroll up uh I don't have a girlfriend uh tell me the reason why we need to use flutter for mobile apps uh you don't need to use anything but um in general flutter and other framework other crossplatform Frameworks make it easier for you to build an app because you don't have to write different uh versions of code for every platform so flutter makes it easy so that if you stick to the native flutter code you can just develop an app and you can ship it out to different platforms which makes it really nice um not at the moment but I'm working on this tic tac toe game and Java my goal is to update it as I continue to learn adding a network for multiplayer and maybe ler boards is what I'm thinking yeah cool Kevo that's awesome uh what I would recommend is if you're making a tic tac toe game and you also want to make it multiplayer you should go into um because doing things by multiplayer can get really complicated with networking so just to test it out and to start you should work with um you should just search up like in like Java local servers and you should try to work around like Java local servers multiplayer tooe and try to implement a multi like a local multiplayer server with like two windows and have the game be updated between the two windows and like each window will represent like a server and a client um or you know a well client to client and you'll have a database in between and uh that could be a nice way to do things in multiplayer without all the complicated logic that goes into actually creating Network requests uh what's up zoh zoh hello hello long time no see oh yeah hold on my throat dying uh I don't remember I don't remember seeing you but I ALS uh zoh but I also am not on very like consistently so forgive me for forgetting uh who you are but I'm glad that you're back thanks for coming by I always appreciate it um yeah hope you enjoy your stay and you're able to be productive along with me um we're having a good time we're being productive uh we're just relaxing on a nice Saturday and overall it's going pretty well today we're making a lot of progress um and doing a lot of fun stuff but yeah uh all right we're going to try this again see if it deletes it it does delete it nice okay cool and it pops both the menus which is very weird uh because it pops the context uh why does it double pop the context oh you know why I think uh here I think the alert dialogue also pops context yeah it does it does it does nice okay so clicking the button in general will pop the uh we'll pop the uh the context here I wonder if we even need this then uh we do okay okay okay so the yeah so so wait so the the pop context that happens with this menu only Pops that and it doesn't pop this so if you try deleting it it won't do anything so we can just do this and it'll pop both of them there you go nice uh did you study uh study for what like study to learn how to code um bro if you know flutter and make apps can you say that you are a software engineer uh kind of uh if you know how to use flutter and you know how to make apps you can call yourself a developer you can call yourself a you can definitely call yourself a developer I feel like to be a software engineer it's like an actual job title so I feel like you get that either when you officially get your your college degree or your University degree um or you get into your job I don't know what officially counts but I think they're both pretty good to understand like there I think both of those give credibility to what it's offer engineer is kind of like if you're a doctor or like if you're studying to be a doctor you're a medical student you're not a doctor yet but you're a doctor like and and in the same way like you can learn how to be a doctor but you won't officially be a doctor until you're done and you get your degree and you get licensed to um to be a doctor so I feel like the licensed version of a software engineer is either finishing college or getting a software engineering job um so uh and you're confused I I understand actually who uh you're confused on who's actually a software engine er uh you don't understand oh I don't understand actually who's a software engineer the term software engineer is really confusing um yeah it I mean I I get where you're coming from there's like a lot of different terms I think software engineering is just like it's just like the official term for what you call your job um yeah so like you know if you call someone a doctor it's because they're a doctor in their job um on kit I I'm confused study for what like did I study in general or like did I study like what's the what's the second part like did I study for what I'm so confused uh even a a did I study did I did you story wait did I study story great wait I'm confused I don't know yeah I don't I don't know what you're asking what I studied for on kit sorry um even if a person knows cc++ he calls himself a software engineer yeah no um if people call themselves a software engineer and they know a language that doesn't make them a software engineer I think what makes them a software engineer is if they have um I think if they have a job I think that's the official ter term because um after you graduate you can say that you have a degree in it but having a degree doesn't always mean that you have the official title oh did I study books oh oh um yes I do study books I read lots of books and I do use them to learn so yeah I use books to study I also use videos on YouTube to learn and things like that all right this one all right this also needs to be broken down a little I think well let me see what is what is this in total 219 to 280 that's like 70 lines uh that seems good enough right I think that's good also should this be screen width or this should be screen height oh this is screen width okay okay so we don't need this we don't need that don't need this don't need that and we can just do this nice okay cool uh what's what's the update about the app You're Building Focus up right uh yes so uh the app I'm making is focus up uh if you want more details in general there's a landing page it's the first link in the description below and so far it's going well we have most of it built out we're finishing up on this is the last um this is the last pieces of UI um for the notific a page and the only thing we have left are the profile cards so this is the profile card uh the profile card and then after we finish the profile card we have this uh this popup to make and this little addition no button at the end and then we're done um and then we move on to iOS uh what is your professor's name please say the truth uh I don't I don't have a professor's name on kit uh I'm I graduated from college already but I I'm saying I study books because I still study even though I graduated the learning doesn't really stop uh are you into Indie hacking thing I mean I guess in a way my code my code now feels like Indie hacking like yeah it feels a little bit like my coding style is a little bit more professional but at the end of the day I'm another developer hacking away um so yeah for okay so this is done uh how does it look let's see show dialogue so show social profile card um Chevron button Rose perfect partner list great um okay also don't we have a reusable container yeah we have a reusable container with screen hey why don't we use that oh it's from the top uh uh why did you only choose software engineering uh in general I feel like the top jobs are software engineering being a lawyer and a doctor um at least in terms of lucrative jobs like that's what's kind of told when talking to like an Asian household so um I chose software engineering because I wasn't very good as a doctor I wasn't very good at like memorizing things so being a doctor was pretty bad for me and I couldn't be a lawyer because I took that reading so I went with engineering because Math and Science were kind of something that I felt more comfortable with when I was growing up uh man I hate this versus code new update where first two line uh position becomes fixed I'm not sure what the problem is but I'm sure you'll get around it I believe that you got this okay so this is done this is done oh well this isn't done yet let me uh we need a page so uh for for for for okay cool uh when you're famous don't forget me I'll try my best if I end up being famous then uh uh uh then I'll try my best but I'll probably remember you the more that you show up I guess okay so I mean in your code look the first two lines are sticky fixed position when you scroll uh they're fixed but I I made them fixed so these two lines are fixed write your name somewhere uh I could write your name somewhere here actually we'll put you we'll put you in the in the list of names onit uh let's put it here this will be the Easter egg all right you ready not in the code base not no in the code base not the app oh uh oh oh this this uh I didn't even notice it um yeah I see it's kind of annoying I can kind of see that check it out on kid you're uh you're you're in the you're in the line of code uh okay okay uh this is good uh the set as primary we don't have any functionality for yet so I don't really know what I had in mind for it but we can come back to it and for now let's uh let's see on top is just primary yeah okay so it's just a button that doesn't do anything right now okay cool this works and everything's good uh it's kind of useful it tells you what function you're working on not going to lie it is annoying yeah I could see both for [Music] uh this is useful kind of tells you which function all right are you planning to learn webd I mean I am a web developer uh can you can I join your Discord yeah of course you could join the Discord the discord's in the description below how do you take a screenshot like that uh you press window shift S window shift s and you can take a screenshot you can drag it or whatever um but yeah I taking a screenshot for a friend okay um we're done with this we're done with the popup uh we need to bring this into to the notification oh that's what you meant onit no no don't don't add me as a friend request just uh join the Discord join the Discord join the Discord like if you have if you're on my Discord then that's good enough because I can't add people because as soon as I start adding a lot of people everyone just starts messaging me in my DMs and it just gets kind of annoying because there's a lot of DMs uh you know web dev already I thought you only knew flutter no I uh I work on um I work I work on I work at Google so like if I go hold on if I go here and I go to this uh yeah you can see like all my changes like this is all public stuff so I make changes all the time I'm a full developer please give me a rooll I promise I never message you please yeah no I'm sorry onit but uh if you're if you join the community and you end up kind of doing a good job of kind of being a good member then I'll think about adding a role but for now uh just I'm happy with just kind of people being in the community uh so you do have a job in Google yeah I do so these are all of my these are all my CLS so I've been here for a while been writing many CLS uh but yeah so if you're ever curious you can always check me out it's all public information um yeah uh I saw you somewhere before while swirling YouTube shorts oh yeah probably I mean I post a lot of stuff so okay so notion let's see where we're at work on notification but being pressed uh settings page signin page is being done so yeah the last thing on the menu is to add a plus button [Music] so let's do it for for uh keep up the great work thanks uh do I use Apple products yes I do I do use Apple products uh do on monkey type uh I wish I could but I can't because my eek key doesn't work sometimes like my keyboard's pretty broken so um yeah uh I do type on a laptop so when I do my iOS project I could do monkey type just remind me which will be like in a week I'll be working on iOS but uh yeah for for is that too big of a button or does that look good I think it looks good it's just that the the black is too pronounced right how does this uh plus button look guys whoa bunch of people hello everybody uh let me say hi to everyone uh what's up John welcome welcome uh you have a Mac I do have a Mac Mac is necessary for iOS apps yes it is John um and yeah we're going to be working I mean we're working in flutter so obviously this is crossplatform we're working on mobile first and we're debugging and developing on Android first only because I have a Windows computer but I I do have a Mac on standby I have the cables to stream uh my laptop so we'll be working on Mac stuff uh soon very soon to work on some iOS bridging uh so stay tuned for that what's up AOL welcome back welcome back uh what's up shub hello hello um more people more money uh have you ever tried Indian food like butter chicken yes I've tried butter chicken uh that's kind of the extent to what I've tried uh butter chicken uh chai tea like I've tried like the basic stuff but I haven't tried I haven't tried um anything anything more than that but I would love to try it uh Indian food's good so yeah I like a lot of things I don't really um not like certain things what do you guys think of this plus button it's good right um I wonder if there's a I mean we could do a gesture detection let me see button is there like oh there's an icon button let me see what this looks like icon Dot oh it's a widget what the heck oh that looks better no and it has like a button animation I kind of like this uh icon button let's do a background color let's see there's highlights splash yeah it'd be nice if there's a splash so oh I think it's just color um let's make it white oh no oh that just makes the color itself white maybe that's why I never maybe I found an icon button and that's why I didn't use it what if I put it in a container well this uh what is look the way I wanted to oh it's a box it's a box but it gets clicked and it has a highlight that's circular with a splash radius I'm wonder why there's background color for this oh it's in button style maybe um let's okay there you go yeah this looks better um I like the way the button is it looks a lot cleaner and it has a click to it so yeah let's ditch and it also comes with its own inset um or like its own margin so we'll just delete this why does it still show wait did I break something oh I deleted the the widget but that only deletes the container so we can just delete this and not make it as complicated um nice okay this looks good I like that it's responsive as well it looks very nice uh all right you're heading out see Z thank you for coming I appreciate it I'm sorry if I'm not saying your name right but I appreciate you coming by let see you around um we do need this to be in its own row and we need this uh alignment to be the end and we also need is there a margin minimum size fixed size maximum size icon size padding there's nothing for margins there is a slight margin already but it's not big enough so I guess we'll I guess we still need a container anyway that's not enough how do we have it here it is flushed in so I guess we would have this as um Edge insets symmetric uh vertical and let's do eight that's a good amount of space right I think so like I would want it around here so what's this how do I do this again I forgot how to how to see the I don't know why it's like freaking out okay think I saw 27 uh it is 27 okay so 27 is the distance uh so like that's like 12 yeah that's not that far off 12 on each side vertical uh maybe adding a label besides the icon representing a partner wrapped in a button I don't know I can't imagine adding a label beside the icon representing a partner wrapping I mean that's what this is that's what this uh this list is they're a bunch of these are a bunch of buttons with labels and icons wrapped in together uh hold on I got a comment let me see uh I mean the button below it says add a partner sort of oh yeah I could do that but I feel like it might be a little B um like I don't want it to be so pronounced like I want the list to be the main thing but I feel like if there's a button here it'll always just kind of be at the bottom and it'll kind of be annoying another thing that we can do is or that I thought about is we could make this entire section scrollable and then at the end there's a plus button or there's a add friend button but I thought that would be annoying because if someone has like f like 500 friends they would have to scroll all the way to the bottom just to add a friend uh one question did you pay for the app design in figma uh no I did all of this I did all of this by myself so this is like the first iteration uh they're called wireframes so you kind of just make black and white uh UI mock of how you want everything to look and then I did a second revision with color and I started adding different color palettes which I decided to work on here um lots of neutral colors lots of green and brown that's kind of like my main colors here trying to represent like a like a school classroom with like the wood and also trying to make things kind of look like a uh trying to make things look like a chalkboard almost so uh for example like if I show you this delete button it kind of looks like a chalkboard or like a whiteboard you know like this is the board this is the the wooden uh place where you put the chalk in so yeah uh do you know total gaming I don't know total gaming I'm also getting pretty tired but we keep moving on uh okay and then the next thing to do here show dialogue uh what do we want to show here okay we want it to look like this all right this is going to be a really cool this is going to be really cool I think in general so we're going to return [Music] reusable do we want a reusable alert dialogue no right yeah this is going to be a completely different menu so uh let's see alert dialogue just to start um content text oh whoops what is breaking here hello oh here there you go uh so it looks like that H all right we're gonna have a little bit of work to do how did we do it here is this also the social page it is oh this this area is all right we might need to move some things out uh hold on because this saw is getting a little too big so this is the best part about removing widgets import package the best part about extracting widgets is it's pretty seamless and it's pretty seamless and it also and it also makes it easy to uh so it makes it pretty easy to extract things and uh it's easy to just kind of move things so that everything can kind of be in their own place so yeah this social card was actually kind of long and it deserves to have its own file so we took it out uh the next thing to do honestly even the um the title row by itself should be its own thing but it's okay we'll leave it in for now uh so the profile card it's nice because now you can have it side by side and let's see what we do here we do a background color rounded rectangle border okay we're going to need to do this for sure oh wait this is the actual border wait oh no we don't need that I mean yeah we'll think about it but I don't think I need it right now h I think we are going to need it to some degree like I think it needs to I think the alert dialogue still needs to have a style or a shape so yes to the shape rounded borders um no color and also we need to remove all these useless comments that don't really do anything what if I make this one does this uh make it more flat it does okay so yeah border radius uh looks like that um um and then we have a bunch of stuff so title text and this is going to say invite partners and for let's look for something with alignment okay Tex style it doesn't do that for me text Direction text align right Center and then for for that's pretty good right on one line uh I'm working on a mobile design 2 on figma because I'm going to propose it to oh okay yeah I mean whenever you want to propose it go for it and uh put it in the Discord and I'll review it and everything like that uh all right what what we doing all right this needs to be a [Music] column uh that's fine at least it's centered and we're going to do main access SI main AIS Min and that's going to bring it back to being small and centered and we're going to just copy this it feels so nice not having to go through uiux review and I could just like write whatever I want for um does it need to be I think the container I think the container needs to yeah I think the container just needs to be smaller right so this needs a container and the margins need to be coming from horizontal we'll do 24 see what that looks like that looks better right uh how does that look compared to this a little more right uh let's do 20 see if that wraps it 24 okay 30 no okay 50 works uh because this is the case we should probably make this based on screen width okay 0.1 Works uh cool and then after this we have an reusable usable I container yeah us icon container all right we're looking for a laptop all right Which laptop should we use guys anyone have a preference which one did we have here do we want it to be round round looks nice I kind of like all right we're going to have to go to all right let's see what we got here anything separated not really so I guess the closest thing would be a Mac Mac looks nice yeah I'll do Mac it does seem a little flat but uh that's okay maybe the screen share one flutter what icons are good to show for being productive check mark light bulb chart graph for um oh the people one is actually nice I like the people one oh these are all good oh wait I think I'm cooking oh this is also good okay we found a better version of what we should put I like the people I also like the outline like one outlined one not yeah let's do this one I like this one a lot I don't like it anymore wait is this good guys hey what's up gaming Hub hello uh I like the people it just seems like maybe the the outline is like a little too distinct oh that one looks gross as well um maybe something like this e okay I think I think this one would be good no that looks like chest pieces uh what am I building uh in the description below the first link goes to a landing page and you can see uh the app that I'm building so I'm building an app I think we'll do this one and I think that the key is to make it a little smaller like just a little smaller yeah that looks so much nicer also I think that point3 might be okay it's just that the uh it's just that h yeah actually that looks better now it looked like it wasn't good but now it looks good um it just needed some space to breathe welcome back I'm K uh am I a fan of Nardo uh a little bit I like it I like the show but there's so many fillers I couldn't watch it like I couldn't stay watching it um I gave up I'm not going to lie all right and then the last thing we have here is going to be this really cool button it's going to be a button I don't even know if it's possible to have a button like this but we'll see so for for uh I don't have a sister no for for for I'm wondering if this button is okay probably not e for for for for for for for for for for for for for for for for okay okay okay so it's not that it wasn't expanded it was that or it's not that it needed to be wrapped it's just that for for no we don't even need this to be a text field we can just have this be a container for for uh I think some people in the chat don't know the context of the stream uh yeah I mean we're working on an app that's the the gist of it I mean it's in my title I think making a productivity mobile app you can't finish this project uh I guess I mean it's whatever if I can't finish it I can't finish it for e for for for for e for for for for for for for for for uh what's up Eep Patriots can you just share a brief of the puzzle SL challenge you're trying to solve that way we can learn something and approach when you fix it if possible and whenever you feel comfortable um sure uh so right now I am working on replicating some UI mocks so I'm working on an app and we're currently working on this UI mock here that looks like this and wait did I close it I think I accidentally closed it oh but I'm trying to replicate this UI mock essentially and we're working on uh is this bad color buffer handle for for for I got your point Sorry for the destruction I will follow along to design against your code thank you for your time no no it's no problem I don't think it caused that I think I just accidentally hit a button or something so I think we want the text button padding to also be we want padding to also be zero padding Edge inets and then we want this color row to have a slight margin um literally like four and we want this border radius uh to be border radius. circular and it should be the same as this so let's um double for for for Lether little thinner for for e for o for that looks pretty good for for there you go that looks a lot better um and there should be three yeah I like that better and uh e for for for I don't know how well this is going to hold up oh you know what it is I think I just need to make this Center there you go done um and we can make this four to like shrink it even more and you know what's happening the margin horizontal is Shifting it a little bit so we want this to only be only and we want this to be left and we want this I think to be padding as well we don't want this to be oh no we do want it to be margin I think that's good right oh it is a little wider so let's do this yeah that looks better I like that and that's what it looks like and the ontap functionality is here so we want this where um for for for for for for for for um sorry guys I didn't check uh the chat for a little bit I'm also developing an Android app with Firebase and I cannot upload data to uh cannot upload data to realtime database I mean the log shows no error but I have waited for an hour my database is still empty any solution um I'm going to be working in Firebase in a little bit like I'll be uh like eventually I'll be working on Firebase and I'll be able to help out with that but for now I would say that if that's the case it sounds like you're not sending your HTTP requests uh properly so you might want to go to postman and uh like Po the website like just search up Postman and you can send like a test HTTP request and see if you're properly sending it out there and then uh if you are sending it out then maybe there's something with Firebase authentication that's not coming back and you can maybe do like an asynchronous function I don't know how networking methods work but I would assume that you can gather the response from the HTTP request and you can log that in your terminal to see if you're getting any error message back so yeah for for for for for for for for for for for for for for for for for okay nice all right you're able to do this um all right I think that'll be good enough uh we're going to take we're going to take a break um maybe code later in the day but this is a good stream we got a good amount done thank you everybody for joining hopefully you guys learn something new today we worked on finishing this uh profile card and also uh the delete button so now we can properly delete profiles or friends um and we can remove it from the list so if we want to remove Alice we can just go and remove Alice and she's gone so we did that we also added a invite button that looks like this and we also added a button that copies uh this to the pasteboard which we haven't uh done yet but we will write that in our notes so uh Slash too uh so copy button copies stram to P um get copy link uh create mock generated copy link um that is attached to a social profile and social model yeah all right so copy button uh social model and I think that's pretty much it uh populate mock generated copy link and button nice okay so that's pretty much it um oh and uh change color of notification Bell yeah that's pretty much it uh I think this is okay for now um yeah I think that's good enough for now okay thank you guys for joining I appreciate it um if you haven't subscribed yet then make sure to subscribe so that you guys can get notifications for the next time that I decide to stream and hopefully you guys are productive I'll see you guys in the next uh stream or in the next video uh but thank you guys for joining

Channel: Just Joemer

Views: 629

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

Id: ruI9GbFEJcc

Length: 230min 3sec (13803 seconds)

Published: Sat May 04 2024