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

onboarding_animation 封面
套件詳情v0.0.4

onboarding_animation

此套件為引導畫面提供頁面類型動畫,並提供指示器。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
193
喜歡數
73
Pub 分數
150

安裝套件

flutter pub add onboarding_animation

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

onboarding_animation 套件為 Flutter 應用中的引導畫面提供可自訂的頁面過渡動畫。它透過在引導畫面之間實現流暢且視覺上吸引人的滑動效果來提升使用者體驗,並內建進度指示器以顯示進度。此套件設計簡潔且彈性十足,支援 Android、iOS、Web、macOS、Windows 及 Linux 等多個平台。對於希望以最少設定創造引人入勝的引導流程之應用而言,這是一個理想選擇。開發者可輕鬆使用單一指令整合,並依應用的設計語言自訂動畫。

適用情境

  • 移動和網頁應用的入門畫面
  • 使用者入門教學
  • 產品導覽
  • 應用介紹流程
  • 吸引首次使用用戶的體驗

主要特色

  • 平滑的頁面過渡動畫
  • 內建進度指示器
  • 跨平台支援
  • 透過 pub add 輕鬆整合
  • 可自定義的動畫樣式
  • 最小配置要求

適合對象

  • 行動應用開發者
  • Web 應用程式創建者
  • 以使用者體驗為導向的設計師
  • 初創公司建構入職流程
  • 尋求快速入門解決方案的開發者

使用建議

  • 僅限入職相關使用場景
  • 可能需要額外的樣式來處理複雜的使用者介面
  • 動畫性能取決於設備功能
  • 不適用於非引導流程的導航
  • 自定選項可能會受到預設主題的限制

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

OnBoarding Animation


OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator.


Screenshots and Screen recording

OnBoarding Animation


Usage

Installation

Add onboarding_animation: any to your pubspec.yaml dependencies. And import it:

import 'package:onboarding_animation/onboarding_animation.dart';
Example
OnBoardingAnimation(
          pages: [
           Container(),
           Container(),
           Container(),
          ],
          indicatorDotHeight: 7.0,
          indicatorDotWidth: 7.0,
          indicatorType: IndicatorType.expandingDots,
          indicatorPosition: IndicatorPosition.bottomCenter,
        ),

Parameters

Required Parameters
pages:
  • Need to pass the List of Widgets for providing the content of onBoarding cards.

Optional Parameters
controller:
  • This parameter is use to set the page controller.
indicatorOffset:
  • This parameter is used to set the offset of the indicator.
indicatorDotWidth:
  • Set the width of the the indicator's dot.
indicatorDotHeight:
  • Set the height of indicator's dot.
indicatorDotSpacing:
  • Using this parameter user can define the space between the dots of indicator.
indicatorDotRadius:
  • This is use to set the radius of the circle shown in the indicator.
indicatorInActiveDotColor:
  • This is use to set the color of the inactive(unselected) dot color.
indicatorActiveDotColor:
  • This is use to set the color of the active(selected) dot color.
indicatorStrokeWidth:
  • indicatorStrokeWidth is use to set the width of the stroke if the PaintStyle is selected to the stroke.
indicatorType:
  • This is an enum which is use to select the type of an indicator.
indicatorPosition:
  • This is an enum which is use to select the position of an indicator.
indicatorColorTransitionActiveStrokeWidth:
  • Need to pass the List of Widgets for the providing the content of the onBoarding cards.
indicatorExpansionFactor:
  • indicatorExpansionFactor is multiplied by indicatorDotWidth to resolve the width of the expanded dot.
indicatorJumpScale:
  • The maximum scale the dot will hit while jumping.
indicatorVerticalOffset:
  • The vertical offset of the jumping dot.
indicatorPaintStyle:
  • indicatorPaintStyle is use to select between the fill and the stroke style.
indicatorWormType:
  • indicatorWormType helps to select the form of the WormType between normal and thin.
indicatorSwapType:
  • indicatorSwapType helps to select the form of the SwapType between normal, yRotation and zRotation.
indicatorActivePaintStyle:
  • Inactive dots paint style (fill/stroke) defaults to fill.
indicatorActiveStrokeWidth:
  • This is ignored if indicatorActivePaintStyle is PaintStyle.fill.
indicatorScale:
  • indicatorScale is multiplied by indicatorDotWidth to resolve active dot scaling.
indicatorActiveDotScale:
  • indicatorActiveDotScale is multiplied by indicatorDotWidth to resolve active dot scaling.
indicatorMaxVisibleDots:
  • The max number of dots to display at a time if count is <= maxVisibleDots indicatorMaxVisibleDots = countmust be an odd number that's >= 5.
indicatorFixedCenter:
  • If True the old center dot style will be used.
indicatorInActiveDotDecoration:
  • indicatorInActiveDotDecoration is used to set the inactive dot decoration if indicatorType is selected to custom.
indicatorActiveDotDecoration:
  • indicatorActiveDotDecoration is used to set the active dot decoration if indicatorType is selected to custom.
indicatorActiveColorOverride:
  • This parameter is use to override the existing active colors.
indicatorInActiveColorOverride:
  • This parameter is use to override the existing inactive colors.

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the development branch only.


Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue

Library used


LICENSE!

OnBoarding Animation is MIT-licensed.


Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.

所屬分類

依賴

依賴清單 1 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。