custom_route_transition_fp 是一个用于 Flutter 的自定义路由过渡动画插件。它允许开发者通过简单的配置实现页面之间流畅的过渡效果。下面是如何使用这个插件的详细步骤。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 custom_route_transition_fp 依赖：

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

然后运行 flutter pub get 来安装插件。

2. 导入插件

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

import 'package:custom_route_transition_fp/custom_route_transition_fp.dart';

3. 使用自定义路由过渡动画

custom_route_transition_fp 提供了 CustomRouteTransition 类，你可以通过它来定义自定义的过渡动画。

示例 1: 基本使用

Navigator.push(
  context,
  CustomRouteTransition(
    child: SecondScreen(),
    transitionType: TransitionType.fade, // 使用淡入淡出效果
    duration: Duration(milliseconds: 500), // 过渡动画持续时间
  ),
);

示例 2: 自定义过渡动画

你可以通过 transitionBuilder 参数来自定义过渡动画：

Navigator.push(
  context,
  CustomRouteTransition(
    child: SecondScreen(),
    transitionBuilder: (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),
  ),
);

示例 3: 使用内置过渡类型

CustomRouteTransition 提供了一些内置的过渡类型，你可以通过 transitionType 参数来使用它们：

Navigator.push(
  context,
  CustomRouteTransition(
    child: SecondScreen(),
    transitionType: TransitionType.slide, // 使用滑动效果
    duration: Duration(milliseconds: 500),
  ),
);

内置的过渡类型包括：

• TransitionType.fade: 淡入淡出
• TransitionType.slide: 滑动
• TransitionType.scale: 缩放
• TransitionType.rotation: 旋转
• TransitionType.slideFade: 滑动并淡入淡出

4. 自定义过渡动画的更多选项

你还可以通过 CustomRouteTransition 的其他参数来进一步自定义过渡动画：

• curve: 动画曲线，默认为 Curves.easeInOut
• opaque: 页面是否不透明，默认为 true
• barrierDismissible: 是否可以通过点击屏障来关闭页面，默认为 false
• barrierColor: 屏障的颜色，默认为 null
• barrierLabel: 屏障的标签，默认为 null

5. 完整示例

以下是一个完整的示例，展示了如何使用 custom_route_transition_fp 插件实现自定义路由过渡动画：

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

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

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

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              CustomRouteTransition(
                child: SecondScreen(),
                transitionType: TransitionType.slide,
                duration: Duration(milliseconds: 500),
              ),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}