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