I’m making a game with the Flutter Flame package. However, I added the joystick to the game screen over the map, but no matter what I do, the character doesn’t move. Can you help me?

this game.dart

import 'dart:ui';
import 'package:angry/gameload/joystick.dart';
import 'package:flame/collisions.dart';
import 'package:flame/experimental.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flame/camera.dart';
import 'package:flame_tiled/flame_tiled.dart';
import 'package:angry/gameload/maps.dart';
import 'package:flame/components.dart';

class AngryGame extends FlameGame with HasCollisionDetection {
  late final MapLoader mapLoader;
  late TiledComponent tiledMap;
  late Hero hero;

  @override
  Future<void> onLoad() async {
    super.onLoad();
    await add(world); // Dünya bileşenini başlatın

    // Kamera ve Joystick bileşenlerini ekleyin
    camera = CameraComponent(viewport: MaxViewport());
    await add(camera);

    final joystick = GameJoystick(); // Joystick bileşenini oluştur
    camera.viewport.add(joystick); // Joystick'i ekle

    // Haritayı yükleyin ve dünyaya ekleyin
    mapLoader = MapLoader();
    tiledMap = await TiledComponent.load('Level1.tmx', Vector2.all(32));
    world.add(tiledMap);

    // Karakter sprite'ını yükleyin ve ekleyin
    final heroSprite = Sprite(await Flame.images.load('hero.png'));
    hero = Hero(
      sprite: heroSprite,
      position: Vector2(250, 400), // Başlangıç pozisyonu
      size: Vector2.all(120),
    );
    world.add(hero);

    // Kamerayı karakteri takip edecek şekilde ayarlayın
    camera.follow(hero);

    // Kamera Sınırlarını belirle
    camera.setBounds(
      Rectangle.fromCenter(
          center: tiledMap.center, size: tiledMap.size - camera.viewport.size),
    );
  }

  @override
  void update(double dt) {
    super.update(dt);

    final joystickList = children.whereType<GameJoystick>();
    if (joystickList.isNotEmpty) {
      final joystick = joystickList.first; // Joystick'i bul
      final direction = joystick.relativeDelta; // Joystick'in hareket yönü

      if (direction != Vector2.zero()) {
        hero.position += direction * dt * 100; // Karakteri yönlendirin
        print("Hero Position: ${hero.position}");
      }
    } else {
      print("No joystick found.");
    }
  }
}

class Hero extends PositionComponent {
  final Sprite sprite;

  Hero({required this.sprite, required Vector2 position, required Vector2 size})
      : super(position: position, size: size);

  @override
  Future<void> onLoad() async {
    add(RectangleHitbox());
  }

  @override
  void render(Canvas canvas) {
    sprite.render(canvas, size: size);
  }
}


this joystick.dart 

import ‘package:flame/components.dart’;
import ‘package:flutter/material.dart’;

class GameJoystick extends JoystickComponent {
GameJoystick()
: super(
position:
Vector2(110, 940), // Joystick’in sol alt köşede olmasını sağlar
knob:
CircleComponent(radius: 15, paint: Paint()..color = Colors.white),
background: CircleComponent(
radius: 50,
paint: Paint()..color = Color.fromARGB(92, 36, 37, 38)),
);

}

This way, the joystick doesn't move the character.