tribu_route_transitions 是一个 Flutter 插件，用于在页面导航时添加自定义的过渡动画。它提供了多种内置的过渡效果，并且允许开发者自定义过渡动画。以下是如何使用 tribu_route_transitions 插件的详细步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 tribu_route_transitions 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  tribu_route_transitions: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 tribu_route_transitions 插件：

import 'package:tribu_route_transitions/tribu_route_transitions.dart';

3. 使用内置过渡动画

tribu_route_transitions 提供了多种内置的过渡动画，例如 SlideTransition、ScaleTransition、FadeTransition 等。你可以通过 RouteTransitions 类来使用这些过渡效果。

以下是一个使用 SlideTransition 的示例：

Navigator.push(
  context,
  RouteTransitions(
    context: context,
    child: SecondPage(),  // 要跳转的页面
    transitionType: TransitionType.slide,  // 过渡动画类型
    duration: Duration(milliseconds: 500),  // 动画持续时间
    direction: TransitionDirection.left,  // 滑动方向
  ),
);

4. 自定义过渡动画

如果你想要自定义过渡动画，可以使用 CustomTransition 类。以下是一个自定义过渡动画的示例：

Navigator.push(
  context,
  RouteTransitions(
    context: context,
    child: SecondPage(),
    transitionType: TransitionType.custom,
    customTransition: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(
        scale: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
          parent: animation,
          curve: Curves.easeInOut,
        )),
        child: child,
      );
    },
    duration: Duration(milliseconds: 500),
  ),
);

5. 其他过渡动画

tribu_route_transitions 支持多种过渡动画类型，包括 fade、scale、rotate、size 等。你可以根据需求选择合适的过渡效果。

Navigator.push(
  context,
  RouteTransitions(
    context: context,
    child: SecondPage(),
    transitionType: TransitionType.fade,  // 淡入淡出效果
    duration: Duration(milliseconds: 500),
  ),
);

6. 返回时使用过渡动画

你还可以在返回页面时使用过渡动画，只需将 isReturn 参数设置为 true：

Navigator.pop(
  context,
  RouteTransitions(
    context: context,
    child: SecondPage(),
    transitionType: TransitionType.slide,
    duration: Duration(milliseconds: 500),
    isReturn: true,
  ),
);

7. 完整示例

以下是一个完整的示例，展示了如何使用 tribu_route_transitions 插件进行页面导航并添加过渡动画：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              RouteTransitions(
                context: context,
                child: SecondPage(),
                transitionType: TransitionType.slide,
                duration: Duration(milliseconds: 500),
                direction: TransitionDirection.left,
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(
              context,
              RouteTransitions(
                context: context,
                child: FirstPage(),
                transitionType: TransitionType.slide,
                duration: Duration(milliseconds: 500),
                direction: TransitionDirection.right,
                isReturn: true,
              ),
            );
          },
          child: Text('Go back to First Page'),
        ),
      ),
    );
  }
}