Flutter页面路由过渡动画插件route_transitions的使用

Route transitions

Route transitions 插件支持最新的Dart空安全特性。该包已被重写，以使用友好的路由函数进行导航，即使您最喜欢路由转换，也可以使用 transitionBuilder 构建自定义动画！

如何使用

要使用此插件，首先需要导入 route_transitions 包：

import 'package:route_transitions/route_transitions.dart';

然后可以像下面这样使用预定义的路由转换方法来实现页面跳转，并带有动画效果：

ElevatedButton(
  onPressed: () => pushWidget(
    newPage: Dashboard(),
    context: context,
  ),
  child: Text("Push page"),
),

以上代码实现了点击按钮后，从当前页面跳转到 Dashboard 页面，并且默认带有从下到上的滑动动画。

友好的API

该插件提供了非常友好的API，可以通过以下链接查看更详细的例子：example/lib/main.dart

自定义动画与customAnimationWidget

如果您想要创建自定义动画，可以使用 customAnimationWidget 方法。例如，下面是一个缩放动画的例子：

customAnimationWidget(
  newPage: YourPage(),
  context: context,
  transitionBuilder: (context, animation, secondaryAnimation, child) {
    var begin = 0.0;
    var end = 1.0;
    var curve = Curves.easeIn;

    var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

    return ScaleTransition(
      scale: animation.drive(tween),
      child: child,
    );
  },
)

这段代码将为您的页面添加一个渐进式的缩放动画效果。

完整的示例Demo

接下来提供一个完整的示例demo，它展示了如何在Flutter应用中集成和使用route_transitions插件的不同类型的路由过渡动画。

import 'package:flutter/material.dart';
import 'package:route_transitions/route_transitions.dart';

void main() => runApp(MyApp());

const TextStyle style = TextStyle(fontSize: 22, color: Colors.white);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Route transitions',
      theme: ThemeData.dark(),
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Route transitions"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => pushWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Push page"),
            ),
            ElevatedButton(
              onPressed: () => fadeWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Fade in"),
            ),
            ElevatedButton(
              onPressed: () => slideRightWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Slide from right"),
            ),
            ElevatedButton(
              onPressed: () => slideLeftWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Slide from left"),
            ),
            ElevatedButton(
              onPressed: () => slideUpWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Slide from up"),
            ),
            ElevatedButton(
              onPressed: () => slideDownWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Slide from down"),
            ),
            ElevatedButton(
              onPressed: () => scaleWidget(
                newPage: Dashboard(),
                context: context,
              ),
              child: Text("Scale page"),
            ),
            ElevatedButton(
              onPressed: () => customAnimationWidget(
                newPage: Dashboard(),
                context: context,
                transitionBuilder: (context, animation, secondaryAnimation, child) {
                  var begin = 0.0;
                  var end = 1.0;
                  var curve = Curves.easeIn;

                  var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

                  return ScaleTransition(
                    scale: animation.drive(tween),
                    child: child,
                  );
                },
              ),
              child: Text("Custom animation"),
            ),
          ],
        ),
      ),
    );
  }
}

class Dashboard extends StatelessWidget {
  const Dashboard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dashboard"),
        centerTitle: true,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => pop(context),
          child: Text("Go back !"),
        ),
      ),
    );
  }
}

这个完整的demo包含了多种不同的页面切换动画效果，您可以直接复制并在自己的项目中运行，体验各种动画效果。