搜尋套件、儲存庫與 APP 分類

ducafecatFlutter 生態導航
animated_page_reveal 封面
套件詳情v1.0.0

animated_page_reveal

用於實現動畫頁面揭露元件的 Flutter 套件。

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文件 原始碼
近 30 天下載
93
喜歡數
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!

所屬分類

入門輪播圖

原始碼儲存庫

使用此套件的專案

暫無相關資料。