如何在我的颤动应用程序中向我的颤动路线添加自定义过渡

Question

如何向我的颤动路线添加自定义过渡。这是我目前的路线结构

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

Answer 1

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

Answer 2

你可以使用PageRouteBuilder。

以下示例显示导航到第二个屏幕时的FadeTransition。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation1, animation2) {
      return SecondPage();
    },
    transitionsBuilder: (context, animation1, animation2, child) {
      return FadeTransition(
        opacity: animation1,
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 2000),
  ),
);

Answer 3

如果您希望使用除默认材料之外的其他包装，那么有一个漂亮的库/包可用于称为“Fluro”的颤振。您可以以较少的开销使用此库。这里是官方fluro的链接 - https://pub.dartlang.org/packages/fluro你可以从提供的示例目录中完全学到这一点。

Answer 4

您可以更改MaterialApp小部件的过渡主题以使用CupertinoPageTransitionsBuilder，如果您想要所有路径的iOS动画

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