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

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

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

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

Answer 2

您可以进行子类化MaterialPageRoute和覆盖buildTransitions.查看此Stack Overflow答案以获取示例代码.

Answer 3

您可以使用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),
  ),
);