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

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

路由过渡 (Route transitions)

custom_route_transitions_x 是一个用于修改路由过渡效果的 Flutter 插件。通过该插件，您可以轻松实现自定义的路由动画效果。

使用示例

以下是一个简单的使用示例，展示如何通过 RouteTranstions 来实现自定义的路由过渡动画。

示例代码

import 'package:flutter/material.dart';
import 'package:custom_route_transitions_x/custom_route_transitions_x.dart'; // 引入插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试标志
      title: 'Material App',             // 应用名称
      initialRoute: 'page1',             // 初始页面
      routes: {                          // 页面路由配置
        'page1': (_) => Page1(),         // 页面 1
        'page2': (_) => Page2(),         // 页面 2
      },
    );
  }
}

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(                     // 顶部导航栏
        title: Text('Page 1'),           // 标题
        centerTitle: true,               // 标题居中
        backgroundColor: Colors.transparent, // 透明背景
      ),
      backgroundColor: Colors.blue,      // 页面背景颜色
      body: Center(                      // 页面中心布局
        child: MaterialButton(            // 按钮
          onPressed: () {
            // 使用自定义路由过渡
            RouteTranstions(
              child: Page2(),               // 目标页面
              context: context,             // 当前上下文
              replacement: false,           // 是否替换当前路由
              animation: AnimationType.fadeIn, // 动画类型
              duration: const Duration(seconds: 1), // 动画持续时间
            );
          },
          child: const Text('Go to page2'), // 按钮文本
          color: Colors.white,              // 按钮背景颜色
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(                     // 顶部导航栏
        title: Text('Page 2'),           // 标题
        centerTitle: true,               // 标题居中
        backgroundColor: Colors.transparent, // 透明背景
      ),
      backgroundColor: Colors.blueGrey,  // 页面背景颜色
      body: Center(                      // 页面中心布局
        child: Text('Page 2'),           // 显示文字
      ),
    );
  }
}

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

1 回复

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


custom_route_transitions_x 是一个用于 Flutter 的自定义路由过渡动画插件，它允许开发者轻松地创建和应用自定义的页面切换动画。以下是使用该插件的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 custom_route_transitions_x 插件的依赖：

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

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

2. 导入包

在需要使用自定义路由过渡动画的文件中导入 custom_route_transitions_x 包：

import 'package:custom_route_transitions_x/custom_route_transitions_x.dart';

3. 使用自定义路由过渡动画

custom_route_transitions_x 提供了多种内置的过渡动画效果，如 FadeRoute、ScaleRoute、SlideRoute 等。你可以直接在 Navigator.push 中使用这些过渡动画。

示例 1: 使用 FadeRoute 过渡动画

Navigator.push(
  context,
  FadeRoute(
    page: SecondPage(), // 目标页面
    duration: Duration(milliseconds: 500), // 过渡动画持续时间
  ),
);

示例 2: 使用 SlideRoute 过渡动画

Navigator.push(
  context,
  SlideRoute(
    page: SecondPage(), // 目标页面
    direction: SlideDirection.left, // 滑动方向
    duration: Duration(milliseconds: 500), // 过渡动画持续时间
  ),
);

示例 3: 使用 ScaleRoute 过渡动画

Navigator.push(
  context,
  ScaleRoute(
    page: SecondPage(), // 目标页面
    duration: Duration(milliseconds: 500), // 过渡动画持续时间
  ),
);

4. 自定义过渡动画

如果你需要更复杂的自定义过渡动画，你可以继承 CustomPageRoute 并实现自己的 buildTransitions 方法。

示例: 自定义旋转过渡动画

class RotationRoute extends CustomPageRoute {
  RotationRoute({required Widget page, Duration duration = const Duration(milliseconds: 300)})
      : super(page: page, duration: duration);

  [@override](/user/override)
  Widget buildTransitions(BuildContext context, Animation<double> animation, Widget child) {
    return RotationTransition(
      turns: Tween<double>(begin: 0.0, end: 1.0).animate(animation),
      child: child,
    );
  }
}

// 使用自定义的旋转过渡动画
Navigator.push(
  context,
  RotationRoute(
    page: SecondPage(),
    duration: Duration(milliseconds: 500),
  ),
);

5. 退出页面时的过渡动画

默认情况下，退出页面时会使用与进入页面时相反的过渡动画。如果你需要自定义退出动画，可以在 CustomPageRoute 中重写 buildReverseTransitions 方法。

class CustomExitRoute extends CustomPageRoute {
  CustomExitRoute({required Widget page, Duration duration = const Duration(milliseconds: 300)})
      : super(page: page, duration: duration);

  [@override](/user/override)
  Widget buildTransitions(BuildContext context, Animation<double> animation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  }

  [@override](/user/override)
  Widget buildReverseTransitions(BuildContext context, Animation<double> animation, Widget child) {
    return SlideTransition(
      position: Tween<Offset>(begin: Offset.zero, end: Offset(-1.0, 0.0)).animate(animation),
      child: child,
    );
  }
}

// 使用自定义的退出过渡动画
Navigator.push(
  context,
  CustomExitRoute(
    page: SecondPage(),
    duration: Duration(milliseconds: 500),
  ),
);
回到顶部