如何在我的 Flutter 应用程序中向我的 Flutter 路由添加自定义转换答案

【问题标题】：How to add custom transitions to my Flutter route in my Flutter app如何在我的 Flutter 应用程序中向我的 Flutter 路由添加自定义转换
【发布时间】：2017-09-05 19:53:04
【问题描述】：

如何向我的 Flutter 路由添加自定义转换？这是我目前的路线结构。

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Yaip',
            theme: new ThemeData(
                primarySwatch: Colors.pink,
                brightness: Brightness.light
            ),
            home: new VerifyPhoneNumber(),
            routes: <String, WidgetBuilder>{
                '/verified': (BuildContext context) =>  new MobileNumberVerified(),
                '/setupprofile': (BuildContext context) =>  new SetUpProfile()
            },
        );
    }
}

【问题讨论】：

标签： flutter dart routes transition

【解决方案1】：

使用PageRouteBuilder:

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => Page2(),
    transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
    transitionDuration: Duration(milliseconds: 2000),
  ),
);

【讨论】：

【解决方案2】：

如果您希望所有路线都具有类似 iOS 的动画效果，您可以更改 MaterialApp 小部件的过渡主题以使用 CupertinoPageTransitionsBuilder

MaterialApp(
   theme: ThemeData(
   pageTransitionsTheme: PageTransitionsTheme(builders: {
   TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
   TargetPlatform.android: CupertinoPageTransitionsBuilder(),
   }),
...
)

【讨论】：

【解决方案3】：

您可以继承 MaterialPageRoute 并覆盖 buildTransitions。查看this Stack Overflow answer 示例代码。

【讨论】：

如果您能为我提供一个具有这种结构的示例，我们将不胜感激。以及如何根据我在同一个应用程序中的要求使用不同的转换方式
我编辑了我的答案以链接到我以前的 Stack Overflow 答案之一，其中包含示例代码。
我可以为进入和离开设置不同的过渡（即页面进入过渡和页面离开过渡），如何使过渡持续时间更快？
为什么不给命名路由做动画的额外参数对开发者有好处

【解决方案4】：

以防万一，如果您希望使用默认材料之外的其他包，那么 Flutter 中有一个漂亮的库/包可用，称为“Fluro”。您可以以更少的开销使用这个库。这是官方fluro的链接-https://pub.dartlang.org/packages/fluro 您可以从提供的示例目录中完全了解这一点。

【讨论】：

【解决方案5】：

使用PageRouteBuilder 进行自定义页面转换。可以实现各种类型的页面过渡效果。下面是一些带注释的自定义页面过渡，您可以取消注释其中一个并运行以查看它在不同过渡上的工作方式。

PageRouteBuilder _pageRouteBuilder() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return Demo2();
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // return SlideTransition(
        //   position: animation.drive(
        //     Tween<Offset>(begin: Offset(-1.0, 0.0), end: Offset.zero),
        //   ),
        //   child: SlideTransition(
        //     position: Tween<Offset>(
        //       begin: Offset.zero,
        //       end: Offset(0.0, 1.0),
        //     ).animate(secondaryAnimation),
        //     child: child,
        //   ),
        // );
        // return ScaleTransition(
        //   scale: animation.drive(
        //     Tween<double>(begin: 0.0, end: 1.0).chain(
        //       CurveTween(
        //         curve: Interval(0.0, 0.5, curve: Curves.elasticIn),
        //       ),
        //     ),
        //   ),
        //   child: ScaleTransition(
        //     scale: Tween<double>(begin: 1.5, end: 1.0).animate(
        //       CurvedAnimation(
        //         parent: animation,
        //         curve: Interval(0.5, 1.0, curve: Curves.elasticInOut),
        //       ),
        //     ),
        //     child: child,
        //   ),
        // );
        return ScaleTransition(
          scale: CurvedAnimation(parent: animation, curve: Curves.elasticInOut),
          child: child,
        );
      },
      transitionDuration: const Duration(seconds: 1),
    );
  }

现在假设我必须通过单击按钮打开一条新路线：

Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.push(context, _pageRouteBuilder());
            },
            child: Text('Go!'),
          ),
        ),
      ),
    );
  }

【讨论】：

【解决方案6】：

更好的方法是为命名路由创建一个带有字符串值的 RouteGenerator 类。这样，您可以从一个班级引用所有路线。 RouteGenerator 类包含一个方法：静态 Route handleRoute(RouteSettings routeSettings)，每个 MaterialPageRoute 都有 case 语句。

switch 语句将字符串与路由匹配，MaterialPageRoute 将小部件推送到堆栈上。您还可以访问传递给路由生成器的参数

在 main.dart 中

  onGenerateRoute: RouteGenerator.handleRoute,

从子部件导航

  Navigator.pushNamed(context, RouteGenerator.page1Page,
                                arguments: myCustomView)

类

 class RouteGenerator {
  static const String homePage = "/home";
  static const String page1Page = "/page1";
  static const String page2Page = "/page2";

  RouteGenerator._();
  static Route<dynamic> handleRoute(RouteSettings routeSettings) {
   Widget childWidget;
   switch (routeSettings.name) {
    case homePage:
    {
      childWidget = HomePageWidget(title: 'Performance Reviews');
    }
    break;
  case page1Page:
    {
      childWidget = Page1Widget();
    }
    break;
  case page2Page:
    {
      final args = routeSettings.arguments as MyCustomView;
      childWidget = Page2Widget(args);
    }
    break;
  default:
    throw FormatException("Route Not Found");
  }
  return MaterialPageRoute(builder: (context) => childWidget);
 }
 }

【讨论】：