Flutter页面过渡动画插件transition_route_done的使用

Flutter页面过渡动画插件transition_route_done的使用

transition_route_done 插件可以帮助开发者在 Flutter 应用中实现不同的页面过渡动画。以下是一个完整的示例，展示了如何使用 transition_route_done 来创建带有不同过渡效果的页面导航。

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:transition_route_done/route_transition.dart'; // 导入 transition_route_done 包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      routes: {
        'one': (context) => Page1(),
        'two': (context) => Page2(),
      },
      initialRoute: 'one',
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Page 1',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blueGrey,
      body: Center(
        child: MaterialButton(
          color: Colors.white,
          child: Text('Go to Page 2'),
          onPressed: () {
            // 使用 RouteTransitions 创建过渡动画
            Navigator.of(context).push(
              RouteTransitions(
                context: context,
                child: Page2(),
                animation: AnimationType.fadeIn, // 选择动画类型
                duration: const Duration(milliseconds: 500), // 设置动画时长
              ),
            );
          },
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Page 2',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Color.fromARGB(255, 14, 77, 109),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

说明

在上述示例中，我们定义了两个页面：Page1 和 Page2。用户可以在 Page1 中点击按钮来导航到 Page2。通过使用 RouteTransitions，我们可以为页面之间的导航添加动画效果。

关键步骤

  1. 导入库：首先需要导入 transition_route_done 包。

    import 'package:transition_route_done/route_transition.dart';

  2. 配置路由：在 MyApp 类中设置路由表，定义了两个页面的路由。

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      routes: {
        'one': (context) => Page1(),
        'two': (context) => Page2(),
      },
      initialRoute: 'one',
    );
  }
}

  3. 添加过渡动画：在 Page1 的按钮点击事件中，使用 RouteTransitions 来实现过渡动画。

    onPressed: () {
  Navigator.of(context).push(
    RouteTransitions(
      context: context,
      child: Page2(),
      animation: AnimationType.fadeIn, // 选择动画类型
      duration: const Duration(milliseconds: 500), // 设置动画时长
    ),
  );
},

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

1 回复

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


transition_route_done 是一个 Flutter 插件，用于在页面之间添加自定义的过渡动画。它提供了一种简单的方式来定义和应用页面之间的过渡效果。以下是如何使用 transition_route_done 插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:transition_route_done/transition_route_done.dart';

3. 使用 TransitionRouteDone

TransitionRouteDone 提供了多种过渡动画效果，你可以通过设置 transitionType 来选择不同的动画类型。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:transition_route_done/transition_route_done.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,
              TransitionRouteDone(
                transitionType: TransitionType.slideLeft,
                child: SecondPage(),
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

4. 过渡动画类型

TransitionRouteDone 支持多种过渡动画类型，你可以通过 transitionType 参数来指定。常用的过渡动画类型包括：

  • TransitionType.slideLeft：从左到右滑动
  • TransitionType.slideRight：从右到左滑动
  • TransitionType.slideTop：从上到下滑动
  • TransitionType.slideBottom：从下到上滑动
  • TransitionType.fade：淡入淡出
  • TransitionType.scale：缩放效果
  • TransitionType.rotate：旋转效果

5. 自定义过渡动画

如果你需要自定义过渡动画，可以使用 TransitionRouteDone.custom 构造函数，并传入自定义的 PageRouteBuilder：

Navigator.push(
  context,
  TransitionRouteDone.custom(
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    child: SecondPage(),
  ),
);

6. 其他配置

TransitionRouteDone 还支持其他配置参数，例如 duration（动画持续时间）和 curve（动画曲线）：

Navigator.push(
  context,
  TransitionRouteDone(
    transitionType: TransitionType.slideLeft,
    duration: Duration(seconds: 1),
    curve: Curves.easeInOut,
    child: SecondPage(),
  ),
);
回到顶部