如何根据用户操作在 Flutter 中的 Navigator.pop() 上设置不同的过渡动画？

Question

在我的 Flutter 项目中有多个屏幕，我想创建一个带有 2 个按钮的屏幕：

• 第一个按钮关闭当前屏幕，并Navigator.pop()带有一个过渡，当前屏幕向右消失
• 第二个按钮也会用 关闭当前屏幕Navigator.pop()，但这次屏幕消失到底部

到目前为止，我发现的每个示例都允许我在弹出屏幕时仅设置一种可能的转换。

另外，我使用命名路线在我的应用程序中导航。

如何根据用户点击的按钮自定义弹出动画？

谢谢。

Answer 1

无论您定义为路线动画，它都会反转并用作弹出导航。
根据您的情况，您可以使用不同的动画来推动每个动画。
您可以创建自定义动画并定义动画并使用它来代替material page router

   import 'package:flutter/material.dart';
class MyCustomRoute extends PageRouteBuilder {
  final Widget widget;
  MyCustomRoute({this.widget})
    : super(
        pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
          return widget;
        },
        transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
          return new ScaleTransition(
            scale: new Tween<double>(
              begin: 0.0,
              end: 1.0,
            ).animate(
                CurvedAnimation(
                  parent: animation,
                  curve: Interval(
                    0.00,
                    0.50,
                    curve: Curves.bounceIn,
                  ),
                ),
              ),
            child: ScaleTransition(
                     scale: Tween<double>(
                       begin: 1.5,
                       end: 1.0,
                     ).animate(
                       CurvedAnimation(
                         parent: animation,
                         curve: Interval(
                           0.50,
                           1.00,
                           curve: Curves.easeIn,
                         ),
                       ),
                     ),
                     child: child,
                   ),
           );
         }
      );
}

实施

onPressed: () {
  Navigator.push(context,
      new MyCustomRoute (widget: Secondpage()));
},

流行

 onPressed: () {
                  Navigator.pop();// will reverse the animation
                },