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

MB Route Transitions #

功能 #

此小包允许开发者轻松地处理页面之间的过渡效果（进入）。

开始使用 #

此包非常简单。你只需调用带有几个参数的 MBRouteTransitions 方法即可轻松实现页面之间的过渡效果。

使用方法 #

  • 标准且可自定义的构造函数
MBRouteTransitions(
              context: context,  // 当前BuildContext
              child: Page2(),  // 目标页面
              animation: AnimationType.fadeIn,  // 动画类型
              replacement: false,  // 是否替换当前页面
              duration: const Duration(seconds: 1),  // 动画持续时间
              curve: Curves.easeInCirc,  // 动画曲线
              fadeBegin: 0.2,  // 淡入开始值
              fadeEnd: 1,  // 淡入结束值
            );
  • 更简便的构造函数，具有较少的选项
MBRouteTransitions.standardTransition(
                context: context,  // 当前BuildContext
                child: Page2(),  // 目标页面
            );

example/main.dart

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

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


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


// 此组件是你的应用的根组件
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘MB Route Transitions’,
initialRoute: ‘page1’,
routes: {
‘page1’: (context) => Page1(),
‘page2’: (context) => Page2(),
},
home: Page1(),
);
}
}


class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(“Page 1”),
backgroundColor: Colors.transparent,
),
backgroundColor: Colors.blue,
body: Center(
child: MaterialButton(
color: Colors.white,
onPressed: () {
// 使用MBRouteTransitions进行页面过渡
MBRouteTransitions(
context: context,
child: Page2(),
animation: AnimationType.fadeIn,
replacement: false,
duration: const Duration(seconds: 1),
curve: Curves.bounceIn,
fadeBegin: 0,
fadeEnd: 1,
);
},
child: const Text(“Go to page 2”),
),
),
);
}
}


class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(“Page 2”),
backgroundColor: Colors.transparent,
),
backgroundColor: Colors.amber,
body: const Center(
child: Text(‘page 2’),
),
);
}
}


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

1 回复

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


mb_route_transitions 是一个用于 Flutter 的插件，它可以帮助你在页面路由切换时实现各种过渡动画效果。这个插件简化了自定义页面过渡动画的实现过程，使得你可以轻松地在应用中添加丰富的页面切换效果。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  mb_route_transitions: ^1.0.0  # 请使用最新的版本号

然后运行 flutter pub get 来安装插件。

使用插件

mb_route_transitions 提供了一些预定义的过渡动画效果，比如 SlideTransition、ScaleTransition、RotationTransition 等。你可以通过 MBRouteTransitions 类来使用这些效果。

基本用法

  1. 导入插件：

    import 'package:mb_route_transitions/mb_route_transitions.dart';

  2. 使用过渡动画导航到新页面：

    你可以使用 MBRouteTransitions 的静态方法来导航到新页面，并指定过渡动画类型。

    MBRouteTransitions.slide(
  context: context,
  child: NewPage(), // 新页面
  direction: SlideDirection.left, // 过渡方向
);

    或者使用其他过渡动画：

    MBRouteTransitions.scale(
  context: context,
  child: NewPage(),
  duration: Duration(milliseconds: 500), // 动画持续时间
);

支持的过渡动画类型

  • Slide: 滑动过渡动画

    MBRouteTransitions.slide(
  context: context,
  child: NewPage(),
  direction: SlideDirection.left, // 滑动方向
  duration: Duration(milliseconds: 300), // 动画持续时间
);

  • Scale: 缩放过渡动画

    MBRouteTransitions.scale(
  context: context,
  child: NewPage(),
  duration: Duration(milliseconds: 300),
);

  • Rotation: 旋转过渡动画

    MBRouteTransitions.rotation(
  context: context,
  child: NewPage(),
  duration: Duration(milliseconds: 300),
);

  • Fade: 淡入淡出过渡动画

    MBRouteTransitions.fade(
  context: context,
  child: NewPage(),
  duration: Duration(milliseconds: 300),
);

  • Custom: 自定义过渡动画

    MBRouteTransitions.custom(
  context: context,
  child: NewPage(),
  transitionBuilder: (BuildContext context, Animation<double> animation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  },
  duration: Duration(milliseconds: 300),
);

示例

以下是一个完整的示例，展示了如何使用 mb_route_transitions 插件实现页面间的滑动过渡动画：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            MBRouteTransitions.slide(
              context: context,
              child: NewPage(),
              direction: SlideDirection.left,
              duration: Duration(milliseconds: 500),
            );
          },
          child: Text('Go to New Page'),
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  [@override](/user/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'),
        ),
      ),
    );
  }
}
回到顶部