Handle different smartphone screen resolutions in Flutter+Flame

Question

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

Answer 1

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,
),