I want to when i am click special button and show firstly lottie animation screen then navigate another page, how can i do this ? Thank you so much

InkWell(
                        onTap: () {
                          showDialog(
                              context: context,
                              builder: (context) => Lottie.asset(
                                  'assets/lotties/rocket.json',
                                  repeat: true,
                                  animate: true)).then((value) =>
                              Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) => SecondScreen())));
                        },

CodePudding user response：

To navigate after Lottie Animation has ended you have to do the following:

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin{

  late final AnimationController _controller;
  
  @override
  void initState() {
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 600));

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Lottie.network(
        'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
        controller: _controller,
        onl oaded: (composition) {
          // Configure the AnimationController with the duration of the
          // Lottie file and start the animation.
          _controller
            ..duration = composition.duration
            ..forward().then((value) => Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => Page2())));


        },
      ),
    );
  }

}