如何在颤振中使用动画进行 POP

Question

我正在做 Navigator.pop 操作，我想淡出过渡到页面。我已经尝试过 Fluro 但没有兴趣实施它。

这是我在做什么：-

 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

没有人回答，但我找到了解决方案，您可以使用 MaterialPageRoute 类这样做

班级：-

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

并像这样调用类：-

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

也在推送

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

这将在 PUSH 和 POP 上应用淡入过渡到页面！

Answer 2

pop方法使用与push方法相同的Route，因此您可以将所需的动画放在push方法中，只需确保添加reverseTransitionDuration到路线中以使其动画更加明显。

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