Flutter自定义路由过渡动画插件custom_route_transitions_john00cristobal的使用

Route Transitions

该插件用于帮助实现页面之间的路由过渡动画。

Getting started

在开始使用此插件之前，请确保已经将 custom_route_transitions_john00cristobal 添加到项目的 pubspec.yaml 文件中，并通过 flutter pub get 安装依赖。

dependencies:
  custom_route_transitions_john00cristobal: ^版本号

Usage

以下是一个简单的示例，展示如何使用 RouteTransitions 插件来创建带有自定义动画的页面跳转。

示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      initialRoute: 'page1',
      routes: {
        'page1': (_) => Page1Page(), // 跳转到第一页
        'page2': (_) => Page2Page(), // 跳转到第二页
      },
    );
  }
}

class Page1Page extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page 1"),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.red,
      body: Center(
        child: MaterialButton(
          child: Text("Page 2"),
          color: Colors.white,
          onPressed: () {
            // 使用自定义路由过渡动画
            Navigator.push(
              context,
              RouteTransitions(
                context: context,
                child: Page2Page(),
                animation: AnimationType.fadeIn, // 设置动画类型为淡入
                duration: const Duration(milliseconds: 500), // 动画持续时间
              ),
            );
          },
        ),
      ),
    );
  }
}

class Page2Page extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page 2"),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.green,
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

更多关于Flutter自定义路由过渡动画插件custom_route_transitions_john00cristobal的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼•23 天前

更多关于Flutter自定义路由过渡动画插件custom_route_transitions_john00cristobal的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

custom_route_transitions_john00cristobal 是一个 Flutter 插件，用于自定义路由过渡动画。它允许你为页面之间的导航创建自定义的过渡效果，而不是使用默认的 Material 或 Cupertino 过渡动画。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  custom_route_transitions_john00cristobal: ^1.0.0

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

使用插件

以下是如何使用 custom_route_transitions_john00cristobal 插件来自定义路由过渡动画的基本步骤：

导入包：

import 'package:custom_route_transitions_john00cristobal/custom_route_transitions_john00cristobal.dart';

自定义过渡动画：

你可以使用 CustomRouteTransition 类来定义自定义的过渡动画。以下是一个简单的例子，展示了如何使用缩放过渡动画：

Navigator.push(
  context,
  CustomRouteTransition(
    transitionType: TransitionType.scale,
    duration: Duration(milliseconds: 500),
    reverseDuration: Duration(milliseconds: 500),
    child: YourDestinationPage(),
  ),
);

可用的过渡类型：

TransitionType 枚举提供了多种内置的过渡类型，包括：

TransitionType.fade：淡入淡出过渡。
TransitionType.scale：缩放过渡。
TransitionType.rotation：旋转过渡。
TransitionType.slide：滑动过渡。
TransitionType.size：大小过渡。

自定义过渡动画：

如果你想要更复杂的过渡动画，你可以使用 CustomRouteTransition.custom 构造函数来定义自己的过渡动画：

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

在这个例子中，transitionBuilder 允许你完全控制过渡动画的构建过程。

示例代码

以下是一个完整的示例，展示了如何使用 custom_route_transitions_john00cristobal 插件来创建自定义的缩放过渡动画：

import 'package:flutter/material.dart';
import 'package:custom_route_transitions_john00cristobal/custom_route_transitions_john00cristobal.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,
              CustomRouteTransition(
                transitionType: TransitionType.scale,
                duration: Duration(milliseconds: 500),
                reverseDuration: Duration(milliseconds: 500),
                child: DestinationPage(),
              ),
            );
          },
          child: Text('Go to Destination Page'),
        ),
      ),
    );
  }
}

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