Scaling issue with Android/iPhone

[maxdelgado]

Greetings! I am having a scaling issue when using this plugin. I am very hopeful that we can get this figured out. I posted the question with code examples and screen shots on stack overflow. I am grateful and appreciate all the help I can get! Thank you in advance

https://stackoverflow.com/questions/73336989/flutter-app-responsiveness-across-iphone-and-android-using-flutter-screenutil

-Max

[Mounir-Bouaiche]

Hi @maxdelgado Have you used the same designSize ?

[maxdelgado]

@Mounir-Bouaiche I am afraid I don't understand what you mean. Do you mean 960 x 960? If that is what you mean, why would I do that? Also, how would that resolve the issue I am having with scaling in the 'h' direction?

Thank you, Max

[Mounir-Bouaiche]

@maxdelgado , This is your code:

...
return ScreenUtilInit(
  designSize: const Size(432, 960),
  minTextAdapt: true,
  builder: ((context, child) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Gateway Device',
      supportedLocales: const [Locale('en', '')],
      theme: ThemeData(brightness: Brightness.light),
      initialRoute: RouteHelper.initial,
      getPages: RouteHelper.routes,
    );
  }),
);
...

Are you using the same designSize (which is Size(432, 960)) for your Motorola and iPhone ? Because you said: ... I have initialized my application using the screen size of one phone then the other to see what the difference would be ...

Note: designSize must be the same, must always be const Size(432, 960) for any screen size.

[maxdelgado]

@Mounir-Bouaiche I am using const Size(432, 960). What I meant by that comment was that I tried the dp of the iPhone, adjusted all of my code accordingly, and then tried the Motorola (432, 960), and adjusted all of my code accordingly. Either way, I have a scaling issue. As it gets closer to the bottom of the screen, the placement is way off. The 432, 960 is the screen size of the Motorola. The screen size for the iPhone is 390, 840. If I use either of those to design the application and adjust my padding, SizedBox height, font size, etc. It should scale appropriately on the other device. This is the issue I am describing. It is not scaling appropriately and I end up with around a 50 pixel difference at the bottom as show in my screenshots.

[Mounir-Bouaiche]

Ok @maxdelgado , Thank you, I'll try to reproduce the issue and see how I can help.

[maxdelgado]

@Mounir-Bouaiche I can email you my current code so you can use it. Would that be helpful?

[Mounir-Bouaiche]

@maxdelgado Yes, please. I'll be grateful.

[maxdelgado]

@Mounir-Bouaiche Sent!

[maxdelgado]

@Mounir-Bouaiche any updates on this?

[Mounir-Bouaiche]

@maxdelgado I can say that the remaining space at bottom is calculated also and will be as big as screen height. I also noticed that you don't specify height of textfields, but it's not a solution. I suggest you use Expanded and/or Flexible for cases like this, it may also help to use 26.h instead of 26.sp as font size if you want to adapt the screen to design height.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.