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

本文将介绍如何在Flutter项目中使用custom_route_transition_io插件来实现自定义路由过渡动画。通过该插件，您可以轻松创建各种复杂的路由过渡效果。

使用步骤

1. 添加依赖

首先，在pubspec.yaml文件中添加custom_route_transition_io依赖：

dependencies:
  custom_route_transition_io: ^1.0.0

然后运行以下命令以获取依赖：

flutter pub get

2. 创建自定义路由类

接下来，创建一个继承自PageRouteBuilder的自定义路由类，并设置所需的动画效果。

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

class CustomPageRoute<T> extends PageRouteBuilder<T> {
  final Widget page;

  CustomPageRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // 使用FadeTransition实现淡入淡出效果
            return FadeTransition(
              opacity: Tween<double>(begin: 0.0, end: 1.0).animate(animation),
              child: child,
            );
          },
        );
}

3. 使用自定义路由

在需要导航到新页面时，使用刚刚创建的CustomPageRoute类。

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

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              CustomPageRoute(
                page: SecondPage(),
              ),
            );
          },
          child: Text('跳转到第二页'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(child: Text('这是第二页')),
    );
  }
}

4. 运行效果

运行上述代码后，点击按钮会从主页跳转到第二页，过渡效果为淡入淡出。

5. 更多动画效果

除了淡入淡出效果，您还可以使用其他内置动画效果或自定义动画。例如，使用SlideTransition实现滑动效果：

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: Offset(1.0, 0.0), // 起始位置
      end: Offset(0.0, 0.0),   // 结束位置
    ).animate(animation),
    child: child,
  );
},

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

itying888 1楼•7 天前

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

custom_route_transition_io 是一个用于 Flutter 的自定义路由过渡动画插件。它允许开发者自定义页面之间的过渡动画，提供了比 Flutter 默认的 PageRouteBuilder 更灵活和强大的功能。

安装插件

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

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

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

使用插件

1. 导入包

在你的 Dart 文件中导入 custom_route_transition_io 包：

import 'package:custom_route_transition_io/custom_route_transition_io.dart';

2. 定义自定义过渡动画

你可以通过继承 CustomRouteTransition 类来定义自己的过渡动画。CustomRouteTransition 类提供了 buildTransitions 方法，你可以在这个方法中实现自定义的过渡效果。

class MyCustomRouteTransition extends CustomRouteTransition {
  [@override](/user/override)
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
        child: child,
      ),
    );
  }
}

3. 使用自定义过渡动画

在导航时，你可以使用 CustomRouteTransitionIO 来应用自定义过渡动画。例如：

Navigator.push(
  context,
  CustomRouteTransitionIO(
    builder: (context) => NewPage(),
    transition: MyCustomRouteTransition(),
  ),
);

4. 完整示例

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transition Demo',
      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,
              CustomRouteTransitionIO(
                builder: (context) => NewPage(),
                transition: MyCustomRouteTransition(),
              ),
            );
          },
          child: Text('Go to New Page'),
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('New Page')),
      body: Center(
        child: Text('This is the new page!'),
      ),
    );
  }
}

class MyCustomRouteTransition extends CustomRouteTransition {
  [@override](/user/override)
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
        child: child,
      ),
    );
  }
}