How to create a similar to Google maps pan an a zoom movement in Flutter flame

Hello everyone, how are you? Here I am with another mini-tutorial that I learned in my day-to-day work. Recently, we needed a camera movement in our app similar to what Google does in Google Maps, and since we are using Flutter and, in conjunction, Flame, there wasn't much material available on this. So, with this challenge in mind, I researched extensively and tested various possibilities until one day I decided to try ScaleDetector and Pandetect from Flame. I discovered that ScaleDetector was nothing more than a superset of PanDetector.

In summary, we were able to create the solution, and here I am to document this code for you.

Note: Remember to check the Flutter Flame documentation to implement everything correctly, using the ScaleDetector mixin.

Flame doc -> https://docs.flame-engine.org/

void clampZoom() {
    camera.viewfinder.zoom = camera.viewfinder.zoom.clamp(0.8, 5);
  }

  static const zoomPerScrollUnit = 0.01;
  late double startZoom;
  @override
  void onScaleStart(info) {
    startZoom = camera.viewfinder.zoom;
  }

  @override
  void onScaleUpdate(ScaleUpdateInfo info) {
    final currentScale = info.scale.global;
    if (!currentScale.isIdentity()) {
      camera.viewfinder.zoom = startZoom * currentScale.y;
      camera.moveBy(info.delta.global);
      clampZoom();
    } else {
      final delta = -info.delta.global;
      camera.moveBy(delta);
    }
  }

I would also like to thank Lukas (@spydon ), who has been doing an excellent job in the development of Flame and its community.