Flutter页面路由过渡动画插件route_transitions_snk的使用

简介

此插件帮助我们从零开始实现页面路由过渡动画。通过使用RouteTransitions类，可以轻松定义页面切换时的动画效果。

使用示例

基本用法

在以下代码中，我们将展示如何使用RouteTransitions来实现页面之间的过渡动画。

RouteTransitions(
    context: context,
    animation: AnimationType.fadeIn, // 动画类型
    duration: const Duration(milliseconds: 1000), // 动画持续时间
    replacement: true, // 是否替换当前页面
    child: ScreenTwo(), // 目标页面
);

完整示例代码

示例代码

import 'package:flutter/material.dart';

import 'package:route_transitions_snk/route_transitions_snk.dart';

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

// 主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 去掉调试标志
      title: 'CustomRoutePackage', // 应用名称
      initialRoute: 'screen1', // 初始路由
      routes: {
        'screen1': (_) => const OneScreen(), // 路由映射
        'screen2': (_) => const TwoScreen(),
      },
    );
  }
}

// 第一页
class OneScreen extends StatelessWidget {
  const OneScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen One'), // 标题
        backgroundColor: Colors.transparent, // 透明背景
        elevation: 0, // 不显示阴影
      ),
      backgroundColor: Colors.blue, // 蓝色背景
      body: Center(
        child: MaterialButton(
          onPressed: () {
            // 页面跳转并应用动画
            RouteTransitions(
              context: context,
              animation: AnimationType.fadeIn, // 淡入动画
              duration: const Duration(milliseconds: 1000), // 动画持续时间
              replacement: true, // 替换当前页面
              child: const TwoScreen(), // 跳转到目标页面
            );
          },
          elevation: 0, // 按钮无阴影
          color: Colors.blueAccent[100], // 按钮颜色
          shape: const StadiumBorder(), // 圆角按钮
          child: SizedBox(
            width: 100,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center, // 水平居中
              children: const [
                Icon(
                  Icons.arrow_forward, // 向右箭头图标
                  color: Colors.white,
                  size: 25,
                ),
                Text(
                  '2', // 数字2
                  style: TextStyle(color: Colors.white, fontSize: 22),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 第二页
class TwoScreen extends StatelessWidget {
  const TwoScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen Two'), // 标题
        backgroundColor: Colors.transparent, // 透明背景
        elevation: 0, // 不显示阴影
      ),
      backgroundColor: Colors.amber[700], // 橙色背景
      body: Center(
        child: MaterialButton(
          onPressed: () {
            // 返回上一页并应用动画
            RouteTransitions(
              context: context,
              animation: AnimationType.fadeIn, // 淡入动画
              replacement: true, // 替换当前页面
              child: const OneScreen(), // 返回到目标页面
            );
          },
          elevation: 0, // 按钮无阴影
          color: Colors.amber[100], // 按钮颜色
          shape: const StadiumBorder(), // 圆角按钮
          child: SizedBox(
            width: 100,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center, // 水平居中
              children: [
                Text(
                  '1', // 数字1
                  style: TextStyle(
                    color: Colors.amberAccent[700], // 文字颜色
                    fontSize: 22,
                  ),
                ),
                Icon(
                  Icons.arrow_back, // 向左箭头图标
                  color: Colors.amberAccent[700], // 图标颜色
                  size: 25,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}