Flutter页面过渡效果插件page_transition_effects的使用

零依赖的空安全插件（Dart 3）

支持iOS、Android、Linux、Mac、Web和Windows平台。

简介

page_transition_effects 插件提供了美观的页面过渡动画效果。它支持多种过渡类型，并且可以实现页面替换 (PushReplacement) 功能。

快速入门

此插件非常简单易用。每个动画都包含默认值，这些默认值看起来非常美观。当然，你也可以根据需要修改属性来定制过渡效果。

支持的动画类型

• FadeIn
• SlideUp
• SlideDown
• SlideLeft
• SlideRight

示例代码

基本示例

// 在main.dart文件中定义主应用
import 'package:flutter/material.dart';
import 'package:page_transition_effects/page_transition_effects.dart';

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

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

  // 主应用入口
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '页面过渡效果演示',
      theme: ThemeData.dark(),
      home: const MyFirstPage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: SizedBox(
        width: size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              '我的第一个页面',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SizedBox(
              height: size.height * 0.1,
            ),
            ElevatedButton(
              onPressed: () => PageTransitionEffects(
                context: context,
                page: const MySecondPage(),
                animation: AnimationType.slideUp,
                duration: const Duration(milliseconds: 800),
              ),
              child: const Text('正常跳转'),
            ),
            SizedBox(
              height: size.height * 0.1,
            ),
            ElevatedButton(
              onPressed: () => PageTransitionEffects(
                context: context,
                page: const MyThirdPage(),
                animation: AnimationType.slideDown,
                duration: const Duration(milliseconds: 800),
                replacement: true,
              ),
              child: const Text('页面替换'),
            )
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.brown,
      appBar: AppBar(
        title: const Text('启用返回按钮'),
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        child: Text(
          '我的第二个页面',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      appBar: AppBar(
        title: const Text('禁用返回按钮'),
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        child: Text(
          '我的第三个页面（禁用返回按钮）',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
    );
  }
}