👨🏽‍💻 Let's clone a dribbble design using FLUTTER ♡

all right today i'm gonna go on dribble and i'm gonna look for a nice looking design and let's clone it using flutter so i'm just looking through dribble here and let's pick one this one looks nice and clean it's like a mental health app and let's try to make this first page this looks nice and simple all right cool so let's just go to my terminal i'm going to create a new file in my projects so flutter create let's call this mental health app [Music] looks like i have a new version of flutter but i'm not going to upgrade that yet okay so let's go to visual studio code [Music] open this i have so many apps what did we call it mental health app cool and let's just open this ios simulator and put this [Music] and let's run this cool so while that's loading [Music] looks like we're going to have a sort of blue background on the top we have a search bar and we have these how do you feel icons that we can press and then just a vertical list of different exercises we can do and we have this little bottom navigation bar okay let's give this a go so here is our blank app i'm just going to delete this and start everything from scratch and let's put this in a new folder called pages home page dot dot oops material dot dot and this one is going to be a state full widget and i feel like i haven't created one of these uis in a while okay now if i save this it should just be a blank app now in the background so let's just try to match what they did right so let's make it blue but maybe a bit darker yeah maybe like a 800 cool and then yeah let's just let you start doing this right so let's have a big column and i'm going to have a row and let's comment a little plan here so um at the top we have hi jared and then you got the notification so let's just start with this right so text widget i'm going to say hi jared and you can see it's scratched up there so i'm going to wrap my body in a widget called save area cool and let's change this style make the color white make the font size bigger and make the font weight bold okay good and also this column let's wrap in a padding of 25. there it is and what else so we've got high jared and then next to it we have a little notification bell so let's get an icon notification bell yep let's just go for this one and this one is also black so let's just change this to white and i want it on the end here so let's go to this row and go main access alignment and space no we're going to go end whoops um space between and this one i want to have a little container around this so let's wrap it with a widget and in the decoration the color let's make it blue but let's make it a bit lighter than our background so you can see it's got a little box there let's give it some padding 16. it's a bit too much let's say 12 and of course we have to curve these corners right all right sick cool and then below this we should have a little date right so how am i going to do this so let's wrap this text widget in a column and i'm going to have a text widget and for now let's just put in a fixed string so just 23rd of jan um 221 okay let's make this color not white let's make it blue but a very light blue and also because this in a column is kind of aligned to the center so let's change this cross access alignment to be at the start sweet and i want a bit of space between them so let's say eight cool okay so so far so good now i did that bit so let's add a search bar and then these icons here so right now we have this row um and so i'm just going to say like greetings row so that below this i can put a search bar so i'm going to keep adding comments so that i can read my code easily okay so container and then child and then row first of all i want to put in a search icon and then next to that i want to say search in the decoration let's say box decoration and same thing for the color we want to make it blue but just slightly lighter than the actual background okay it's looking good so far add some padding here and let's make this border radius 12 what did i make it for the other one i made it 12 as well okay cool and i want some space between that so let's just add a sized box height of 20 and we need a size box between the rare sized box maybe five cool looking good so far maybe we can make this size box 25 now let's copy this sized box and have another sized box and below this we want to have the how do you feel sorry text i'm actually going to come up here and copy this text widget because it's quite similar how do you feel and the size let's make it like 22. actually we can make it 18 and also i want this to be aligned to the left so let's wrap this in a row and i want to have an icon more yep this one cool and there it is but it should be white and also main access alignment space between hell yeah okay and then below this so we got up to here let's add these icons so how do you feel bad fine well excellent and looks like we can just use some emoticons for that so let's add another sized box below this oops and this is going to be what should we call this um four different faces so there's going to be a row again and let's put in some comments yeah so badly i feel fine i feel well and i feel excellent cool and let's come up here and grab that bell now since we're gonna write this four times i'm actually going to create a new folder called utilities and what should i call this emoticon base dot dot because if we're going to re repeat a lot of code then this is what we should this is what we should do so american face i'm just going to copy this one in and instead of this icon let's put a text widget in and just for now let's just see in the emojis let's just see what happens if i put this in emergency calm face yay okay there it is and this chart this um child let's enter it i don't think that did anything and we want to style this and just change the size to be a bit bigger and this one we don't want to just hard code this so let's come up here and say final string because it's a string uh emoticon face and then here say this dot miticon face and let's require it so instead of hard coding this just whatever the american faces american face so this is where so the first one's bad right like i'm feeling bad let's look for a sad face and also let's put this in a column so that beneath this we can say bad like that but we want to make this white and also just give it a bit of space eight let's copy this and do fine i should be a moderate smile so let's just go with this one i'm doing well a bit of a bigger smile and then i'm doing excellent cool there it is now we want to space this properly cool okay so far so good so now if we look at this we want this section right so what i'm gonna do is below this row let's put a container and let's call it a white container and just expand this okay so it looks like because of because of our padding we had a safe area so it's kind of contributing to this bit let's just see if i put a bottom navigation bar i need to put a bottom navbar item okay so it's like that now i'm actually going to get rid of this safe area because i think that's why we have this little gap oh actually we don't need to do that looks like i put the padding on all so let's just go symmetric horizontal okay so that takes care of that bit but i do want this to be filled up with the white space so what i'm gonna do is let's just get rid of this padding and then this stuff at the top up until here wrap this in a column and so we have a column inside of a column and then this guy can have a padding okay looking good and let's put a size box there cool and then we can wrap this guy and then clip erect okay so i don't want that on the bottom i only want it on the top okay what if i get rid of this how do i get this curve only on the top and not the bottom maybe we have to use a stack oh you know what just for now we can just get rid of the clip i wrecked and we'll just do this and then in the child let's put another column text widget saying exercise man how do you spell exercise exercises but you should have this column in a center widget and wrap this in a row [Music] so that we can have that more icon icon icons more let's get it and then main axis alignment space between but we want to have some padding here right so padding edge and sets all 25 and let's make this exercise a bit more bold and bigger i want weight want weight is bold size is 20 20. cool cool cool is that even how you spell exercise i think we don't need a c in there okay now okay now we want these little um exercises to do so we're going to use a list view since this should be scrollable so this is our exercise heading and then below this we want to have a list view of exercises and again we want to create this in a new file since we're going to repeat a lot of things but just for now let's just create it here real quick so container and then in the child of this container you could use a list tile actually and then there's a leading which you can say icon icons let's go with a heart but this container decoration decoration box decoration color and also just change the border radius to be 16. just so we can see this a bit better let's change this a bit darker gray cool and let's put a size box between this so 20. and then what do we have title is this a title is this a string no it's just a widget okay so text widget for now let's just say speaking skills wait i thought this was a mental health app why do they have speaking skills and speaking skills reading skills okay i get i guess there's like a category so you've got relationships career education stuff like that radio alright so let's just go with this so speaking skills is there a sub oh there is subtitle sick um because we want to say something like 15 x sizes oh cool it already makes it smaller and stuff like that cool but i don't like more i don't like how that's up there like that hmm yeah you know what screw this list heil i'm going to create my own bro icon icons favorite and then let's give some padding and then this is where i'm going to put a column because i want the title and then under that i want a subtitle okay so this one was speaking speaking skills and then beneath this it's another text widget but i want to say something like 16 exercises cool now we're going to need some space between the icon so something like this maybe let's go with 12 and then you see how this is aligned so i want it to be aligned to the start gang gang let's make this it is 14 by default right so let's make this 18. too big 16. cool and i think we should actually make this also bold leave it as 14 but then make the color gray yeah like that and between this we can put in a size box just a small one and this looks pretty good so far cool and then at the end of this row so i've got the column here and at the end of the row we want the more icon as well so icon icons more cool now the way you want to align this so just to show you if i go to this um if i go to this row here right oh wait that's this one so if i go to this row a nice main axis alignment space between so i want to push this to the end right but because i have a lot of other elements in there it kind of brings these guys as well so i don't want that to happen so what you're going to do is wrap everything but that icon in a row okay and then just the overall row so right now nothing should be changed but the overall row we can say space between cool and so this i grouped it together so that we can put a space between these two guys hell yeah okay now just to make this kind of similar looking in terms of the decoration let's just put some boxes around these icons right so where is our heart yeah so you want to wrap this around in a column or sorry in a container padding just to give some space 16 color orange and then wrap this in a clip erect because we can just change this border radius circular 12 which means we can change this to be white sick all right now again we want to have a lot more under these right so what we're going to do is let's copy this container right and come to the utilities create a new file and let's call this exercise tile exercise tile and replace this container with what we had before which means we can come back to the home page and now we can say so now we can actually use a list view here oops children exercise tile in this list view we need to fill up the rest of the space cool so nothing changed let's see if we can add a couple more hey there it is which now reminds us that we should put some padding but in this case i want it only on the bottom cool and also we can now think about all right well the tile is built but what do we want to vary between the tiles so what are the different variables so first of all is the icon so let's just say icon and then final string the exercise name final string um number of exercises okay so those are the three things this dot icon this dot exercise name this dot number of exercises and let's require each of these guys right so this icon come over here instead of it being an icon favorite just whatever icon that we pass through exercise name right we don't want to hard code speaking skills and then number of exercises this one actually we can just change it to an integer um makes more sense number of exercises to string that cool so if i come back here now we can specify here to be um icons dot favorite the exercise name is speaking skills and then the number of exercises just put in a number cool and so we can do the same thing with some of these other ones right but let's change up this icon let's go reading skills let's change it to 8. and then the last one we'll say writing skills cool so it looks like it's all changed and the last thing is actually the color we didn't we didn't make it a variable so let's say final color required this dot color and this is orange so just whatever the color is colors.blue or maybe green colors dot i don't know pink and there it is now in just the bottom navigation bar let's say like message and person cool so each of these icons we can you can change it to whatever you want i just used the default icons but that looks pretty close now one thing is i do need to re i do need to know how to do this curve but only for the top part that's something that we can let me know if you know how to do that but yeah cool so that's basically it i love cleaning dribble designs it's really useful especially for anyone listening if you want to improve your coding skills and ui skills you can obviously work your butt off to make one ui but i really recommend what we did here where it's like you look at a dribble design and then just try to make it up on the spot from scratch and so hopefully that was helpful and let me know if you like this kind of casual style of video um yeah i just did this in one sitting usually when i make a tutorial it takes me a lot of time to you know make it look nice and put it all together but yeah let me know if you like this kind of casual thing and also if you have a particular design from dribble or anywhere else that you want me to clone uh put it in the comments below okay and then maybe if i like it i'll also clone that design as well but yeah thanks for watching and i'll catch you in the next one peace

Channel: Mitch Koko

Views: 157,727

Keywords:

Id: eegl7of4g-o

Length: 38min 40sec (2320 seconds)

Published: Fri Apr 01 2022