How should I set camera to fit the device screen in flame 1.8

Question

I'm trying to make a RPG style game using Flame 1.8. This is my onLoad of my game (extends FlameGame):

 @override
  Future<void> onLoad() async {
    // debugMode = true;

    myWorld = MyWorld();
    await add(myWorld);

    Flame.device.setLandscape();
    cameraComponent = CameraComponent(world: myWorld);
 
    //cameraComponent.viewfinder.anchor = Anchor.topLeft;

    await add(cameraComponent);
    return super.onLoad();
  }

They say you should use this to get the job done:

camera.viewport = FixedResolutionViewport(size);

But in Flame 1.8 there is no camera property and CamerComponent view port seems to be readonly. So how can I set my game to fit the device screen size. It works very good on Chrome I just do the math using myGame.size and everthing is where it should be but when I test it on android device some of the components are not shown which should be because their position's top is something like myGame.size.y - (components.size.height) , for example consider this :

for (int i = 0; i * 1024 < 20000; i++) {
      var top = game.size.toSize().height - 64;
      add(Brick(position: Vector2(i * 1024, top)));
    }

It's in bottom of the screen on firefox but in android device it's not shown and it's like I've done zoom or something ,thank you very much

PS: 64 is the brick's height

PS2: I said viewport is readonly because Code.exe is saying so:

'viewport' can't be used as a setter because it's final. Try finding a different setter, or making 'viewport' non-final

But this solved my problem :

final cameraComponent = CameraComponent.withFixedResolution(   world: myWorldComponent,   width: size.x,   height: size.y, );

Thank you very much,

Answer 1

The viewport for the CameraComponent needs to passed in to the CameraComponent constructor, like this:

final cameraComponent = CameraComponent(
  world: world,
  viewport: <Your viewport>,
);

or for the FixedResolutionViewport you can also use the other CameraComponent constructor and it will set up the viewport for you:

final cameraComponent = CameraComponent.withFixedResolution(
  world: myWorldComponent,
  width: 800,
  height: 600,
);