How To Set Dynamic designSize Based On Device?

[yusriltakeuchi]

as we know, the design size can be filled by the device dimensions in UI Design.

For example if I use UI Design iphone 8, so the designSize value is (375, 667) What if the application is run on an iPad with a very large screen, won't it be unresponsive?

What designSize value should I fill if my app wants to have the same appearance on iPhone 8, iPhone 13 Pro and iPad Pro?

[Mounir-Bouaiche]

designSize as documentation says: the design size on the design tool, and not the screen size of your device. The package already calculate the screen size of the device which app running on, using only context. It's rarely to fill screen size manually, but if you want to fill it manually you should use screenSize instead of designSize since they are not the same and they have different roles in the app.

The main role of this package is to have same look for all screen sizes (iPhones, iPads, Samsungs, Huaweis,....) . The property designSize used only when you have a design on Figma, Sketch, Adobe XD, or any other design tool. You shouldn't pass any value to designSize property unless you used a design tool. Suppose you have a design on a design tool, you use the screen size 400x740 (width x height), then you must pass value to designSize property to be like this :

ScreenUtilInit(
  ...,
  designSize: const Size(400, 740),
  ..., 
),

[yusriltakeuchi]

designSize as documentation says: the design size on the design tool, and not the screen size of your device. The package already calculate the screen size of the device which app running on, using only context. It's rarely to fill screen size manually, but if you want to fill it manually you should use screenSize instead of designSize since they are not the same and they have different roles in the app.

The main role of this package is to have same look for all screen sizes (iPhones, iPads, Samsungs, Huaweis,....) . The property designSize used only when you have a design on Figma, Sketch, Adobe XD, or any other design tool. You shouldn't pass any value to designSize property unless you used a design tool. Suppose you have a design on a design tool, you use the screen size 400x740 (width x height), then you must pass value to designSize property to be like this :

ScreenUtilInit(
  ...,
  designSize: const Size(400, 740),
  ..., 
),

Hi @Mounir-Bouaiche , how if we dont have UI design? What value i must insert in designSize() ?

[Mounir-Bouaiche]

Hi @yusriltakeuchi, you shouldn't insert anything, the library will handle that.