flutterdartflame

Handle different smartphone screen resolutions in Flutter+Flame


I'm developing a 2D portrait game using Flutter and Flame. What is the best way to handle different smartphone screen resolutions?

At first I created the camera like this:

CameraComponent.withFixedResolution(
  width: 720.0,
  height: 1600.0,
))

and then I created the sprites giving them fixed dimensions based on the resolution 720x1600, but in some smartphones with different resolution there are black bars.

I saw that I could create the camera in this way:

class MyGame extends FlameGame{

    Future<void> onLoad() async {
        camera = CameraComponent.withFixedResolution(
          width: size.x,
          height: size.y,
        ));
        ...
    }

}

in this way the background is full screen without black bars, however, I should calculate the dimensions of the sprites by making the proportions with size.x and size.y.

Is this the correct solution? Is there a better way to make my game full screen in all smartphone resolutions?

P.s. I also set this:

await Flame.device.setPortrait();
await Flame.device.fullScreen();

Thanks


Solution

  • are u using this package for better way.

    flutter_screenutil: ^5.9.1
    

    Like this example:

     Container(
      width: 300.w,
      height: 300.w,
     ),
    
    Text(
      'Test',
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.sp,
      ),
      textScaleFactor: 1.0,
    ),