Flutter路由过渡动画插件route_transition_smba的使用

Flutter路由过渡动画插件route_transition_smba的使用

此插件帮助实现路由之间的过渡动画。

使用示例

/// [context] 是 BuildContext
/// [Page2] 是目标页面的 Widget
/// [animationType] 是动画类型
/// [duration] 是动画持续时间
RouteTransitions(
    context: context, 
    child: const Page2(),
    animation: AnimationType.fadeIn,
    duration: const Duration(seconds: 2),
    replacement: true
);

完整示例Demo

以下是一个完整的示例，展示了如何在应用中使用 route_transition_smba 插件来实现路由之间的过渡动画。

example/main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Route Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              RouteTransitions(
                context: context,
                child: Page2(),
                animation: AnimationType.fadeIn,
                duration: const Duration(seconds: 2),
                replacement: false,
              ),
            );
          },
          child: Text('跳转到第2页'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第2页'),
      ),
      body: Center(
        child: Text('这是第2页的内容'),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用route_transition_smba插件来实现路由过渡动画的示例代码。route_transition_smba 是一个用于Flutter的路由过渡动画库，它允许你轻松地在不同页面之间添加过渡效果。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  route_transition_smba: ^latest_version  # 请替换为实际的最新版本号

2. 导入插件

在你的Dart文件中导入route_transition_smba：

import 'package:route_transition_smba/route_transition_smba.dart';

3. 配置路由

接下来，配置你的路由以使用RouteTransitionSMBA。你可以在你的主文件中（例如main.dart）进行配置：

import 'package:flutter/material.dart';
import 'package:route_transition_smba/route_transition_smba.dart';
import 'page1.dart';
import 'page2.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/':
            return RouteTransitionSMBA(
              builder: () => Page1(),
              transition: SMBATransition.slideFromRight,
            );
          case '/page2':
            return RouteTransitionSMBA(
              builder: () => Page2(),
              transition: SMBATransition.slideToLeft,
            );
          default:
            return MaterialPageRoute(builder: (_) => Scaffold(body: Center(child: Text('No route defined'))));
        }
      },
    );
  }
}

4. 创建页面

接下来，创建两个简单的页面（page1.dart和page2.dart）：

page1.dart

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/page2');
          },
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

page2.dart

import 'package:flutter/material.dart';

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

5. 运行应用

现在，你可以运行你的Flutter应用，并在页面之间看到过渡动画效果。当你从Page1导航到Page2时，你会看到页面从右向左滑动；当你从Page2返回Page1时，你会看到页面从左向右滑动。

这个示例展示了如何使用route_transition_smba插件来实现基本的路由过渡动画。你可以根据需要调整过渡类型（例如使用SMBATransition.fade、SMBATransition.scale等）来创建不同的动画效果。

回到顶部