FixedResolutionViewport in flame changes the click/touch location

Question

I've been experimenting with the example drag_events game from the flame documentation:

https://docs.flame-engine.org/latest/flame/inputs/drag_events.html

Now, I'd like the game to have a fixed size, as this helps with some other aspects of the game that I'm writing. So, I've modified the code in the Demo by adding the following line to the onLoad method:

camera.viewport = FixedResolutionViewport(Vector2(400, 800));

Unfortunately, the result of this is that the on-screen click appears in the wrong location. That location depends on the size of the window in which the game is running (and is different again on an iOS simulator). The image is an example of that for a macOS app. Presumably there's some simple option which avoids this issue?

Edit: Following Spydon's answer (thank you) it is fixed. The drag_events.dart routine now has an onLoad function which begins with the following:

world = World();
cameraComponent = CameraComponent.withFixedResolution(
  world: world,
  width: 400,
  height: 800,
);
cameraComponent.viewfinder.anchor = Anchor.topLeft;
addAll([world, cameraComponent]);
world.addAll([
  DragTarget(),

And after that is the same as before. This solves the offset problem and the new background fills the screen appropriately.

Answer 1

This was an unfortunate side effect that happened when we swapped to the new event system. Use the CameraComponent instead (which will be replacing the Camera in FlameGame anyways) and it will work:

class CameraComponentExample extends FlameGame {
  late final CameraComponent cameraComponent;
  late final World world;

  @override
  Future<void> onLoad() async {
    world = World();
    cameraComponent = CameraComponent.withFixedResolution(
      world: world,
      width: 400,
      height: 800,
    );
    addAll([world, cameraComponent]);
  }
}

And then you add all your components to world instead of directly to the game.