show transparent loader on page transition

Am trying to add Circle loader before the user rout to another page, i have installed the flutter_spinkit: ^5.1.0 package and imported it, i have used it on my navigation bar as follows:

 onTap: () {
                //Close the Navigation window
                Navigator.pop(context);

                //Loader Implementation
                Center(
                    child: SpinKitCircle(
                        color: Colors.purple,
                        size: 50.0,
                        duration: Duration(milliseconds: 5000)));

                //Rout to next page
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const MyChallenges()));
              },

the loader is not showing (ignored), am trying to show the loader on the page of context for like two seconds then user will be redirected to the other page, any ideas please. Thank you

CodePudding user response：

I think this would do the trick neatly, showDialog() would display the spinkit and with barrierDismissible: false property and WillPopScope() would prevent the user from popping the loader.

   Navigator.pop(context);

   showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
         return WillPopScope(
            onWillPop: () async {
               return false;
            },
            child:const SpinKitCircle(
               color: Colors.purple,
               size: 50.0,
            ),
         );
      },
   );

   await Future.delayed(const Duration(seconds:2), (){
      Navigator.pop(context);
   });

   Navigator.push(
      context,
      MaterialPageRoute(
         builder: (context) => const MyChallenges(),
      ),
   );

Also if you prefer to have a transparent background just set the barrierColor property of the showDialog() to either null or Colors.transparent.