how to POP with animation in flutter

user_7416454 0
Viewed 11020

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-animation flutter
3 Answers

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 !

user_74164540

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

Use different animation when push and pop, you can do it like this in CustomPageRouteBuilder

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    final PageTransitionsTheme theme = Theme.of(context).pageTransitionsTheme;
    Animation<double> onlyForwardAnimation;
    switch (animation.status) {
      case AnimationStatus.reverse:
      case AnimationStatus.dismissed:
        onlyForwardAnimation = kAlwaysCompleteAnimation;
        break;
      case AnimationStatus.forward:
      case AnimationStatus.completed:
        onlyForwardAnimation = animation;
        break;
    }
    return theme.buildTransitions<T>(this, context, onlyForwardAnimation, secondaryAnimation, child);
  }

check flutter issue 25338 and github

user_15012700
Related