How to use Device Info Plus library to get the width and height of device in Flutter/Flame?

Question

I want to get the device's width and height in pixels in my Flame application. I've been looking at the api website's examples (https://pub.dev/packages/device_info_plus) and trying to put them both together to get the specific information I need, but I keep getting errors. Is this because of Flame or am I doing something wrong?

I've added the library and updated the yaml file. I just took some lines of code and put them together and I'm receiving an error when trying to get the device width.

Here is the code:

    final deviceInfoPlugin = DeviceInfoPlugin();
    final deviceInfo = await deviceInfoPlugin.deviceInfo;
    final allInfo = deviceInfo.data;
    final deviceWidth = deviceInfo.displayMetrics.widthPx;
    print("DEVICE INFO");
    print(allInfo);

Here is the error:

error: The getter 'displayMetrics' isn't defined for the type 'BaseDeviceInfo'.

Answer 1

You don't need devive_info_plus to get the size of the screen in Flame, that information already exists on the FlameGame class.

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() {
    this.size; // <-- This is the size of the visible game canvas
  }
}

You can also access the size from a Component that is added to the tree.

class MyComponent extends Component with HasGameReference {
  @override
  Future<void> onLoad() {
    game.size; // Same as in the FlameGame
  }

  @override
  void onGameResize(Vector2 size) {
    // This lifecycle method is called every time the screen resizes
    // This method exists in all components so for this you don't
    // need the HasGameReference mixin.
  }
}

Other sizes that might be of interest:

game.camera.gameSize;
game.camera.canvasSize;