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

发布于 1周前 作者 vueper 来自 Flutter

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

路由过渡（Route Transitions）

此插件帮助你轻松地实现不同屏幕之间的过渡动画。

开始使用（Getting started）

使用方法（Usage）

RouteTransition(
  context: context, // BuildContext
  child: const Page2Page(), // 目标页面组件
  animation: AnimationType.fadeIn, // 动画类型
  duration: const Duration(seconds: 1), // 动画持续时间
  replacement: true // 是否替换当前页面
);

完整示例代码（Complete Example Code）

以下是完整的示例代码，演示如何在Flutter应用中使用custom_route_transition_j插件来实现自定义路由过渡动画。

import 'package:flutter/material.dart';
import 'package:custom_route_transition_j/custom_route_transition_j.dart'; // 导入自定义路由过渡插件

void main() => runApp(const MyApp()); // 应用入口

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 去除调试标志
      title: 'Material App', // 应用标题
      initialRoute: 'page1', // 初始路由
      routes: { // 定义路由
        'page1': (context) => const Page1Page(), // 第一页
        'page2': (context) => const Page2Page(), // 第二页
      },
    );
  }
}

// 第一页
class Page1Page extends StatelessWidget {
  const Page1Page({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( // 应用栏
        title: const Text('Page 1'), // 标题
        centerTitle: true, // 居中标题
        backgroundColor: Colors.transparent, // 透明背景
      ),
      backgroundColor: Colors.blue, // 页面背景色
      body: Center( // 中心布局
        child: MaterialButton( // 按钮
          onPressed: () {
            // 使用自定义路由过渡插件
            RouteTransition(
              context: context,
              child: const Page2Page(), // 目标页面
              animation: AnimationType.fadeIn, // 动画类型
            );
          },
          child: const Text('Go to page2'), // 按钮文本
        ),
      ),
    );
  }
}

// 第二页
class Page2Page extends StatelessWidget {
  const Page2Page({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( // 应用栏
        centerTitle: true, // 居中标题
        title: const Text('Page 2'), // 标题
        backgroundColor: Colors.transparent, // 透明背景
      ),
      backgroundColor: Colors.blueGrey, // 页面背景色
      body: const Center( // 中心布局
        child: Text('Page2Page'), // 文本
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个使用 custom_route_transition_j 插件在 Flutter 中实现自定义路由过渡动画的示例代码。这个插件允许你定义从当前页面到目标页面的过渡动画。

首先，确保你在 pubspec.yaml 文件中添加了 custom_route_transition_j 依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_route_transition_j: ^x.y.z  # 请替换为最新版本号

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

接下来，创建一个自定义的路由过渡动画。以下是一个简单的示例，展示了如何使用 CustomRouteTransition 来实现一个从下往上滑动的过渡动画。

1. 定义自定义过渡动画

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

class SlideUpTransition extends CustomRouteTransition {
  @override
  Widget buildTransitionPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
  ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset(0, 1), // 起始位置在屏幕下方
        end: Offset(0, 0),   // 结束位置在屏幕上方
      ).animate(animation),
      child: child,
    );
  }
}

2. 使用自定义过渡动画进行页面跳转

import 'package:flutter/material.dart';
import 'package:custom_route_transition_j/custom_route_transition_j.dart';
import 'slide_up_transition.dart'; // 引入你定义的过渡动画

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Route Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
      onGenerateRoute: (settings) {
        if (settings.name == '/details') {
          return CustomRouteTransition(
            transition: SlideUpTransition(),
            builder: () => DetailsScreen(),
            settings: settings,
          );
        }
        return null;
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Text('This is the details screen.'),
      ),
    );
  }
}

解释

  1. SlideUpTransition 类：继承自 CustomRouteTransition 并重写 buildTransitionPage 方法。在这个方法中，我们使用 SlideTransition 和 Tween<Offset> 来定义从屏幕下方滑动到上方的动画。

  2. MyApp 类：配置 MaterialApp 并设置初始路由和路由表。在 onGenerateRoute 方法中，我们检查路由名称，如果是 /details，则使用 CustomRouteTransition 并传入我们定义的 SlideUpTransition。

  3. HomeScreen 类：一个简单的首页，包含一个按钮，点击按钮时会导航到 DetailsScreen。

  4. DetailsScreen 类：一个简单的详情页，显示一些文本。

这个示例展示了如何使用 custom_route_transition_j 插件来创建自定义的路由过渡动画。你可以根据需要修改动画效果，例如使用 FadeTransition、ScaleTransition 或组合多个动画效果。

回到顶部