how to POP with animation in flutter

Question

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);
              })
        ],
      ),
    );
  }

Answer 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 !

Answer 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();