Joystick & HudButtonComponents are hidden by game scene. Priority doesn't work

I'm adding a joystick and other hud buttons to the game with the highest priority but they are always hidden by the game scene once it is loaded. I ensured them to be added after adding the scene, but it never works.

In game.dart file that extends FlameGame:

  late JoystickComponent joystick;
  late HudButtonComponent jumpButton;
  late HudButtonComponent attackButton;

  @override
  FutureOr<void> onLoad() async {
    health = maxHealth;
    if (!_isAlreadyLoaded) {
      await images.loadAllImages();

      _loadFloor();

      if (showControls) {
        addJoystick();
        addJumpButton();
        addAttackButton();
      }
      _isAlreadyLoaded = true;
    }

    return super.onLoad();
  }

adding joystick (other hud buttons also the same):

    void addJoystick() {
    joystick = JoystickComponent(
      priority: 10,
      knob: SpriteComponent(
        sprite: Sprite(
          images.fromCache('HUD/Knob.png'),
        ),
      ),
      knobRadius: 64,
      background: SpriteComponent(
        sprite: Sprite(
          images.fromCache('HUD/Joystick.png'),
        ),
      ),
      margin: const EdgeInsets.only(left: 128, bottom: 32),
    );

    add(joystick);
  }

loading floor (floor is loaded in game.dart):

    void _loadFloor() {
    Future.delayed(
      const Duration(milliseconds: 1000),
      () {
        Floor world = Floor(
          player: player,
          floorName: floorNames[currentFloorIndex],
        );

        cam = CameraComponent.withFixedResolution(
          world: world,
          width: 640,
          height: 340,
        );
        cam.viewfinder.anchor = Anchor.topLeft;

        addAll([cam, world]);
      },
    );
  }

Solution

You have two cameras in your game, I would suggest that you remove your newly created camera and use the built-in one instead. And you want to add your huds to the viewport, and not to the game.

    void _loadFloor() {
      world = Floor(
        player: player,
        floorName: floorNames[currentFloorIndex],
      );

      camera = CameraComponent.withFixedResolution(
        world: world,
        width: 640,
        height: 340,
      );
      camera.viewfinder.anchor = Anchor.topLeft;
  }

  void addJoystick() {
    joystick = JoystickComponent(
      knob: SpriteComponent(
        sprite: Sprite(
          images.fromCache('HUD/Knob.png'),
        ),
      ),
      knobRadius: 64,
      background: SpriteComponent(
        sprite: Sprite(
          images.fromCache('HUD/Joystick.png'),
        ),
      ),
      margin: const EdgeInsets.only(left: 128, bottom: 32),
    );

    camera.viewport.add(joystick);
  }