Flutter Flame: Proper Viewport to Match the Screen Size

In Flutter Flame, you can get the screen resolution using the gameSize property provided by the FlameGame class. gameSize represents the size of the game in logical pixels.

Here’s an example of how you can get the screen resolution using Flutter Flame:

import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flame/flame.dart';

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Flame.util.fullScreen();
 await Flame.util.setLandscape();
 runApp(MyGame().widget);
}
class MyGame extends FlameGame {
 @override
 Future<void> onLoad() async {
   // Get the screen resolution
   Size screenSize = gameSize;
   print('Screen Resolution: ${screenSize.width} x ${screenSize.height}');
 }


 @override
 void update(double dt) {
   // Your game logic goes here
 }
 @override
 void render(Canvas canvas) {
   // Your rendering code goes here
 }
}

In this example, gameSize is accessed in the onLoad method, which is called when the game is loaded. The Flame.util.fullScreen() and Flame.util.setLandscape() methods are used to set the game to full screen and landscape mode, respectively.

To add the necessary dependencies in your pubspec.yaml file:

Yaml:

dependencies:
 flame: ^1.0.0

FlameGame class is part of the Flame package, and you need to import it to use its features.