Search code examples
fluttertransitionflutter-animation

Flutter How to make a push() look like a pop()


I'm wondering how I can animate a Navigator.of(context).push(...) to appear like a Navigator.of(context).pop(...). This would mean the current screen slides away to reveal the next screen below. I'm generally new to custom animations and would love the help building one. Thanks!

Here is the code where the animation would occur:

FlatButton(
   child: const Text('Logout',),
   onPressed: () {
      Login.handleSignOut();         
      Navigator.of(context).pushReplacementNamed(Login.routeName);
   }
),

Solution

  • Navigator.pushReplacement(
         context,
         PageRouteBuilder(
         pageBuilder: (_, __, ___) => Login(),
         transitionDuration: Duration(seconds: 1),
         transitionsBuilder: (_, anim, __, child) =>
             FadeTransition(opacity: anim, child: child),
         ),
    );
    

    Here in transition builder make your own transition.