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

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

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

Answer 4

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

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

Answer 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!'),
          ),
        ),
      ),
    );
  }

Answer 6

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

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

在 main.dart

  onGenerateRoute: RouteGenerator.handleRoute,

从 childwidget 导航

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

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

6 个答案: