'how to POP with animation in flutter

I am triggering a Navigator.pop event and I want to fade out the transition to the page. I have tried Fluro but not I'm not interested in implementing it.

This what I'm doing :

   Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Cart"),
        leading: Hero(
          tag: "cartIcon",
          child: Icon(Icons.shopping_cart, color: Colors.yellow),
        ),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                Navigator.pop(context);
              })
        ],
      ),
    );
  }

flutter flutter-animation

Solution 1:^[1]

No one answered, But i found the solution ,you can do like this using MaterialPageRoute class

CLASS:-

import 'package:flutter/material.dart';
class CustomNavRoute<T> extends MaterialPageRoute<T> {
  CustomNavRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    if (settings.isInitialRoute) return child;

    return new FadeTransition(opacity: animation, child: child);
  }
}

And Call the class like this :-

 Navigator.pushReplacement(context,CustomNavRoute(builder: (context) => IntroScreen()));

Also on push

Navigator.push(context, CustomNavRoute(builder: (context) => LoginSignup()));

This will apply fadein transition on PUSH and POP to page !

Solution 2:^[2]

the pop method use the same Route used in push method, so you can put the required animation in the push method, just make sure you add reverseTransitionDuration to the route to make its animation more noticeable.

//push to page2
Navigator.of(context).push(
  PageRouteBuilder(
    transitionDuration: Duration(seconds: 1),
    reverseTransitionDuration: Duration(seconds: 1),
    pageBuilder: (context, animation, secondaryAnimation) => page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final tween = Tween(begin: 0.0, end: 1.0);
      final fadeAnimation = animation.drive(tween);
      return FadeTransition(
        opacity: fadeAnimation,
        child: child,
      );
    },
  ),
);


//pop from page2
Navigator.of(context).pop();

Solution 3:^[3]

You should try using the page transition package
It is easy to use and handles bot pop and push operations and it is my personal favorite

import it in pubspec.yml file

page_transition:

Using it for the fade animation would be like this

Navigator.push(
     context,
     PageTransition(
     type: PageTransitionType.fade,
     child: SecondPage(),
     ),
   );

to go back to the previous screen, just call the normal 'pop'

Navigator.pop(context)

read more about the Transition package here: https://pub.dev/packages/page_transition

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rakesh Lanjewar
Solution 2	evals
Solution 3	Anthony Aniobi

'how to POP with animation in flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]