Stop the animations from previous screens when transitioning

[cekrozl1]

Hi !

Can you please have a look at this post: https://github.com/flutter/flutter/issues/112824 and more specifically, the 2 last videos.

It seems that the page_transition widget is not stopping the animations from the previous pages while using a MaterialPageRoute is. Can you confirm this? Here is the full main.dart I used for this test.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:page_transition/page_transition.dart';

void main() {
  runApp(const MaterialApp(
    showPerformanceOverlay: true,
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: Wrap(children: [
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          ElevatedButton(
            child: const Text('Open route'),
            onPressed: () {
              Navigator.push(context,
                  PageTransition(child: SecondRoute(), type: PageTransitionType.bottomToTop)
                  // MaterialPageRoute(builder: (context) => const ),
                  );
            },
          ),
        ]),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: Wrap(children: [
          SizedBox(
              height: 100,
              child: Lottie.asset('assets/img/*-gradient-dots-bg.json', fit: BoxFit.contain)),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text('Go back!'),
          ),
        ]),
      ),
    );
  }
}

[kalismeras61]

Use latest version and set maintainState false.