custom_route_transitions_jmabar 是一个 Flutter 插件，用于实现自定义的路由过渡动画。通过这个插件，你可以轻松地为你的 Flutter 应用添加各种过渡效果，比如淡入淡出、滑动、缩放等。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  custom_route_transitions_jmabar: ^1.0.0  # 请使用最新的版本号

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

使用插件

1. 导入插件

import 'package:custom_route_transitions_jmabar/custom_route_transitions_jmabar.dart';

2. 基本使用

假设你有一个 FirstScreen 和一个 SecondScreen，你想要从 FirstScreen 导航到 SecondScreen，并且使用自定义的过渡动画。

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

class FirstScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              CustomRouteTransition(
                child: SecondScreen(),
                transitionType: TransitionType.slideRight,
                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: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}

3. 支持的过渡类型

custom_route_transitions_jmabar 支持多种过渡类型，你可以通过 transitionType 参数来指定：

• TransitionType.fade: 淡入淡出
• TransitionType.slideRight: 从右向左滑动
• TransitionType.slideLeft: 从左向右滑动
• TransitionType.slideTop: 从下向上滑动
• TransitionType.slideBottom: 从上向下滑动
• TransitionType.scale: 缩放效果
• TransitionType.rotate: 旋转效果
• TransitionType.size: 大小变化效果

4. 自定义过渡动画

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

Navigator.push(
  context,
  CustomRouteTransition(
    child: SecondScreen(),
    transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(
        scale: animation,
        child: child,
      );
    },
    duration: Duration(milliseconds: 500),
  ),
);

示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transitions Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              CustomRouteTransition(
                child: SecondScreen(),
                transitionType: TransitionType.slideRight,
                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: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}