Flutter页面过渡动画插件flutter_page

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

pub package

flutter_page_tranzitionz 是一组用于在不同屏幕之间实现简单且易于使用的页面路由过渡动画的集合。该插件受到其他 pub.dev 上的包的启发。

使用方法

import 'package:flutter_page_tranzitionz/flutter_page_tranzitionz.dart';

Navigator.of(context).push(BottomToTopFadeTranzition(child: MyNextPage()));

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_page_tranzitionz_example/time_dilation.dart';
import 'package:flutter_page_tranzitionz_example/transitions.dart';

/// 要运行示例应用程序，请克隆或分叉仓库！

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

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

  static const String _title = 'Flutter Page Tranzitionz';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          actions: const [
            TimeDilationButton(),
          ],
          title: const Text(_title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              crossAxisSpacing: 8.0,
              mainAxisSpacing: 8.0,
            ),
            itemCount: kTransitions.length,
            itemBuilder: (BuildContext context2, int index) {
              final Info info = kTransitions[index];
              return ElevatedButton(
                onPressed: () => Navigator.push(
                  context2,
                  info.route.call(context),
                ),
                child: Text(info.label),
              );
            },
          ),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({
    super.key,
    this.title,
  });

  final String? title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title ?? ''),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
          ),
          itemCount: Colors.primaries.length,
          itemBuilder: (BuildContext context, int index) {
            final Color color = Colors.primaries[index];
            return GridTile(
              child: Container(
                color: color,
                child: Text(color.toString()),
              ),
            );
          },
        ),
      ),
    );
  }
}

示例代码解释

导入必要的库：

import 'package:flutter/material.dart';
import 'package:flutter_page_tranzitionz_example/time_dilation.dart';
import 'package:flutter_page_tranzitionz_example/transitions.dart';

主函数：

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

Main类：

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

  static const String _title = 'Flutter Page Tranzitionz';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          actions: const [
            TimeDilationButton(),
          ],
          title: const Text(_title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              crossAxisSpacing: 8.0,
              mainAxisSpacing: 8.0,
            ),
            itemCount: kTransitions.length,
            itemBuilder: (BuildContext context2, int index) {
              final Info info = kTransitions[index];
              return ElevatedButton(
                onPressed: () => Navigator.push(
                  context2,
                  info.route.call(context),
                ),
                child: Text(info.label),
              );
            },
          ),
        ),
      ),
    );
  }
}

Page2类：

class Page2 extends StatelessWidget {
  const Page2({
    super.key,
    this.title,
  });

  final String? title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title ?? ''),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
          ),
          itemCount: Colors.primaries.length,
          itemBuilder: (BuildContext context, int index) {
            final Color color = Colors.primaries[index];
            return GridTile(
              child: Container(
                color: color,
                child: Text(color.toString()),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

nodeper 1楼

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

flutter_page_tranzitionz 是一个用于在 Flutter 应用中实现页面过渡动画的插件。它提供了多种内置的过渡动画效果，并且可以自定义过渡动画。以下是如何使用 flutter_page_tranzitionz 插件的步骤：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 flutter_page_tranzitionz 包：

import 'package:flutter_page_tranzitionz/flutter_page_tranzitionz.dart';

3. 使用页面过渡动画

flutter_page_tranzitionz 提供了多种内置的过渡动画效果，例如 FadeTransition、SlideTransition、ScaleTransition 等。你可以通过 PageTranzition 类来应用这些动画。

示例：使用 `FadeTransition` 过渡动画

import 'package:flutter/material.dart';
import 'package:flutter_page_tranzitionz/flutter_page_tranzitionz.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,
              PageTranzition(
                child: SecondPage(),
                type: PageTranzitionType.fade,
                duration: Duration(milliseconds: 500),
              ),
            );
          },
          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. 过渡动画类型

flutter_page_tranzitionz 提供了多种过渡动画类型，你可以通过 PageTranzitionType 来选择不同的动画效果：

fade: 淡入淡出效果
scale: 缩放效果
slide: 滑动效果
rotation: 旋转效果
size: 大小变化效果
slideFade: 滑动和淡出组合效果
scaleRotate: 缩放和旋转组合效果

示例：使用 `SlideTransition` 过渡动画

Navigator.push(
  context,
  PageTranzition(
    child: SecondPage(),
    type: PageTranzitionType.slide,
    duration: Duration(milliseconds: 500),
    curve: Curves.easeInOut,
    alignment: Alignment.bottomCenter, // 滑动方向
  ),
);

5. 自定义过渡动画

你还可以通过 PageTranzition.custom 来创建自定义的过渡动画。例如：

Navigator.push(
  context,
  PageTranzition.custom(
    child: SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    duration: Duration(milliseconds: 500),
  ),
);

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