搜索插件、代码仓与 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 项

源码仓库

使用此插件的项目

暂无相关数据。