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

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

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: "page1",
      routes: {"page1": (_) => Page1(), "page2": (_) => Page2()},
    );
  }
}

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("页面1"),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          child: Text("前往页面2"),
          color: Colors.white,
          onPressed: () {
            // 使用默认路由跳转
            // Navigator.push(context, MaterialPageRoute(builder: (_) => Page2()));
            // Navigator.pushNamed(context, "page2");

            // 使用自定义过渡动画
            RouteTransitions(
              context: context,
              child: Page2(),
              animation: AnimationType.fadeIn,
              duration: Duration(milliseconds: 300),
              replacement: true,
            );
          },
        ),
      ),
    );
  }
}

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

使用说明

custom_route_transition_fa 插件可以帮助你在 Flutter 中实现自定义的路由过渡动画。以下是如何在你的项目中使用该插件的步骤：

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  custom_route_transition_fa: ^1.0.0

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

步骤 2: 创建自定义过渡动画

在上面的示例代码中，我们展示了如何使用 RouteTransitions 类来创建一个简单的过渡动画。以下是关键代码片段的详细解释：

RouteTransitions(
  context: context,
  child: Page2(),
  animation: AnimationType.fadeIn,
  duration: Duration(milliseconds: 300),
  replacement: true,
);

• context: 当前的 BuildContext。
• child: 要导航到的目标页面。
• animation: 动画类型，例如 AnimationType.fadeIn。
• duration: 动画持续时间。
• replacement: 是否替换当前页面（如果为 true，则使用 Navigator.pushReplacement 方法）。

步骤 3: 在页面之间导航

在上面的示例中，我们在 Page1 页面上添加了一个按钮，当点击时会触发自定义的过渡动画来跳转到 Page2 页面。

完整示例代码

下面是完整的示例代码，你可以将其复制到你的项目中并运行：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: "page1",
      routes: {"page1": (_) => Page1(), "page2": (_) => Page2()},
    );
  }
}

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("页面1"),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          child: Text("前往页面2"),
          color: Colors.white,
          onPressed: () {
            RouteTransitions(
              context: context,
              child: Page2(),
              animation: AnimationType.fadeIn,
              duration: Duration(milliseconds: 300),
              replacement: true,
            );
          },
        ),
      ),
    );
  }
}

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