transition_customer 是一个用于 Flutter 的自定义过渡动画插件，它允许开发者轻松地在页面导航之间添加自定义的过渡效果。使用这个插件，你可以创建各种复杂的动画效果，而不需要手动编写大量的动画代码。

以下是使用 transition_customer 插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:transition_customer/transition_customer.dart';

3. 使用 TransitionCustomer 进行页面导航

TransitionCustomer 提供了多种内置的过渡动画，你可以直接使用它们，也可以自定义过渡动画。

使用内置过渡动画

Navigator.push(
  context,
  TransitionCustomer(
    child: YourTargetPage(),  // 你的目标页面
    transitionType: TransitionType.fade,  // 内置的过渡类型
    duration: Duration(milliseconds: 300),  // 动画持续时间
  ),
);

TransitionType 支持多种内置的过渡类型，例如：

• TransitionType.fade：淡入淡出
• TransitionType.slide：滑动
• TransitionType.scale：缩放
• TransitionType.rotation：旋转
• TransitionType.custom：自定义过渡动画

自定义过渡动画

如果你想使用自定义的过渡动画，可以使用 TransitionType.custom 并提供一个 PageTransitionsBuilder：

Navigator.push(
  context,
  TransitionCustomer(
    child: YourTargetPage(),
    transitionType: TransitionType.custom,
    customTransitionBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    duration: Duration(milliseconds: 300),
  ),
);

在这个例子中，我们使用 FadeTransition 来创建一个自定义的淡入淡出效果。你可以根据需要替换为其他动画效果。

4. 返回页面时的过渡动画

默认情况下，TransitionCustomer 会自动处理返回页面时的过渡动画。你也可以通过设置 reverseDuration 来控制返回动画的持续时间：

Navigator.push(
  context,
  TransitionCustomer(
    child: YourTargetPage(),
    transitionType: TransitionType.fade,
    duration: Duration(milliseconds: 300),
    reverseDuration: Duration(milliseconds: 200),  // 返回动画的持续时间
  ),
);

5. 完整示例

以下是一个完整的示例，展示了如何使用 TransitionCustomer 插件进行页面导航：

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

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

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              TransitionCustomer(
                child: SecondPage(),
                transitionType: TransitionType.slide,
                duration: Duration(milliseconds: 300),
              ),
            );
          },
          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);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}