-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to use responsive_sizer to achieve a responsive design using a Figma design with a specified phone frame? #34
Comments
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. ( 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 Here's an example with your 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; |
Thanks for the detailed answer. I'll stick to the default percentages approach. |
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. Asresponsive_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 usingresponsive_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 is60 x 60
.How can I utilize the
60 x 60
dimensions withresponsive_sizer
for Flutter widgets.The text was updated successfully, but these errors were encountered: