Flutter UI - Talent Hire

puttu guys welcome back to another video and in this video this video is once again going to be a you a challenge in this video let's try to recreate you a screen a simple UI screen this is a little bit more complicated than what we've seen so far but it's pretty much simple ok you know that you know a lot about how to handle widgets and how to design nice layouts this will be a bit easier for you if you had already seen my videos anyway these screens were created by a designer called Michael Rosie's ik Mike it's Michael Rosie I think Michael Dragic anyway thanks to him and there are two screens available on this single image right there are two screens available on single image this looks like a messenger kind of chat kind of screen whereas this looks like a screen wherein you would hire a set of coaches right yeah if there's my coach's view positions and list of coaches that are available for hire and you also have something like small box that shows you credits or something like that and you can obviously buy you something it's a button here and you have a title here and some components on the app bar as well so this is the screen that will be recreating trying to recreate in this particular video guys so as usual let's apply the one three six nine rule first on the screen for those who are watching this video I mean watching one of my UA videos for the first time the one three six nine rule is a rule that I generally use to engineer user interfaces from design screens well now we're at the same screen is given to you from the u18 the you a team in your company or any company for that matter will have a artist and the UI designer the artist is the one that designs the feel of the application along with a mix of colors and everything and the UI designer will exactly try to recreate whatever the artist has given I mean whatever the input here is is from the artist and then he will try to sketch out the sketch of that screen in Photoshop or some other designing too and he'll send you the screen images which you will be then engineering which will be then trying to program and create in your mobile on your mobile device that's usually the flow okay and flow in which you way screens are designed for the mobile application so the one three six name rule is nothing but a simple rule that I learned from someone long back which I use to dissect my screens and then try to figure glue them back together to bring a complete screen applying that rule here this will be one this entire screen will be one right and then this will be 1 2 and this all these 4 cards will be 3 right 1 2 3 3 parts and after that if I want to break this down into 6 this is 1 this is 2 this is 3 this is 4 this is 5 and this is 6 right you get it right 1 2 3 4 5 & 6 so if I want to break this down into 9 1 2 3 4 5 & 6 & 7 8 & 9 right inside this cards also we can break this design simple design right so now that we have broken down this into 9 different segments all we just need to do is design them out write code for them piece by piece and then try to glue them back together as a single screen so we will start from the head we will start from the one that is this part this part contains an app bar which has two buttons one on the left side on one on the right side and a small logo at the middle and title that says get coaching first of all the UI used in this particular screen is called volte rounded or something like that that I mean not you a the font used in this particular screen is called volte rounded okay that skrill font is obviously a bit costly it's like around 50 dollars or something so what I'll do is I'll use my famous montserrat font here as well which is a free font obviously too create the all the text inside this particular screen okay so let's get started guys that's too much of talk already let's start with the app bar you can either use an app bar or we can simply move here I'll use an app bar okay I'll get into we have an app part here let's just build up on this so title new locker logo colors colors green and size will be some 25 I will give you 25 see if that fits and then after that elevation will be zero point zero obviously there is no shadow here right no shadow should be that elevation zero point zero and Center title if I do this as true then the logo will be in the center and leading I will need to give background color as well by default the screen of flutter will be this color okay this color you can see this rate this is pure weight and this is somewhat too it kind of dirty white or something like that so this is this is the default color that's provided to us whenever we scaffold out a blank application using flutter so I just need to change this to white as well right so I will give background color color start white fine and I'll do leading icon important sorry icon button on first I call icon icon start arrow back Costantini ahead or back close this and then there you do color color start gray fine one is done and the next one is I need another button on this side as well right this looks like a more options button but there are only two lines I'll use a more often spot on yourself again slightly change it right so I have this icon button Tyler actions once again another icon button but this time it will be on first sorry and icon will be icon I on Start menu color start gray here as well fine I will say this now I have the app we're ready let's run this and see what happens all right now you can see that our app bar is nice right and you can see I don't know if you can see that in this video but there is a small difference in the color as well this is white and this is some kind of like a dirty white or something like that and we have a logo with the middle more options in the back button the next thing we will do is we'll bring in this title as well this title is somewhat below this and somewhat about this right we'll bring in its bold right and smooth so I can't get that exact font that exact font looks really nice but I will try to use just what I have and then make it look good and the body I'll use a column or maybe I'll use a ListView stop this first wait why am i using a list view here since there are a set of cards here right so if I use a list view then I need to worry I mean I need no need to worry about these cards overflowing this screen space right list you contains a scroll by default you can scroll through a list by default right but if the column that's not the case the column should fit within the entire viewport so it won't allow you to overflow it won't allow the widgets to overflow the screen real estate so that's the reason why I'm using a ListView ListView can have a set of children right what were we we were doing the get coaching thing so shrink-wrap true and children stack I'll use a stack as usual children by now viewers of this channel would be familiar with stack I guess children and use a container it will be some 0 and color will be obviously color stock white so that it matches with the app work so that the app bar and the container look Cindy looks at the looks same the background color should look same right after the close wait I will give child text what was that get coaching with coaching and [Music] style text stale text a would-be font family montserrat as usual font size will be some 20 okay yeah this is 10 for those who don't know I already have an assets directory and it contains all my phones and not only that I haven't gone ahead and added those phones in this I also have a quicksand phone that I will be using later on for the bold stuff so I had these two phones and I have included them in the pub spec Tamil as well so kindly do that before you don't need to search for these phones just go to my github repo I will post this entire code on github so just go the app give a star to that repo kindly give a star that repo and then you can simply download this font files from the repository itself anyway let's continue with what we were doing I'll save this and run this app again alright thing is just fine except the fact that it has moved a little bit to the left side right it's aligned to the left probably we should have I'll show you another way to align stuff guys many people just stick with the main axis alignment and the cross axis alignment right that is another way to align stuff just do [Music] alignment I mean and 0.0 is x-axis center right so if this is a country if this is the x axis this is zero point zero right so y axis I will just give it as I don't know - point zero or something fine you can see the difference no right this has now moved to the center this is zero point zero and minus point four zero will be somewhat above the center right you get where I'm going with this right this is fine it has no mood to exactly where we want it to be right zero point zero is exactly at the center and minus four point zero is somewhat close to the center why did I use somewhat close to the center because in the screen if you notice this cuts the this box component cuts the container as well this component is placed on the container overlaid on the container that's the whole point why I used to stack in the first place right so now we have done the first part the one off our one three six nine is 10 the second thing we need to do is this one to two contains two four and five right as per our breakdown this contains two four and five now I can't figure out how to create this hot skies I mean Airy try it for a long time but then I gave up so I'm really sorry about that but excluding this hats we will just do this text and this button okay so what I will do is you need to cut through this wreck first I will stop this alright so the next contact the next widget should be a container inside the stack it should be a container as well and inside this container will have a margin margin edge insets dot specific Martin from left top right in the bottom 25.0 and top will be 90 point zero since I need to bring that a bit down right will be again 25.0 the padding-bottom a need no need any padding so I will just kill zero and obviously I need a decoration since that box needs to be white as well if you notice see it is white as well it's even a bit whiter than this then this weight I would say but we will just use the same weight we can't you know yeah we'll use the same weight for no box decoration color color start weight fine and border-radius border-radius start circular 20.0 why did i do this since the border is rounded for this box right so I will just use a simple border radius then I'll use a box shadow box shadow this is not needed I think is there a box shadow yeah that is one rate it's not that much prominent but it is there so box shadow I will just kill box shadow and blur radius I'll give a small value and color I'll just kill color start gray fine now that will be a box shadow as well inside that I need to specify two different stuff right oneness after the box decoration inside that I need to specify two different stuff one lesser text you have an the number and then another one is a button that has it's more of like a more like a colored container right somewhat green it's it's green with opacity and the text on it is green as well so we will try to do this so what I can do in the simple way is to use a child row row inside the row I'll simply specify cause axis alignment cross axis alignment or Center so that these two will be the cross axis of those two widgets centers would be aligned and the next thing we'll do is children row will obviously have a couple of children children once again I'll use a stack why am I using a stack here since you have and two more chicks have very little space between them right if I use two separate containers then those containers will come along with padding which means that it will lead to more complications that's exactly what I'm trying to say here I talked about this already in my previous UAH design video as well so yeah children container I'll use a container what's happening with my intelligence something's not working at all padding edge insets dot from left top right and bottom again it's 25.0 top it's simply thinking it'll give twenty three thousand zero this is different right this is the spacing between these two whereas the previous one was the spacing between these two the app bar and the top of this container this spacing whereas this spacing is between the context it is inside the container this row is entirely inside this container so this specifies a spacing between these two right will be I don't know 5.0 or something will give a 5.0 bottom again will be if I point you bottom is that too much padding no rate and then we have a nice-looking container and specified child inside that text is it full caps it's full caps you have style text style see my intelligence is too slow mangle hopped-up itself looks like - so it's too slow color colors start gray and font-family quick sand and font weight font font size 14-point some random font size lq if it's too small i will just you know change it later on and then i just need an exactly similar container but the only difference would be its for a number so I'll simply do copy this container and inside the stack itself and specify this only difference is padding and change it I think this will be 40 or something since I need to place this number below this text right so if the text starts at 425 from the top then if I give 40 then it will be below that particular text right and all this will be the same the only differences this will be bigger and this will be in black so I need to give up here what's happening black and here it should be fun it should be somewhere around 40 or something like that so that it's really big and yeah that's it and save this and run this and see what happens all right huh okay I didn't I didn't change the text rate it'll just give it as 2/6 fine right you know have this nice-looking you haven't - no - 6 here just like we had on this particular screen maybe we should increase the bottom padding a bit right this is the last element so he'll just you know Gordon increased if we give you the bottom padding here you understand why I'm doing this here rate rather than doing it here if I give it here it will increase the space between these two wait it will increase the space between you have and this number lettuce if I give it here it will increase the space between this number and the edge of this container so that's the reason why I am increasing here so if I say this it will automatically hot reload and sync the files which is taking too much time obviously now you can see the difference right it has a lot of space anyway if you are using a different font kindly adjust the font size in such a way that it lines up with E and Y since that's exactly what they have done here and as I said before I don't know how to you know like create and make use of this hard sky so I already tried it a couple of times but I couldn't get it right so if you could get it right and obviously chest you let's just try and build this v component that as per our design we buy more button so in order to do that that will simply be the next child of tiro right after the stack stack was the first child of the row and after the stack I need to simply give a sized box maybe since that is where there was a lot of I mean there was ample space between this component and this component right so I will just give a sized box hi what is it height its width width mm 100 maybe and after oils and after the sighs box I just need to give a container in the container I'll specify a specific height for that since the this this is what's going to be our button height with one two five you call zero and the decoration will be box decoration color will be color start green accent it will just specify a very light accent 100 mm and then I'll just give a border radius of the border radius dot circular most small specific border radius since the border radius was not that much rounded rate it's still a rectangular button but they just have somewhat rounded that's it then we need to simply specify a child blue box decorations here child center child text what was said by more right by or is it full caps by dream and yeah that's it that's it right we just have a container with the decoration that gives the color for that and also roams of the edges and then a scree I mean a text in the middle of it I'll save this and run this now alright button looks very good right the thing is it is - breathing the button here wasn't that much screen it was simply shade rate whereas our button looks a lot more green than it should so what I'll do is after the screen accent I'll add with opacity I think to pay ACP and I will give a specific value maybe point five okay so now we can control the opacity of this as well ah yeah now this screen is somewhat similar to the one available here right they weren't available here alright now this part is done as well we have done this part as well it looked it doesn't look that good on an emulator but if you try it out on your mobile device it would look really cool guys so yeah at the end of this entire video we will see how it looks on our mobile device as well anyway let's move on with the video we'll all right now we'll do this my coaches and the view pass sessions and then we will simply proceed on with creating those cards as well so after this first I will stop this and then this is the stack read the original stack that we made now that we have those two we made this stack if you remember we made this stack since we wanted to overlay this entire box on top of this particular kind this container should be on this particular container so thats the purpose why we used a stack to create this center interface now that our purpose is done we can simply come out of the stack and then and simply add all these elements to thee all these other elements to the ListView directly right so what I'll lose and get out of this stack and then give a comma here this is the ListView children I will add a sized box sized box height 40 okay and then container will give it up adding edge in sets against sorry edge in sets only 25.0 right 25.0 cool now that I have given a couple of padding here as well I'll do a child go and inside this sailor main access Elaine sorry in excess element main axis alignment dot space between space between is something like it will spread out the space between the children of that particular row if there are two children then the entire row will be having one child at this end one sale at this end and this place will be in between those two children cool right it's something like that space evenly is placing the children in such a way that the space around them is even if there are three children and if those are placed in a row then the three children we placed in such a way that they occupy the entire row but the space in between those three children will be equal space between us you'll see it you'll understand it better when you actually see it main axis see my space between and children text what does that my purchase rate my conscience I think it was full caps my coaches and then mistake texture style I think I'd stay color color start gray and own family quick sand on tweed on board and font size on size twelve point two okay now that was public somewhat smaller rate smaller than the rest of the text in the screen so I'll let this meter okay I will simply copy the same date paste it once again here it will be view photo second view past sessions only differences to be green fine if I run this no cool right now we have to text my coaches and view positions just like we had here as well I think it's a button base let's proceed with creating the cards so this looks like a grid right it's a grid view and the grid has two cards in every row so why don't I simply go ahead and make a nicer space sorry it's say there is some little space between my coaches in the cards right so after this row now after this container altogether I'll give a small-sized box sized box height I want 10.0 something okay and that was very little space right so in one zero then I'll include a grid view grid view dot count no I will give cross access comp will be - okay so there will be two grids I mean two guards every two widgets every row right this is a row by the way this is a column so if I give cross access compass - then there will be two widgets every row and then if there are more widget they will be added to the next row and so on and so on then I will just kill cross access spacing cross access pacing once again I will give two point zero cross access spacing this this spacing in this particular spacing it this particular spacing and main axis spacing as well MINIX this spacing will be four point zero main access spacing is this particular spacing okay and now that spacing is done I will do it in crap once again crew and I'll do children children should be set of cards right so rather than creating hard coding all those why don't we just create a widget that retains I mean returns a card and then simply call it four or five times from this particular widget so what I'll do is after this I'll create a widget with checked build and this will be string string name okay I'll have three L taking three arguments these are nothing but stuff that I will be is it I'll be displaying here this name the status and the card-index wait I'll show you and these are three arguments that I'm going to be using and inside this I'll write the actual card return card return card shape round rectangle border and then say this border radius will be border-radius toward circular 10.2 hoop okay so that each and every card has a somewhat rounded border as you can see it's very little right that's a little curved so after that elevation should be there elevation and key just give it as 7.0 so that it looks a bit more pronounced and in the emulator you want notice that Miceli illusion I told you right emulator doesn't do any justice to any way at all you should actually look it on a mobile anyway your end user is never going to run your application inside an emulator right he is obviously going to download it from play store or App Store and then simply run it on his mobile device and use it from that so always test your applications whether during the development process or during the production test your builds in the mobile device right let's continue here so child column will be children widget and say this sized box sized box a 12-point Oh and below this will have a stack stack children contain eight sixty point O with sixty point two and decoration recreation box decoration border-radius and you give exactly half so that the container if this container looks like a circle okay circular thirty point to and color will be some color stocked we know something this is color doesn't matter since we'll be showing an image here color stock cream and image will be actually means that we received actually we should receive the image here as well in the argument but since this is a simple demo I'll just you know hard code the image URL here later on when we integrate this with firebase we will see whatever you a screen and creating now I mean creating as part of my in flutter you a series I will be integrating those with firebase as well to show you how actual data can be pulled and then populated in those screens as well so far no real hard code this URL when we are using firebase storage we will just get the image URL from there and then try to display it here so network image the Christian means right so this should be decoration image decoration image image image and I will give you a URL I will simply make use of our famous Tom Cruise URL that we have been using for all the you a challenges so far okay now that container this containers over this is nothing but the image this image okay now we will do another container for this particular text so sorry sorry okay I'll use the sized box here so that there is a small space between the image and the text here sized box will be fixed mmm X will be the actual status that we get and style will be as usual text style I will specify a specific style font family quicksand font weight font-weight:bold will point to and color color star gray fine then we need an sized box once again so that I can do the next wait for you to take with status I should have probably use this for displaying the name right and then simply to stamp this fine so now we have handled this name and this status as well and below that we do this button okay this button I think we can simply use an expanded and then use a container and say that right like we did for the image so for the but tunnel simply this is the text [Music] sighs box once again placed box I eat 15 point oh and then expand that expanded child with the container and this will take a bit of 170 face for that it occupies the entire card and their decoration box decoration box the krishna box decoration color color will be different rate because for available it should be green and away it should be great so I'll just you know check if the colors we start as a survey or available first so you can simply do a status equals away if it's away then it should be color stored gray if it isn't then it should be color stock be fine then I will do a border radius border radius would be border radius dot only bottom left this will be radius not circular the rounding thing how much they gave their originally how how much did I give for the card ten great rounded rectangular bar if you give ten so here as well just you in 10.0 okay then oh I need to not only bottom left I need to give for bottom right as well bottom right radius dots circular again 10.0 fine you understand why I am doing this right because rate I'll show you here this in the center expanded will be overlaid on this particular card since you are using a stack right so this will be a rectangular shape and we won't get this nice rounded edges so in order to get those what we have here we no need this nice rounded edges because those these are sharp here inside the card so I'm just specifying the water radius to be circular only in the bottom left hand bottom right which is nothing but this one and this one right now that we have done that as well what's the error now that we have done that we need to give a text rate request request aesthetic so after the decoration is done yeah this is what the decoration I will have a child Center this will have a child text request and then now the only thing I need to specify is the margin so we need a margin right this is not exactly close with the thing if we include the card inside equator I will show you the magic that will be much more simpler way contain after the column I'll specify a margin for the thing for the grid in Delhi so card-index tortoise even if it's even then it means it's the right hander cut this side card right this is one two three four so if it's even then it means this second widget in the grid in every row you see when then edge insets dot from left top right bottom endpoint o top will be o this right will be twenty five point two and bottom will be again ten point two fine if it's not then I will simply copy this paste it here only this time it will be this will be twenty five point two so this will be twenty five point two and here I can simply reduce this right side margin I will just reduce it to five okay you understand why I did this right here this margin I need to give twenty five this margin I need to give twenty five whereas this margin will be taken care of by the cross spacing size that I gave right I mean this space will be taken be taken care of the cross spacing size that I gave so for every second in the grid I am using this particular margin so that the right-side border is too much and the left sidebar isn't that much well for every odd widget that is the left-handed side widget in the grid I'm giving the left side margin s 25 which means that this space will be equal to this particular space that's it right and we have specified this button as well everything is fine let's just run this and see what before running this we need to call this card here it we did never called even a single card build curve function whereby inside the children will simply do build card name will be Tom status will be available index will be one garden if you are using a map or something it will come with an index and then you can simply specify that index or even without an index you can simply without wait I'll show you that is another way to do that I didn't want to you know take it to I didn't want to make it you know too complex this let it be Tom the only thing missing so we have six cards now let us run this and see what happens all right it looks really good right the card the button looks a bit elongated but other than that the card looks very good and we have oh we can't scroll where you waste it's not scrollable list you should be Scala right okay we used a grid inside a list grid by default comes with scroll as well so if we use it like this then obviously there will be a dissemination between the scroll here and scroll in the default called present in the list as well so what I can do is simply set this primary as false now this won't be the primary which means set it'll allow the default list view scroll I will save this it should hot reload and we should be fine now if we trace calling yeah you can see that we are able to scroll and all our six cards are perfectly functioning and we also have that color scheme and the status and all that perfectly working as well Rick wait I start something missing a thing that is let me just open up the you way again yeah this dot is missing right we didn't create this way and available dot he'll just try to do that no that should be simple it was just a circle rate what was that it let me see it once again it's just a circle and there's a cut here cut in the original circle and the circle is if we use a stack you can simply place that circle on the top and then provide a radius to that so that it looks like a cut I think this is white color so if I specify the radius to be meaner border to be white as well wait I'll show you that would be simple way to bring in this design this is the stuff where my okay after this container I will simply do another container since this is a stack that dot will be overlaid on this container right so all I need to do is place it at the exact spot so somewhat to the right of the circle so that it looks prominent I'll do that with the help of a margin margin edge insets edge inside start only left I will give some 35 0 and height height L simply specifically test 20.0 and with L again specific test 20.0 sorry it will exactly be similar to that specific circle a box decoration border-radius border-radius dot circular 30.0 and color color should be according to this data safety statuses have a it should be amber and if it's available it should be green red that's waiting to check it right so if it's away it should be somewhat amber and if it's away available it should be green so status once again I'll check status equals we if this is true then color start and if it is false then color stop green okay let's see dot color then we need a border color as well so two specific border for that particular container which will be in the shape of a dot simply do a border border dot all and inside this specify color color color start white style border style dot solid and with specified with two point zero because the cut looks deep it will see that yeah the cut looks a bit deep than this so I will just go with two point zero yeah that should do it that should do the trick let's just hope that we aligned properly we'll even increase it forty or something okay now let's run it on a mobile device and see what happens alright it looks really cool right we have this nice-looking dot on top of T really do it exactly the first tray that's really something you can also scroll it to see other cards as well and whichever card is available it shows a green dot rest whichever card is away it shows an amber just like we have in earth that's it just like we have done here has been cool right that's it guys we just tried and created the same take it I will show it on you show it to you guys on a mobile device that will be really good and close the emulator once and for all and then show it on you guys wanna mobile device alright now you can see the screen on a mobile device right and it looks way more cooler than the emulator you can also scroll through this and then look at the list of cards as well for all the available cards it shows a nice looking green color dot here and the request button is enabled as well and the green color for the buttons we obviously need to use an ink wheel or a gesture detector I didn't show that here since they just simply used a container but while you are doing it just wrap the entire button within a guest gel detector so that you can listen for the on tap event as well so so yeah that's one thing I wanted to mention but anyway the screen the the screen is what we wanted to create just know and we I think we did a good job on that right we also created that cut around the green color dot on the Avatar using a white border for that particular dot and the cards look excellent and the component above the cards except the hats we almost did everything I guess and the font a obviously I can't get that phone since it was too costly I wish I had that phone but yeah then again you can't get everything you wish for right anyway so yeah guys this is exactly what we wanted to accomplish in this video and I think we accomplished our goal if you really found this video helpful kindly share it with someone and help them to if you like this video kinda a thumbs up button so that you YouTube algorithm picks up my picks up this video and then promotes it to other people so that a lot of people might view this video as well and if you really like what I am doing on this channel on this channel I do they almost daily uploads weekly 4 or 5 videos per week and one of those videos would be a you a challenge or an animation related video and the rest of those videos videos related to flutter application development that is core application development getting data using streams getting I mean integrating with firebase and all that app development business logic stuff now one video will be on you way and you way either you a or animations per week so if you really like this type of content if you really like what I'm doing on this channel kinda hit the subscribe button and also hit the build notifications icon so that you don't miss out on any of my upload uploads so yeah guy this is what I wanted to show you guys today I will talk to you guys in my next video bye

Channel: Raja Yogan

Views: 80,746

Keywords: Flutter UI, Flutter UI Challenge, Flutter, Google Flutter

Id: VE1IsV0HABs

Length: 50min 49sec (3049 seconds)

Published: Tue Sep 25 2018

Reddit Comments

[u/rbmulani7009]

Hello Raja,

Thanks a lot for this, I've a project for flutter & would like to discuss few things with you. it'll be great if you can help me out with that.