How to use responsive_sizer to achieve a responsive design using a Figma design with a specified phone frame?

[Shubham Hande]

I have a Figma design with a specific phone frame, and I want to use responsive_sizer to create a responsive design across different device sizes. As responsive_sizer involves using percentages of the screen for widget sizes, and it may seem like a hit-and-try process. If I want to convert the exact size information from the Figma design using responsive_sizer, is there a specific method or guideline to follow?

For example, in a Figma design, the device frame is 480 x 320, and the container size is 60 x 60.
How can I utilize the 60 x 60 dimensions with responsive_sizer for Flutter widgets.

[CoderUni]

The method of approach would differ from person to person. There is no specific guideline that should follow. Since devices come in different screen sizes, screen resolutions, and screen densities, it is impossible to perfectly mimic the same figma design across multiple devices. For example, comparing two phones with the same physical height but with slightly different physical widths, the same figma design may look a little bit more squeezed in the narrow phone than the one in the wider phone.

The standard and complex approach is the web approach, which is to have set breakpoints that dictate how big the container should be. (Eg: 10px for mobile, 15px for tablet, and 20px for desktop) This approach is something that I would recommend if you have a complex flutter project and it needs to support a wide range of screens. (Mobile, Tablet, and Desktop sizes)

Note that this is time-consuming since you'd have to make 3 different layouts for each screen. See what I mean here.

Another approach that is simple would be to use percentages (which is what ResponsiveSizer helps you do). If I set my container to take 20% of a device's width, it will always take 20% of its width regardless of the device's size. We could use ratios (intended size / max size) to make similarly shaped mobile devices closely follow your figma design.

Here's an example with your 60 x 60 container. Our intended size is 60.
We start by choosing the lower value of your device frame 480 x 320 and use it (320) as our max size. Take note that the lower value here is the device's width. Since the device's width is the lower value, we will be setting the container's sizes to (intended size / max size).w.

The end result would look something like this:

Container(
   width: (60/320).w
   height: (60/320).w
)

Since this could get ugly, you could create a function or extension similar to this:

double calculateRatio(num intendedSize) => (intendedSize / maxSize).w;

[Shubham Hande]

Thanks for the detailed answer. I'll stick to the default percentages approach.