How to Make Responsive Flutter Apps, Pixel Perfect

this video is brought to you by design to flutter the platform to improve your flutter coding skills by building real projects at the end of this video you will be able to create the user statistics or stats of the social media profile screen user interface but you were able to make it responsive to another mobile phone screen size so let's get started when a designer hands you the mock-up design for a mobile app usually there is only one phone screen size throughout the whole design file whether it is from figma envision or sketch however there are millions okay maybe not millions but many thousands of different phone screen sizes aspect ratio and screen times therefore how do you be pixel perfect for different phone screens well we are going to use this thing called scale so skill is a simple way to make your user interface smaller or bigger therefore in this video in the first part we are going to go through on how to create a user stats part of the app and the second part is how we are going to use the skill to make the app responsive to different phone screen sizes if you want to follow along you can go to the design to flutter sub reddit and head down to this challenge and download the starter project so once downloaded let's get started with this tutorial first you need to download the latest version of the pixel perfect package it's a tool that allows us to compare original mockup with our current design so the next thing is we're going to add the save area so the save area basically adds spacing according to the phone screen so for this is an iphone 11 pro so it adds a spacing at the top which is highlighted in blue and spacing at the bottom which is also highlighted at blue so the next thing is we are going to add the padding so the padding allows us to make the app much more pleasing to the eyes next thing is we're going to add a scaffold which is basically the structure of the whole app and lastly we will need to add a column because at the first part of this whole app it is arranged in a column from top to bottom and for this column it is aligned to the left which makes the cross axis alignment to the left or to the start so let's add all of this code in our starter project also at the same time we want to wrap our save area with a pixel perfect widget that has our asset path and it has the image path with the mock-up picture as the background and then we will have our save area our padding our scaffold and our column with our cross axis alignment to the start and at the same time we will add in the children parameter so like we mentioned earlier we are only going to build this user statistics with the avatar and the different statistics like your post follower and following statistic since we are not doing this top header where we will see the username and the different icon buttons which has already been done in the previous video we are going to measure the distance from the status bar to the avatar and if you were to look closely it requires a size the box of the height of 49 basically a spacing so let's add that so inside our column we will add a sized box of a height of 40. the next thing is we're going to add a row with the children and the image assets of the avatar as such so now you can see that inside our user statistics part you could see that the avatar is placed very snugly in our pixel perfect over here so if you were to scroll to the left and to the right you could see that the image is perfect as where it is right now so let's go move on to the next few things which are the different statistics so instead of hard coding the text widgets we are going to create a user stats object with the different fields as the value and the name so the value represents the number that's on top over here and the name represents the text that's just below the number as such then we are going to create a list of user statistics so we are just going to hard code this as such and why i'm creating an object rather than a map of the different user statistics so in the future if we were to pull this from an api then we can just make use of the user object and it will become much cleaner and much more maintainable for the code base now if you were to go back to the figma file and you could see there are different spacing so from the avatar image to the first user statistic it requires 41 pixels from the first statistic to the second one it requires 40 and then second one to the third one it requires 27. so i'm going to add these different spacing into our user stats object but before that we are going to add another field inside our user stat which is called the left padding factor we're going to scale it up to make it responsive and since this is a required we need the left bending factor in all of our different users that's objects so let's add in accordingly and now we look something like this so let's break down the widgets for each of the user stats so each user stats have a row and then inside the row for one user statistic we will have a size a box and then we will have a column and inside this column we will have basically two text widget however how are we able to loop this user statistic three times efficiently well we can use this thing called the spread operator so what this spread operator does is basically it spreads or takes out the elements inside the list or iterable so for example we will have to make use of this four in loop in order for us to loop through for example in these three things if we were to manually do it it would look something like this where every single widget has been spread out with the individual things that they have for example these two widgets reference from the first thing this second two widgets reference the second things and the last two we just reference the third thing so this essentially is the same as this four in loop where it will just loop through the three things and then it will add the things according to the different widgets and then using this we are able to just make these two widgets spread it across this list of children which eventually will look something like this so let's do that inside our row of user statistics so inside our row which have our avatar image we are going to add in a for in loop for our user statistics then we are going to make use of the spread operator and this requires a list and now inside this list we are going to first add in the spacing which is basically a sized box and then we are going to reference it from the stats user object and the left padding factor and now we will add in the column inside our column we will have a list of text and basically for our value since it's an integer we will convert it into a string and then for our text style it will be a bold with a font size of 16.5 and then for our text over here we will just have a font size of 14. and if you were to save this you could see that the text is very close to pixel perfect so we need to change accordingly so if we were to go down to our list of user stats and change our second user stats left padding factor to 39 and our last user stats left banning factor 224 and you could see that now we have almost pixel perfect text that is rendered according to the mockup social media profile screen or basically the user statistic part of it all right great but is this the end well that's not usually the case so if you were to run it in another phone you could see that i have opened up the iphone 11 pro max and wow it actually is pixel perfect inside the iphone you know no no no there is unnecessary spacing over here so what we can do is if you were to scroll all the way up to our profile screen widget over here in our pixel perfect we need to change our iphone 11 pro max scale factor so what we can do is we can just put out an iphone 11 pro max as such and now we're going to add in the scale but the thing is how are we going to calculate the scale according to the iphone 11 pro max of the pixel perfect basically we want to size our mockup according to the iphone 11 pro max so what we can do is we can go to the figma file over here and let's calculate what is the height and the width of this mockup so the width is 375 while the height is eight one two so let's create a variable according to that so right just below our constant variables with the icons path and image path let's create a mock-up height and a mock-up width now the next thing is we need to get the width of the current iphone screen so we're going to make use of media query so right under our profile build method we are going to add in this media query that reference to the size of the width the next thing is we're going to create a scale variable that basically takes in the mock up width divided by the current phone screen width this gives us a decimal or you could see a percentage of how the image should actually look like now we can just put in this variable skill inside our pixel perfect skill over here and if you were to save this and you could see that for our iphone 11 pro max now our design is not responsive accordingly so if you were to hide over here there's actually a lot of spacing on the right and if you were to just scroll all the way to the right you could see that mockup is actually fitted nicely but our current implementation is not so the first thing is we want to scale our avatar image so guess what the image actually has a scale parameter so let's go to our row over here and then we're going to add in a scale just add in the scale as such and save this you could see now that our image over here is scaled up accordingly and nicely as well so if we were to move our image as such you could see that it is perfectly aligned to our image over here so as you can see over here our avatar image is scaled very nicely according to the skill that we have calculated the next thing is we want to change our hard-coded left padding into something that is more responsive so we're going to take a percentage and multiply it to the width of the current phone screen so how we're going to implement it is inside our sized box over here our left banning factor is according to the mockup with inside our figma file so we're going to grab a percentage meaning that we're going to divide the mock-up with and then we're going to multiply it to the current width of the phone screen and now if you were to save this you could see that now the spacing in between the user statistic is a little bit more accurate lastly we want to scale our text as well so lucky for you inside the text widget there is this text skill factor but this text skill factor is different from the image scale factor so what they need is the number of font pixels for each logical pixel so this has to be a number more than one so what we can do is instead of the scale which sizes the image we will have to create another variable that is called the text scale factor which calculates the current wave and divided by the mockup width now we can add our text scale factor inside our text scale factor parameter in our text widget and we're going to do the same for our stats value and the stats name so let's add in our stats name text widget and now if we were to save this let's see how it looks like great it looks like it's very close to our mock-up over here so we're going to change the left padding factor inside our user stats object both of the iphone 11 pro and the iphone 11 pro max are having a pixel perfect moment so our users that's over here it's not exactly 99 pixel perfect but it's almost there and inside our iphone 11 pro you could see that it is actually very close to perfect so in summary we learned how to create a user profile stat section using the different layouts and rows and whatnot we also learned how to calculate the scale for images not only for our avatar image but also for our pixel perfect image in order for us to make it looks nice and then we learned how to calculate the responsive spacing as well basically using a percentage from the mock-up width according to the width inside our figma file and multiplying to the current phone screen width and lastly we calculate the text skill factor for the text widget size that allows us to make it bigger according to the phone screen or make it smaller according to the phone screen that's about it if you like this video give it a thumbs up and if you want more of this video subscribe down below and comment down if you have any best practices for responsiveness in different mobile screens stay safe and all the best bye bye

Channel: Learn App Code

Views: 44,441

Keywords: flutter, learn flutter, learn flutter code, flutter code

Id: Chat5vYVGg0

Length: 14min 57sec (897 seconds)

Published: Sat Apr 17 2021