flutter_page_transition

此包提供精美的页面过渡效果。

transitions

用法

非常易于使用！
您应该确保将 `page_transition` 作为依赖项添加到您的 Flutter 项目中。

dependencies:
  page_transition: "^1.1.5"

然后您可以使用下面的示例。

Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.upToDown, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.downToUp, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.scale, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rotate, duration: Duration(second: 1), child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeftWithFade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRightWithFade, child: DetailScreen()));

预定义路由的用法

首先，像下面一样在 `MaterialApp` 小部件中定义 `onGenerateRoute` 属性，然后在 switch 语句中您可以过渡到您的新路由。

  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/second':
        return PageTransition(child: SecondPage(), type: PageTransitionType.scale);
        break;
      default:
        return null;
    }
  },

之后，您可以像这样使用您的新路由。

Navigator.pushNamed(context, '/second');

使用带有 RouteSettings 的预定义路由

首先，像下面一样在 `MaterialApp` 小部件中定义 `onGenerateRoute` 属性，然后在 switch 语句中您可以过渡到您的新路由。

   onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/second':
            return PageTransition(
              child: SecondPage(),
              type: PageTransitionType.scale,
              settings: settings,
            );
            break;
          default:
            return null;
        }
      },

之后，您可以像这样使用您的新路由。

Navigator.pushNamed(context, '/second', arguments: "arguments data");

有关更多详细信息，您可以查看示例项目。

过渡类型

  • 淡入淡出
  • 从右到左
  • 从左到右
  • 从上到下
  • 从下到上
  • 缩放（带对齐方式）
  • 旋转（带对齐方式）
  • 尺寸（带对齐方式）
  • 从右到左淡入,
  • 从左到右淡入,

曲线

您可以使用任何类型的 `CurveAnimation` 曲线。

对齐方式

您可以使用尺寸、缩放和旋转变换的 对齐方式。

贡献

欢迎 Pull requests。对于重大更改，请先打开一个 issue 来讨论您想进行的更改。

请确保适当地更新测试。

GitHub

https://github.com/kalismeras61/flutter_page_transition