搜索插件、代码仓与 APP 分类

ducafecatFlutter 生态导航
animated_page_reveal 封面
插件详情v1.0.0

animated_page_reveal

用于实现动画页面揭示控件的 Flutter 包。

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文档 源代码
近 30 天下载
57
喜欢数
47
Pub 分数
150

安装插件

flutter pub add animated_page_reveal

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，提供了一个动画页面揭示小部件，非常适合在引导流程或轮播图中创建流畅、引人入胜的页面过渡效果。它支持可自定义的动画，实现视觉上吸引人的进入效果，通过动态揭示提升用户体验。该包支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台，确保在各种设备上行为一致。设计简洁，易于集成，可无缝融入现有的 Flutter 项目。

适合场景

  • 入门屏幕
  • 交互式轮播
  • 启动屏过渡
  • 用户入门流程
  • 动画内容滑块

主要特点

  • 平滑的页面揭示动画
  • 可自定义的过渡效果
  • 跨平台支持
  • 与 Flutter 的轻松集成
  • 可配置的动画持续时间和曲线
  • 可重用的 widget 组件

适合对象

  • 应用入门设计师
  • UI/UX 开发人员
  • 交互式应用创建者
  • Flutter 初学者
  • 以动画为重点的项目

使用建议

  • 可能会影响低端设备的性能
  • 需要仔细调整动画曲线
  • 限制为基于页面的揭示模式
  • 不适合复杂导航
  • 每页内容最少时效果最佳
  • 依赖于 Flutter 的渲染管道

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated Page Reveal

Animated Page Reveal package lets you add an animated page reveal to your Flutter app that dispaly a set of pages with your desired content.

Features

The AnimatedPageReveal widget is built to be a tool you can use to showcase a content in your Flutter app (ex: onBoarding screen). By default the position of content is set to Center and by using the ViewPageModel, you can add as many pages as you like with your desired content.

  • Animated Pages

By making a drag on the screen (leftToRight or rightToLeft) one page fades out and another comes in with a cool animation. The bottom icons indicate the position of the active page as well as both the seen & unseen pages remaining for the user to interact with.

The package will handle the animation by itself.

animatedPageReveal

Getting started

  1. Add the latest version of package to your pubspec.yaml (and run dart pub get):
dependencies:
  animated_page_reveal: ^1.0.0
  1. Import the package and use it in your Flutter App.
import 'package:animated_page_reveal/animated_page_reveal.dart';

Usage

There are a number of properties that you can modify:

  • title (Title text of the page)
  • description (Body text of the page)
  • color (Color of the page)
  • imageAssetPath (Image of the page)
  • iconAssetPath (Page bottom icon indicator)
  • titleStyle (Title text Style)
  • descriptionStyle (Body text style)

Example Usage (Complete with all params):

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: AnimatedPageReveal(children: [
        PageViewModel(
          title: 'Choose your place',
          description:
              'Pick the right destination according to the season because it is a key factor for a successful trip',
          color: const Color(0xff195932),
          imageAssetPath: 'assets/images/trip.png',
          iconAssetPath: 'assets/images/placeicon.png',
          titleStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          descriptionStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            fontWeight: FontWeight.normal,
            color: Colors.white,
          ),
        ),
        PageViewModel(
          title: 'Book your flight',
          description:
              'Found a flight that matches your destination and schedule? \nBook it just a few taps',
          color: const Color(0xff19594E),
          imageAssetPath: 'assets/images/flight.png',
          iconAssetPath: 'assets/images/planicon.png',
          titleStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          descriptionStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            fontWeight: FontWeight.normal,
            color: Colors.white,
          ),
        ),
        PageViewModel(
          title: 'Explore the world',
          description:
              'Easily discover new places and share them with your friends. \nMaybe you will plan together your next trip?',
          color: const Color(0xff193A59),
          imageAssetPath: 'assets/images/explore.png',
          iconAssetPath: 'assets/images/searchicon.png',
          titleStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          descriptionStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            fontWeight: FontWeight.normal,
            color: Colors.white,
          ),
        ),
      ]),
    );
  }
}

 Here's what it looks like:

https://user-images.githubusercontent.com/68671238/135723767-a464d5e3-2a88-4e10-b64d-af652be273ff.mp4

Next Goals

We are working on some improvements including:

  • [ ] Change color of the bottom circle icon indicator.
  • [ ] Add a button to exit to another screen.

Issues & Feedback

Please file an issue! to send feedback or report a bug. Thank you!

所属分类

入门轮播图

源码仓库

使用此插件的项目

暂无相关数据。