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

在Flutter开发中，路由过渡动画可以为应用带来更好的用户体验。本文将介绍如何使用custom_route_transition_practice插件来实现自定义路由过渡动画。

使用步骤

1. 添加依赖

首先，在项目的pubspec.yaml文件中添加custom_route_transition_practice依赖：

dependencies:
  custom_route_transition_practice: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 创建路由配置

接下来，我们创建一个简单的Flutter应用，并使用custom_route_transition_practice插件来实现自定义路由过渡动画。

示例代码

以下是完整的示例代码，展示了如何使用该插件实现从Page1跳转到Page2时的自定义动画效果。

// example/main.dart
import 'package:flutter/material.dart';
import 'package:custom_route_transition_practice/custom_route_transition_practice.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: 'Flutter Demo',
      initialRoute: 'page1', // 初始路由
      routes: {
        'page1': (context) => Page1(), // 路由映射
        'page2': (context) => Page2(),
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
        backgroundColor: Colors.transparent, // 设置透明背景
      ),
      backgroundColor: Colors.blue, // 页面背景颜色
      body: Center(
        child: MaterialButton(
          child: Text("Go to Page 2"), // 按钮文本
          color: Colors.white, // 按钮颜色
          onPressed: () {
            // 使用RouteTransitions进行页面跳转
            RouteTransitions(
              context: context,
              child: Page2(), // 目标页面
              animation: AnimationType.fadeIn, // 动画类型
              duration: Duration(seconds: 2), // 动画持续时间
              replacement: true, // 是否替换当前路由
            );
          },
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
        backgroundColor: Colors.transparent, // 设置透明背景
      ),
      backgroundColor: Colors.blueGrey, // 页面背景颜色
      body: Center(
        child: Text("Page2"), // 页面中心文本
      ),
    );
  }
}

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

1 回复

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


在 Flutter 中，自定义路由过渡动画可以通过 PageRouteBuilder 或 CustomTransitionPage 来实现。为了简化这个过程，你可以创建一个自定义的路由过渡动画插件，比如 custom_route_transition_practice。以下是如何使用这个插件的步骤：

1. 添加依赖

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

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

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:custom_route_transition_practice/custom_route_transition_practice.dart';

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

假设你已经定义了一个自定义的过渡动画，你可以使用 CustomRouteTransition 来导航到新页面。

Navigator.push(
  context,
  CustomRouteTransition(
    builder: (context) => NewPage(),  // 新页面的构建器
    transitionType: TransitionType.fade,  // 过渡动画类型
    duration: Duration(milliseconds: 500),  // 动画持续时间
  ),
);

4. 自定义过渡动画

你可以通过 transitionType 参数来选择不同的过渡动画类型，比如 fade, slide, scale, rotate 等。你也可以通过 transitionBuilder 参数来自定义过渡动画。

Navigator.push(
  context,
  CustomRouteTransition(
    builder: (context) => NewPage(),
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    duration: Duration(milliseconds: 500),
  ),
);

5. 完整示例

以下是一个完整的示例，展示了如何使用 custom_route_transition_practice 插件进行自定义路由过渡动画：

import 'package:flutter/material.dart';
import 'package:custom_route_transition_practice/custom_route_transition_practice.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('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              CustomRouteTransition(
                builder: (context) => NewPage(),
                transitionType: TransitionType.slide,
                duration: Duration(milliseconds: 500),
              ),
            );
          },
          child: Text('Go to New Page'),
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

6. 自定义过渡动画类型

你可以在 CustomRouteTransition 中通过 transitionType 参数选择不同的过渡动画类型，或者通过 transitionBuilder 参数完全自定义过渡动画。

Navigator.push(
  context,
  CustomRouteTransition(
    builder: (context) => NewPage(),
    transitionType: TransitionType.rotate,  // 选择旋转过渡动画
    duration: Duration(milliseconds: 500),
  ),
);

7. 自定义过渡动画

如果你想完全自定义过渡动画，可以使用 transitionBuilder 参数：

Navigator.push(
  context,
  CustomRouteTransition(
    builder: (context) => NewPage(),
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return ScaleTransition(
        scale: Tween<double>(begin: 0.0, end: 1.0).animate(animation),
        child: child,
      );
    },
    duration: Duration(milliseconds: 500),
  ),
);
回到顶部