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

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

flutter_page_transition_plus 是一个用于构建自定义页面过渡动画的 Flutter 插件。它提供了多种过渡效果，如下一个页面过渡、缩放过渡、向上打开过渡、向上淡出过渡等。

开始使用

首先，你需要确保在你的 Flutter 项目中添加 flutter_page_transition_plus 作为依赖项。

dependencies:
  flutter_page_transition_plus: "^1.0.2"

特性

下一个页面过渡

FlutterPageTransition.next(settings, NextPage());

缩放过渡

FlutterPageTransition.zoom(settings, NextPage());

向上打开过渡

FlutterPageTransition.openUpwards(settings, NextPage());

向上淡出过渡

FlutterPageTransition.fadeUpwards(settings, NextPage());

自定义过渡

class CustomPageTransitionsBuilder extends PageTransitionsBuilder {
  [@override](/user/override)
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return _CustomPageTransition(routeAnimation: animation, child: child);
  }
}

FlutterPageTransition.custom(settings, NextPage(), CustomPageTransitionsBuilder());

使用示例

下面是一个完整的示例，展示了如何在 Flutter 应用程序中使用 flutter_page_transition_plus 插件。

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

// 定义下一个页面
class NextPage extends StatelessWidget {
  const NextPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => Container();
}

// 定义自定义页面过渡生成器
class CustomPageTransitionsBuilder extends PageTransitionsBuilder {
  [@override](/user/override)
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return _CustomPageTransition(routeAnimation: animation, child: child);
  }
}

// 自定义页面过渡组件
class _CustomPageTransition extends StatelessWidget {
  final Animation<double> routeAnimation;
  final Widget child;

  _CustomPageTransition({required this.routeAnimation, required this.child});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: routeAnimation,
      child: child,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const NextPage(),
      onGenerateRoute: (settings) => {
        "/next": FlutterPageTransition.next(
          settings,
          const NextPage(),
        ),
        "/zoom": FlutterPageTransition.zoom(
          settings,
          const NextPage(),
        ),
        "/open/upwards": FlutterPageTransition.openUpwards(
          settings,
          const NextPage(),
        ),
        "/fade/upwards": FlutterPageTransition.fadeUpwards(
          settings,
          const NextPage(),
        ),
        "/custom": FlutterPageTransition.custom(
          settings,
          const NextPage(),
          CustomPageTransitionsBuilder(),
          performOutgoingAnimation: false,
        ),
      }[settings.name],
    );
  }
}

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

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用flutter_page_transition_plus插件来实现页面过渡动画的示例代码。flutter_page_transition_plus是一个流行的Flutter插件，它提供了多种页面过渡动画效果。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_page_transition_plus: ^2.0.0  # 请检查最新版本号

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

接下来，我们可以创建一个简单的Flutter应用，展示如何使用flutter_page_transition_plus进行页面过渡动画。

主文件：main.dart

import 'package:flutter/material.dart';
import 'package:flutter_page_transition_plus/flutter_page_transition_plus.dart';
import 'second_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Page Transition Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageTransition(
                type: PageTransitionType.fade, // 可以更改为其他过渡类型，如slide, scale, rotate等
                child: SecondScreen(),
              ),
            );
          },
          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: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

在这个示例中，我们有两个屏幕：FirstScreen和SecondScreen。在FirstScreen中，我们有一个按钮，当点击按钮时，会使用PageTransition进行页面过渡动画，导航到SecondScreen。PageTransitionType.fade表示使用淡入淡出的过渡动画，但你可以根据需要更改为其他类型，如PageTransitionType.slide、PageTransitionType.scale、PageTransitionType.rotate等。

PageTransition的type属性接受PageTransitionType枚举，该枚举提供了多种过渡动画类型。你可以查看flutter_page_transition_plus的文档以获取更多可用的过渡类型。

这个示例展示了如何使用flutter_page_transition_plus进行简单的页面过渡动画。你可以根据需要自定义动画效果，以及添加更多复杂的逻辑。

回到顶部