Flutter Tutorial - Super Quick Way To Create Pixel Perfect Responsive UI

you can see the app running in three different platforms and these three screens have totally different screen configuration basically but still you can see the ultimate feel of all of these uh apps running on different devices is the same and that's what we are looking for we are going to make this sort of a design or this sort of conversion that looks absolutely same in all of the devices and it should be scalable if like we have a device having larger resolution or smaller resolution all the components should scale themselves to look as great as possible [Music] hello friends amazon from easy approach and in this video we are going to discuss some magical tricks and tips that you can use in order to convert your figma or your design or your ui into railflutter app and you can make it responsive and you can make it pixel perfect just using a single package before this package before i discovered this package i had to write lot of boilerplate code but you can avoid a lot of boilerplate code just using a single package and it will work for you like magic so before implementing it i would like you to subscribe my channel if you really want to learn flutter with easy approach and i've created many videos specifically on state management that's so easy to understand and you can just click on the link that's appearing at the top of the screen and i've also created some latest videos in 2021 that is so either so useful and you just have to click on the link and then you can just watch the videos anyways let's begin with the thing that we have done already to save the time so first of all these are few of the variables that i have declared and these are basically the colors that we are going to use in the application and if i can show you the design that we are going to convert from figma into the real app so this is basically a simple design uh that i choose as example to convert from figma into the real app because we want to uh test a package that we are going to discuss in this video anyways so this is the basically the design and we want to make it pixel perfect we want to convert it into the real app and it should be responsive so first of all this design has a single font which is nunito and it's actually a google phone so basically for having the google fonts in the application i have used this google fonts 2.1.0 and you just have to use the latest one and simply you just have to add this uh package into your pubspec.tml file and the second thing which is the primary thing and that's the reason why we are discussing everything is this flutter underscore screen util package this is basically it will help us to implement the design responsively and we can make pixel perfect conversion from figma to flutter using this package and if i can briefly discuss how it actually works like if you uh suppose if you don't have this package and if you want to implement the design and if you exactly do the same design in a flutter app if you specify the same sizes like the same font size is the same padding and everything same in the flutter app and you just play on the application it may not necessarily look the same unless the screen configuration on which the app running matches this screen configuration that we have on figma and which is not the case always since we have uh this sigma design is just a design on a single screen configuration and in the world we have lot of different devices having different sizes and different dimensions but you can solve this issue using the package which we are discussing flutter underscore screen util this basically primarily works on converting the specific sizes into the ratio base sizes and then it maps the ratio base sizes on the screen convict configuration on which your app is running it may sound a little bit confusing but you will get it once we start implementing this so let's start implementing it so first of all the very first thing which we have to do is we have to initialize this flutter underscore screen util package and by initializing i mean we have to specify the size configuration of figma so that the package can later on map uh the sizes uh on the device that on which the app will be running so how we can configure how we can set up this uh package so for setting up you just have to wrap your material app into splutter screen util in it so this is how you should be initializing it so we just have to wrap this thing into a widget and the widget name will be screen util in it and rather than using child you have to use the builder and this arrow notation and after the builder you have design size and over here we have to specify the exact screen configuration of the figma basically you are following so basically we are following this screen we have to make exactly this screen so this is the whole container and this is you can see this is 360 by 640 so the height is 640 and the weighted 360. so you can simply specify here constant size object and you can say 360 comma 3 sorry 640 so this is what you have to do initially just to make sure this is exactly the same so 360 and 640 so this is the first step you have to do uh in order to work with this package so after initializing you can rerun the app and then we can move on to the design so you can see the design is pretty simple we have some widgets in vertical direction so basically for implementing this sort of layout we need to use column widget so that we can hold these widgets in a vertical direction and that's basic simple how you basically and simply design or create layouts and flutter so anyways what we can do initially in the scaffold i can use a column widget and in the column widget we will have children and i want uh all the children to start from the from the left of the column widget so we can over here specify the cross axis alignment that's basically the basics of flutter and you should know all these things and then inside it we can specify or we can define our first uh child of this whole layout so first of all in the design we have this text which is a simple text uh having some some properties like the text size 18 pixels and the height and the weight is 700 so first of all let's just simply copy this let's create a text widget and simply just paste this and let's refresh the page so that you can see the text you can see it's coming at the very top and there are a few things we have a common padding uh for for the screen that we have to assign so you can see the the horizontal padding is 24 width is 24 pixels and also if i can see over here so uh basically it's symmetric and both of the side we have to provide we have to give 24 pixels of padding so what i can do i can simply wrap this column widget into a padding widget and i can specify uh the padding and now there is interesting thing how uh basically you should work with the with the flutter screen util package so instead of uh you first have to say horizontal or instead of saying just 24 you should be saying 24.w so this is not just 24 but it is width base uh 24 pixels so it will basically uh calculate the ratio uh of 24 uh and the total and it will basically divide the 24 to the total width and we'll get the factor which is the uh which is the ratio factor and this will be used later on also on the different screen configuration so anyways whenever you have to specify the size if you are specifying the horizontal size you have to add this dot w and whenever you are specifying the vertical size you have to add dot height or dot edge basically so if i refresh it you can see now we have some vertic some horizontal padding and since it's it's at the top so we cannot uh really see so what i can i can do i can just simply wrap this padding widget into safe area so that it comes up after the notification tray so now you can really see that the horizontal padding that we have provided is exactly the same uh that we have on the figma now let's style this uh text since uh it has some properties in the figma so you can see that in the in the text we have the 700 weight and 18 pixels of the text size so simply you can just specify a style like you do normally and in the size rather than saying it 18 you should be saying 80 18 dot sp so sp is the scaling factor and we normally use the this uh with the text sizes when you are using this package so it is basically scalable size and it will be different in all of this screen dimension based on the ratio so this is the first thing so if i refresh it you can see now it's significantly uh bigger in size and it's uh actually matching with the figma and we also have to change the weight of it which is 700 so if i refresh it so this is the basically um size sorry the weight also uh we have a color uh which is dark text color so we can use this color now the second component that we have in the application or in the design or the wave first thing which we actually have missed there is a space vertical space also in the design and it's basically off 53 or 52 we can say because i think it's it is 52. so we will keep it 52. so let's have a have vertical space of 52 pixels before the before this heading so for having the vertical spacing we can simply use size box and we can just specify the height so size box and you can just simply say height and it's 52 dot h since it's vertical space so we have to add dot edge to make it responsive so if i refresh it you can see the vertical space uh before the sign up to master minds anyways let's copy this again and we have another text afterwards which is basically a subtitle so simply you can copy the text and there is some change of the properties like the text color and also the size of the font so it is 14 and text color is different so first of all let's copy this and the size is 14 it's 600 and then we have light color yeah and there's also in vertical in in between of these two texts there's a four four pixels of the space so simply we can just say again size box and we can specify vertical horizon vertical space by using height and you can just simply say dot h4 dot h that looks fine and since this has some different color in it also so rather than just using uh text we can wrap this into wrap widget and we can have multiple text instead sorry we have to wrap it in column and then we can change from column to wrap you can also use you can also use raw widget for this and you can simply just say login over here you can remove login from here and you can just change the color and it will be purple color and it's it's more highlighted so it's 700 yeah that looks great so after this uh these two headings and subheading we have a we have a text field and in between we have 24 uh pixels of vertical spacing so let's add the 24 pixels of vertical spacing you can just simply uh copy and paste the size box and you can just say 24 and here we go we have spacing we cannot see obviously right now unless we have the text field so let's create a text field and there's some basic decoration of this text field so let's quickly do the decoration stuff the border outline and put border we basically have uh a border radius border radius dot circular and let's see how much we have to specify the radius you can see uh i i have chosen this one and you can see that it is eight pixels off the corner radius so uh in this how we actually have to specify the radius name we have to use 8 dot r not just 8 but we have to also add this r so this is basically the border and we have to specify the border side and we don't have any color so you can just say transparent and width should be zero you can just go with the transparent or specifying the width that will be okay also and also in the enable border you also have to have these things that's fine and then we have a field so yeah it is filled and we have to specify the fill colors so we have a text field color specified already we can use so let's uh refresh it and see how it comes on the screen uh yeah so you can see it's uh it's here but since it's light and color so you can uh hardly see it so let's add the hint also so right now you can say is it first name and now you can it's it's obvious you can see the uh you can see the text field prominently also we have the we have the padding we have a specific padding for the text field in the design you can see uh the horizontal padding is 16 and the vertical is 14 so let's add these two as well so edge and set dot symmetric the horizontal padding is is 16 so it is width base so 16 dot w and then the vertical is 14 dot h and if i refresh it you can see the change in the in the size also anyways we have to also specify the hint text style since it has some common uh style so for the hint style we can just simply say hint style and then we can see um basically it's uh 14 pixels in size and then 400 okay so it will be also text style and then the size will be 14 dot sp and the weight will be 400 yeah that's fine so if i refresh it you can see uh i don't see any change but it will be uh visible when you have some different screen configuration anyway since we we require a lot of different text fields so it's it's better to make it as a function that returns these text fields so i'm going to create a function that will return a widget get text field and since the only different right now so far we have of the hint so let's add required string hint and then you can return the text field you just have to change in the first name you just have to write and you can then you can simply reuse this function many times so let's add this and you just have to specify you can just say first name or rather you can say it full name and then you can have another this text field another one another one because we have total four so the second one is the email address or you can just say email and then we have uh the password and then we have a confirm password we basically have four text fields separated with a vertical space of uh how much it's 16 pixels so we have to use in between of the text fields we have to use size box with 16 dot edge value and then we have a button so let's refresh this so now you can see we have different text fields and now we have to make the button so now let's create the button so for the button we have to use tags button it was later on it was uh actually before it was uh the recent upgrade it was flat button but now it is x button not sure why they made it so complicated anyways so we have the tags button and we have we have to specify tags in it so you can the text in it is great account so if i refresh it you can see the button but it's not how it should look like so first of all we have to specify the styling and to specify the styling we have button style and we have the properties so first of all let's specify the background color and for specifying specifying it we have to do something strange materials state property.all and then inside it you can specify the color and the color which is the background colors it's it's the purple color so the very first thing is this and then we have the foreground color which will be the text color so you can just simply say colors dot white since the background the foreground will be white and and then we have the padding also so for padding uh still the same thing we have to wrap the property value in the material state property dot all and inside it you have to specify the padding so it will be h and sets dot all and you have to use dot symmetry yep this one and we have to see how much we have to specify the padding so the thing which we have to really care about because it's in center so the only thing which we have to care about is the vertical padding so it is 14 so you just have to specify the vertical and you can say 14 dot etch and then you can refresh it you can see it and now in a bigger size and since we want to have this button a full width so you can just simply wrap the stacks button don't see the bulb anyways so you can just simply wrap in size box and don't use for for just wrapping purposing purpose or for just specifying the size of the whole uh uh widget you don't have to exactly use the container since uh it takes more memory so just use size box in this case and you can just simply say width and double dot infinity because i used to use the container in in all the cases but it's not optimized and it's not efficient when you use container just for specifying the width and height yeah obviously when you have to specify the color and some properties uh the decoration of the containers obviously in that case you have to use the container anyways so we have now we have this button also we have also the the button text property also i mean the styling of button so you can say text style and then material state property dot all and then you have to specify the text style and and let's see what we have in the text style of it so it's 14 pixels and 700 in weight so you can just say size and you can just say 14 dot sp since it's a font size and then the weight will be 700. anyways let's refresh it so you can see it's now better and it's matching with the design now we have uh another component which is these uh three widgets which is the divider and then a text widget and then a divider so let's first copy this text and let's see also the styling at 614 so let's first create a raw widget since we have three widgets and then we have first of all we have divider and another one divider in between we have a text widget so let's specify the text and then we have styling also with this text so let's copy this and you can say styling and it's actually let's see what we have so it's 614. so let's make it 500 i'm just reducing it because i think 600 is 500 will be more good and also the color of this is the light color light text color so let's see how it's okay basically we have to wrap this divider into expanded widget so that it can take the available size and also the other one so they will be equally in size and in between we will have a text and also there is in between there is some space which is of 16 so let's add the 16 pixels of a space so we have to use size box for it and we can specify the width and you can just use 16.w you can copy this thing and we can also paste it here yep now it it's looking same and there is also a space between the button and this which is 16 so let's add another 16 you can copy this and before the button right before after the button you have to add 16 percent pixels of vertical space so you can see now the no it's not refreshed okay so we have uh specified here the width we it should be height okay that's working and now we have another button uh first of all we have another spacing of 16 pixels yep it's it's 16 or 18. let's leave it 16 so that it will be like symmetric so let's have the 16 and then we have another button we can just copy this however the there are some substantial differences in both of the buttons but let's add this and first of all let's uh change the text the text is google so google and then we have we don't have the background color so just remove the background color or and also the color of text is dark dark text color so you can just use the dark text color and you can refresh it yeah it's somehow matching and then we have the side so that we can add the border and and just say border side and the color of border is border color i think yep okay let's refresh it so now we have the border also and instead of just text we have icons so let's use wrap this raw widget and refresh it so when you use wrap widget it is a flexible widget and it takes more uh the space that's available so rather than taking the whole space you can just reduce the main access site to minimum so now it will be just only wrapping the content and also we have a icon for the for the google icon so it's actually google.png i've already saved in the assets yes and then we have the we have the horizontal spacing in between which is of perhaps 10 let me confirm um yes it's almost 10 so let's do it it should be with so yeah it looks same and then we have the the last thing which is uh let's wrap this thing so that it will be clear now we have another text uh which is uh the texts having multiple styles so we can reuse uh this component that we created basically we can copy and paste we haven't created that component so let's copy this and it's exactly the same in styling so let's paste this comment this thing so that we can and we can use this wrap widget we can just copy and paste and there is some spacing in between of this button and it's also 16 so you can just use the same size box that we have used already and instance you can just simply change the the text and instead of this we can just simply say this and instead of the other one which is prominent you can just paste this and you can remove this comment also so well you can see we have now this uh design uh we have implemented it and it's it's looking exactly same however the screen screen configuration of the of the of the current uh device is it's absolutely different uh from the screen configuration of this because it's it's really small inside is in size you can see really that this is a 360 by 640 however if i'm not wrong this is almost uh somewhat somewhere around 720 uh into 1080 or something around this however not just this we will also compare this design on different screen sizes to see if that really works on different screen configuration or not so what i'm going to do i'm going to open another device which is basically a tablet so let's open uh the avd and then we have this uh emulator which is basically it's a tablet and you can see uh there's a big difference in the screen resolution and you can also see the screen resolution it's uh this is the device on which we already run the app and it's one zero eight zero into one nine two zero and this is uh one one two zero zero and then one nine two zero so obviously there's there's the different uh difference in the uh in the screen configuration and you can see when i run the app this is the result so you can compare these two you can hardly find if i find any difference i mean uh obviously these have different screen sizes but you can see the ultimate feel of the app is exactly the same it looks absolutely fine and not looking in any way that it's broken or something and let me open another thing we can also test it on the ios and since the ios has a greater resolution so we definitely want to see how it looks on the ios so let's run the app sorry it should be on ios instead so you can see you can see the result on ios also and you can see it's it they all are looking same and obviously they they all have different dimensions and screen configuration but the ultimate feel is is still same and we haven't done anything fancy in this we just uh use a simple package and we just uh we created all the design and we implemented this design based on a single screen configuration that we have in figma and we haven't done anything out of the box for implementing this uh this responsiveness apart from the package obviously that we use so that's the beauty of the package and you can use uh that package and you can easily implement the responsiveness in in the design and you can obviously save time by avoiding the boilerplate code so this is it from this video if you enjoy the video please give a big thumbs up and if you haven't subscribed the channel you should subscribe the channel so that you can enjoy these videos in the future and i have a lot of videos on flutter on my channel you should try all of these all of the videos so thank you for watching

Channel: Easy Approach

Views: 21,165

Keywords: flutter, Flutter design pattern, flutter responsive tips, flutter responsive design, responsive app in flutter, getx, flutter tutorial, responsive ui, flutter web, figma to flutter, figma, ui to flutter app, create ui in flutter, flutter responsive ui, flutter web app, flutter ui, flutter mediaquery, flutter web development, flutter responsive, flutter ui design, flutter 2, flutter responsive tutorial, flutter getx, flutter getx tutorial, flutter json, flutter pixel perfect

Id: LWteDQes4Kk

Length: 33min 19sec (1999 seconds)

Published: Mon Jun 21 2021