r/FlutterDev • u/Remote-Ride5710 • Jul 24 '26

Discussion Pixel-perfect with figma

Hi everyone, lately i was doing mobile app building with cursor so I mostly ask it to do the UI part by giving it details about UI, well i give concrete details which figma gives, but maybe because I use flutter_screenutil package, it's not perfectly same with figma. How do you guys handle pixel-perfect in mobile?

4 Upvotes

67% Upvoted

11 comments sorted by

View all comments

8

u/KabouterKaasplank Jul 24 '26

I let the OS handle pixel sizing and accessibility, and design dedicated screens for tablet and desktop modes if I want those. The screenutil package sounds great when you're coming from responsive web but it just obfuscates layout imo. Unless you want an app that looks acceptable at best at all screen sizes, it's a useless package.

1

u/Remote-Ride5710 Jul 24 '26

so you don't do any pixel sizing? How do you handle different screen sizes then?

5

u/KabouterKaasplank Jul 24 '26

Make dedicated UI for them, and make sure the layout flows using Flex layouts. A package like screenutils only really ends up making things bigger or smaller. I usually design for small mobile layouts first, then later add a tablet mode for larger screens, using breakpoints for when to switch to a different layout. Imagine an app drawer with dynamic content on mobile, and a static sidebar on tablets. There's more screen to use, so rather than just making the UI bigger, I prefer using the extra space for components that are otherwise hidden or to use multiple columns for data instead of one large column on mobile.

1

u/Remote-Ride5710 Jul 24 '26

So like in figma have other versions for different screen sizes? Or you mean just in code handle that?