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

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

这个包可以帮助你轻松地处理屏幕之间的过渡效果。

使用

import 'package:as_route_transitions/as_route_transitions.dart';

RouteTransitions(
  context: context,  // Build Context
  child: const PageToTransition(), // 页面小部件
  animation: AnimationType.rotateIn, // 动画类型
  duration: const Duration(milliseconds: 600), // 进入动画时长
  reverseDuration: const Duration(milliseconds: 600), // 退出动画时长
  alignment: Alignment.center, // 旋转类型动画的对齐方式
  replacement: true, // 是否替换页面？
  curve: Curves.easeInOutBack, // 动画类型的曲线
);

基础示例

RouteTransitions(
  context: context, // Build Context
  child: const PageToTransition(), // 页面小部件
);

完整示例

在下面的示例中，我们创建了一个简单的应用，包含两个页面。点击按钮可以导航到第二个页面，并且伴随着旋转动画。

main.dart

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

void main() => runApp(const YourApp());

class YourApp extends StatelessWidget {
  const YourApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: 'pageone',
      routes: {
        'pageone': (_) => const PageOne(),
        'pagetwo': (_) => const PageTwo(),
      },
    );
  }
}

class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page one'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          color: Colors.white,
          child: const Text('Go to Page Two'),
          onPressed: () {
            // 使用RouteTransitions进行页面过渡
            RouteTransitions(
              context: context,
              child: const PageTwo(),
              animation: AnimationType.rotateIn,
              duration: const Duration(milliseconds: 600),
              reverseDuration: const Duration(milliseconds: 600),
              alignment: Alignment.center,
              replacement: true,
              curve: Curves.easeInOutBack,
            );
          },
        ),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  const PageTwo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page Two'),
        centerTitle: true,
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blueGrey,
      body: const Center(
        child: Text('Page Two'),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用as_route_transitions插件来实现页面路由过渡动画的一个示例代码案例。

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

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

然后运行flutter pub get来安装依赖。

接下来，我们需要在Flutter应用中配置路由并使用as_route_transitions插件提供的过渡动画。

主应用入口 (main.dart)

import 'package:flutter/material.dart';
import 'package:as_route_transitions/as_route_transitions.dart';
import 'second_screen.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: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/':
            return ASRouteTransition(
              child: HomeScreen(),
              type: ASRouteTransitionType.fade, // 使用渐隐过渡动画
            );
          case '/second':
            return ASRouteTransition(
              child: SecondScreen(),
              type: ASRouteTransitionType.slideFromRight, // 使用从右侧滑入的过渡动画
            );
          default:
            return MaterialPageRoute(builder: (context) => Scaffold(body: Center(child: Text('404'))));
        }
      },
    );
  }
}

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, '/second');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

第二个屏幕 (second_screen.dart)

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

  1. 添加依赖：在pubspec.yaml文件中添加了as_route_transitions依赖。
  2. 配置路由：在MaterialApp的routes和onGenerateRoute中配置了路由。
  3. 使用过渡动画：在onGenerateRoute中，我们为不同的路由返回了ASRouteTransition对象，并指定了过渡动画类型。

通过这种方式，你可以轻松地在Flutter应用中实现页面之间的过渡动画。as_route_transitions插件提供了多种过渡动画类型，例如fade, slideFromRight, slideFromLeft, slideFromTop, slideFromBottom等，你可以根据需求选择合适的动画类型。

回到顶部