custom_route_transitions_idbl 是一个用于 Flutter 的自定义路由过渡动画插件，它允许开发者轻松地创建和应用自定义的页面过渡动画。以下是如何使用该插件的基本步骤：

1. 添加依赖

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

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

然后运行 flutter pub get 来获取依赖。

2. 导入插件

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

import 'package:custom_route_transitions_idbl/custom_route_transitions_idbl.dart';

3. 使用自定义过渡动画

你可以使用 CustomRouteTransition 类来定义和应用自定义的过渡动画。以下是一个简单的示例，展示了如何在页面导航时使用自定义过渡动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transitions Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      onGenerateRoute: (settings) {
        if (settings.name == '/second') {
          return CustomRouteTransition(
            child: SecondPage(),
            transitionType: TransitionType.slideLeft, // 自定义过渡动画类型
            duration: Duration(milliseconds: 500), // 动画持续时间
          );
        }
        return null;
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

4. 支持的过渡动画类型

custom_route_transitions_idbl 插件提供了多种内置的过渡动画类型，你可以通过 transitionType 参数来选择：

• TransitionType.slideLeft: 从右向左滑动
• TransitionType.slideRight: 从左向右滑动
• TransitionType.slideUp: 从下向上滑动
• TransitionType.slideDown: 从上向下滑动
• TransitionType.fade: 渐隐渐显
• TransitionType.scale: 缩放过渡
• TransitionType.rotate: 旋转过渡
• TransitionType.custom: 自定义过渡动画

5. 自定义过渡动画

如果你想要创建自己的过渡动画，可以使用 TransitionType.custom，并通过 customTransition 参数传递一个 PageRouteBuilder：

CustomRouteTransition(
  child: SecondPage(),
  transitionType: TransitionType.custom,
  customTransition: (context, animation, secondaryAnimation, child) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset(1.0, 0.0),
        end: Offset.zero,
      ).animate(CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut,
      )),
      child: child,
    );
  },
);

6. 设置动画持续时间

你可以通过 duration 参数来设置动画的持续时间：

duration: Duration(milliseconds: 500),

7. 其他配置

你还可以通过 opaque、barrierDismissible 等参数来配置路由的其他行为。

CustomRouteTransition(
  child: SecondPage(),
  transitionType: TransitionType.slideLeft,
  duration: Duration(milliseconds: 500),
  opaque: false,
  barrierDismissible: true,
);