How to solve the issue of widgets appearing large on ColorOS phones in Flutter?

Question

I started developing an app in Flutter and the design looks okay on Google Pixel phones with stock Android, but on Oppo, for example, the UI elements look zoomed in.

I've checked the display settings and they are different on these two OS-es:

• on Google Pixel you have a scale sized with 5 stops, by default is set on 2/5
• on ColorOS the scale has just 3 stops and it's set to 2/3 by default

I'm testing on phones with a similar DPI and screen resolution. It's just that the device pixel ration on the Oppo is higher than on the Pixel and the scaling stops have larger values.

As a developer are you expected to do something to solve this issue? I mean, I use logical pixels, it's not up to me how many physical pixels the OS renders in one specific widget.

I've checked the repo Wonderous: https://github.com/gskinnerTeam/flutter-wonderous-app and they don't do anything about this. And their app does look a bit zoomed in on an Oppo phone.

I don't want to use the screen_utils package for this: https://pub.dev/packages/flutter_screenutil

Actually, I don't even see this whole situation as an issue on my side, as a developer, but my client keeps telling me that it doesn't look like in the design...

How you also noticed that you app looks zoomed in on some phones? Did you did something about it?

Answer 1

This should do it, keeps size fixed to a specified screen percentage ratio.

class DynamicSize {
  BuildContext context;

  DynamicSize(this.context);

  double w(double widthPercent, {bool above100=false}){
    // For Text.fontSize() use only this.w
    if (widthPercent<=100 || above100){
      double percent = widthPercent/100;
      return MediaQuery.of(context).size.width * percent;
    } else {
      throw Exception('Width above a 100%, and above100 is false');
    }
  }

  double h(double heightPercent, {bool above100=false}){
    if (heightPercent<=100 || above100){
      double percent = heightPercent/100;
      return MediaQuery.of(context).size.height * percent - kBottomNavigationBarHeight;
    } else {
      throw Exception('Height above a 100%, and above100 is false');
    }
  }
}

Implementation:

  Widget build(BuildContext context) {
    var size = DynamicSize(context);

    return Scaffold(
      body: Container(
        width: size.w(50),  // Half the screen width
        height: size.h(30),  // 30% its height
        decoration: BoxDecoration(
            color: Colors.blueGrey
        ),
      ),
    );
  }