How to run sprite sheet frame by frame in flutter flame?

I wrote a code to play a sprite sheet frame by frame, but unfortunately, it's not playing correctly. It's moving to the right side. The sprites on the sprite sheet are dancing sprites, so when played frame by frame, it should show like an dancing animation video. I hope you understand what I mean . If you know how to resolve this issue and play the sprite sheet frame by frame, help me. Actually, I have no idea what the error is with the sprite sheet or code.

code

class _GameScreenState extends State<GameScreen> {
  @override
  void initState() {
    SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
    super.initState();
  }
  late double width, height;
  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    Size screenSize = MediaQuery.of(context).size;
    double aspectRatio = screenSize.height / screenSize.width;
    return Scaffold(
      backgroundColor: Colors.amber,
      body: AspectRatio(
        aspectRatio: aspectRatio,
        child: GameWidget(
          game: Game(context),
        ),
      ),
    );
  }
}

class Game extends FlameGame {
  BuildContext context;

  Game(this.context);

  SpriteAnimationComponent animationComponent1 =
  SpriteAnimationComponent(size: Vector2(840, 440));


  @override
  Color backgroundColor() => const Color(0xFFFFC107);

  @override
  Future<void>? onLoad() async {
    super.onLoad();
    await loadAnimations();
    add(animationComponent1);

    animationComponent1.position = Vector2(1, 1);

  }

  Future<void> loadAnimations() async {
    SpriteSheet spriteSheet =
    SpriteSheet(image: await images.load('spritesheet.png'),  srcSize: Vector2(1226, 1226));
    SpriteAnimation spriteAnimation =
    spriteSheet.createAnimation(row: 0, stepTime: 0.7, from: 5, to: 24);

    animationComponent1.animation = spriteAnimation;
  }
}

sprite sheet image url

https://drive.google.com/file/d/1obZBPhgn2UMhaBvXBvW3dkg7I02a2ksJ/view?usp=sharing

screenshot of UI

update code video url

https://drive.google.com/file/d/1y6gm77-OkLkeJTpv9AGE1sgodqANO_nl/view?usp=share_link

    class _GameScreenState extends State<GameScreen> {
      @override
      void initState() {
        SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
        super.initState();
      }
      late double width, height;
      @override
      Widget build(BuildContext context) {
        width = MediaQuery.of(context).size.width;
        height = MediaQuery.of(context).size.height;
        Size screenSize = MediaQuery.of(context).size;
        double aspectRatio = screenSize.height / screenSize.width;
        return Scaffold(
          backgroundColor: Colors.amber,
          body: AspectRatio(
            aspectRatio: aspectRatio,
            child: GameWidget(
              game: Game(context,screenSize),
            ),
          ),
        );
      }
    }
    
    class Game extends FlameGame {
  BuildContext context;
  Size screenSize;
  Game(this.context, this.screenSize);

  SpriteAnimationComponent animationComponent1 =
      SpriteAnimationComponent(size: Vector2(840, 440));

  @override
  Color backgroundColor() => const Color(0xFFFFC107);

  @override
  Future<void>? onLoad() async {
    super.onLoad();
    await loadAnimations();
    add(animationComponent1);
//new code
    animationComponent1.position = Vector2(
      screenSize.width / 2 - animationComponent1.size.x / 2,
      screenSize.height / 2 - animationComponent1.size.y / 2,
    );
  }

  Future<void> loadAnimations() async {
    SpriteSheet spriteSheet = SpriteSheet(
        image: await images.load('spritesheet.png'),
        srcSize: Vector2(1226, 1226));
    SpriteAnimation spriteAnimation =
        spriteSheet.createAnimation(row: 0, stepTime: 0.7, from: 5, to: 24);

    animationComponent1.animation = spriteAnimation;
  }
}