Flutter页面过渡动画插件quick

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

quick_transition 是一个用于快速页面过渡的新插件。

功能简介

这个包提供了页面过渡功能。

使用指南

平台支持

平台: Flutter
依赖版本: page_transition
许可证: BSD-2-Clause

示例预览

使用方法

要使用 quick_transition，首先需要在你的 Flutter 项目中添加该插件作为依赖项。

dependencies:
  quick_transition: "^0.0.1"

然后你可以使用以下示例代码：

Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.leftToRight, child: const NewScreen()));
Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.rightToLeft, child: const NewScreen()));
Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.zoom, child: const NewScreen()));
Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.topToBottom, child: const NewScreen()));
Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.bottomToTop, child: const NewScreen()));

过渡模式

zoom
rightToLeft
leftToRight
topToBottom
bottomToTop

贡献指南

欢迎提交拉取请求。对于重大更改，请先创建一个问题讨论你想要进行的更改。请确保更新适当的测试。

入门指南

该项目是一个用于 Flutter 的插件包，包含 Android 和/或 iOS 的特定平台实现代码。有关如何开始 Flutter 开发的帮助，请参阅在线文档，其中包括教程、示例、移动开发指导以及完整的 API 参考。

完整示例代码

以下是 example/lib/main.dart 文件的完整示例代码：

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('QuickTransition'),
        ),
        body: const AnotherScreen()
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
        child: Center(
          child: Row(
            children: [
              const SizedBox(width: 10,),

              /// 左到右
              GestureDetector(
                  onTap: (){
                    Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.leftToRight, child: const NewScreen()));
                  },
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue, width: 2),
                    ),
                    child: const CircleAvatar(
                      radius: 25,
                      backgroundImage: NetworkImage('https://imgupscaler.com/images/samples/animal-after.webp'),
                    ),
                  )),
              const SizedBox(width: 10,),

              /// 右到左
              GestureDetector(
                  onTap: (){
                    Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.rightToLeft, child: const NewScreen()));
                  },
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue, width: 2),
                    ),
                    child: const CircleAvatar(
                      radius: 25,
                      backgroundImage: NetworkImage('https://imgupscaler.com/images/samples/animal-after.webp'),
                    ),
                  )),
              const SizedBox(width: 10,),

              /// 缩放
              GestureDetector(
                  onTap: (){
                    Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.zoom, child: const NewScreen()));
                  },
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue, width: 2),
                    ),
                    child: const CircleAvatar(
                      radius: 25,
                      backgroundImage: NetworkImage('https://imgupscaler.com/images/samples/animal-after.webp'),
                    ),
                  )),
              const SizedBox(width: 10,),

              /// 上到下
              GestureDetector(
                  onTap: (){
                    Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.topToBottom, child: const NewScreen()));
                  },
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue, width: 2),
                    ),
                    child: const CircleAvatar(
                      radius: 25,
                      backgroundImage: NetworkImage('https://imgupscaler.com/images/samples/animal-after.webp'),
                    ),
                  )),
              const SizedBox(width: 10,),

              /// 下到上
              GestureDetector(
                  onTap: (){
                    Navigator.push(context, QuickTransitionRoute(mode: TransitionMode.bottomToTop, child: const NewScreen()));
                  },
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue, width: 2),
                    ),
                    child: const CircleAvatar(
                      radius: 25,
                      backgroundImage: NetworkImage('https://imgupscaler.com/images/samples/animal-after.webp'),
                    ),
                  )),
              const SizedBox(width: 10,),
            ],
          ),
        ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black38,
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(10),
          alignment: Alignment.topRight,
          height: double.infinity,
          width: double.infinity,
          decoration: const BoxDecoration(
            image: DecorationImage(image: NetworkImage('https://imgupscaler.com/images/samples/animal-after.webp'), fit: BoxFit.cover)
          ),
          child: IconButton(
            onPressed: () => Navigator.pop(context),
            icon: const Icon(Icons.close, color: Colors.white, size: 25,),
          )
        )
      ),
    );
  }
}

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

h691938207 1楼

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

当然，以下是如何在Flutter项目中使用quick_transition插件来实现页面过渡动画的代码示例。quick_transition是一个方便的库，它提供了一些预定义的过渡动画，简化了页面之间的过渡效果实现。

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

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

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

接下来，我们来看一个简单的示例，展示如何使用quick_transition来实现页面之间的过渡动画。

主页面代码（main.dart）

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              QuickPageRoute(
                builder: (context) => SecondScreen(),
                transition: QuickTransitions.fade, // 使用fade过渡动画
              ),
            );
          },
          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!'),
      ),
    );
  }
}

解释

依赖添加：在pubspec.yaml文件中添加quick_transition依赖。
主页面：在MyHomePage中，我们创建了一个按钮，当按钮被点击时，使用Navigator.push方法导航到一个新的页面SecondScreen。
QuickPageRoute：我们使用QuickPageRoute代替默认的MaterialPageRoute，并通过transition参数指定过渡动画。在这个例子中，我们使用了QuickTransitions.fade，即淡入淡出动画。
第二个页面：SecondScreen是一个简单的页面，包含一个AppBar和一个居中的文本。

quick_transition库提供了多种预定义的过渡动画，如slide, scale, rotate等，你可以根据需要选择合适的动画效果。

希望这个示例能帮助你理解如何在Flutter项目中使用quick_transition插件来实现页面过渡动画。如果有更多问题，欢迎继续提问！