Flutter页面过渡动画插件go_router_page_transition的使用

在Flutter开发中，页面过渡动画可以让应用更加生动和流畅。go_router_page_transition 是一个强大的插件，可以轻松实现各种页面过渡效果。本文将详细介绍如何使用 go_router_page_transition 插件来为您的Flutter应用添加页面过渡动画。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 go_router 和 go_router_page_transition 的依赖项。确保版本号与最新稳定版本一致。

dependencies:
  go_router: ^9.0.3
  go_router_page_transition: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 配置路由

在项目中配置路由时，使用 GoRouterPageTransition 来定义页面之间的过渡动画。

示例代码

以下是一个完整的示例，展示如何使用 go_router_page_transition 实现页面过渡动画。

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:go_router_page_transition/go_router_page_transition.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }

  // 配置路由
  final GoRouter _router = GoRouter(
    routes: [
      // 主页路由
      GoRoute(
        path: '/',
        builder: (context, state) => HomePage(),
      ),
      // 第二页路由
      GoRoute(
        path: '/second',
        builder: (context, state) => SecondPage(),
        pageBuilder: (context, state) => MaterialPage<void>(
          child: FadeTransitionPage(
            child: SecondPage(),
          ),
        ),
      ),
    ],
  );
}

// 主页
class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到第二页，并指定过渡动画
            context.go('/second', extra: {'transitionType': 'fade'});
          },
          child: Text('跳转到第二页'),
        ),
      ),
    );
  }
}

// 第二页
class SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(
        child: Text('这是第二页'),
      ),
    );
  }
}

3. 自定义过渡动画

在上面的示例中，我们使用了 FadeTransitionPage 来实现淡入淡出的过渡效果。go_router_page_transition 提供了多种内置的过渡动画类型，例如滑动、缩放等。您可以根据需求选择合适的动画。

常见的过渡动画类型

• FadeTransitionPage：淡入淡出效果。
• ScaleTransitionPage：缩放效果。
• SlideTransitionPage：滑动效果。
• CustomTransitionPage：自定义过渡效果。

例如，如果要使用滑动效果，可以将 FadeTransitionPage 替换为 SlideTransitionPage：

pageBuilder: (context, state) => MaterialPage<void>(
  child: SlideTransitionPage(
    child: SecondPage(),
  ),
),

4. 动态切换动画类型

如果您希望在不同场景下动态切换动画类型，可以通过传递参数来控制动画效果。例如，在 HomePage 中传递动画类型：

onPressed: () {
  // 动态传递动画类型
  context.go('/second', extra: {'transitionType': 'scale'});
},

然后在 SecondPage 中根据参数动态设置动画类型：

[@override](/user/override)
Widget build(BuildContext context) {
  final transitionType = ModalRoute.of(context)?.settings.extra;

  return Scaffold(
    appBar: AppBar(title: Text('第二页')),
    body: Center(
      child: Text('这是第二页'),
    ),
    // 根据参数动态设置动画类型
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.android: ScaleTransitionPage(),
        TargetPlatform.iOS: FadeTransitionPage(),
      },
    ),
  );
}