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

[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;

[ShubhamHande99]

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