패키지, 저장소 및 앱 카테고리 검색

onboarding_animation 표지
패키지 상세v0.0.4

onboarding_animation

이 패키지는 온보딩 화면에 페이지 유형 애니메이션을 제공하고 인디케이터를 제공합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
193
좋아요
73
Pub 점수
150

패키지 설치

flutter pub add onboarding_animation

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

onboarding_animation 패키지는 Flutter 애플리케이션의 온보딩 화면에 대해 사용자 정의 가능한 페이지 전환 애니메이션을 제공합니다. 매끄럽고 시각적으로 매력적인 슬라이드 효과를 통해 사용자 경험을 향상시키며, 진행 상황을 표시하는 내장된 인디케이터도 포함되어 있습니다. 간단함과 유연성을 고려해 설계되었으며, 안드로이드, iOS, 웹, macOS, 윈도우, 리눅스 등 다양한 플랫폼을 지원합니다. 최소한의 설정으로 몰입감 있는 온보딩 흐름을 만들고 싶은 앱에 이상적입니다. 개발자는 단일 명령어로 쉽게 통합할 수 있으며, 앱의 디자인 언어에 맞게 애니메이션을 커스터마이징할 수 있습니다.

사용 사례

  • 모바일 및 웹 앱을 위한 온보딩 화면
  • 사용자 온보딩 튜토리얼
  • 제품 안내
  • 앱 소개 흐름
  • 초기 사용자 경험을 매력적으로 만드는 것

주요 기능

  • 스무스한 페이지 전환 애니메이션
  • 내장형 진행률 표시기
  • 크로스 플랫폼 지원
  • pub add를 통한 간편한 통합
  • 사용자 정의 가능한 애니메이션 스타일
  • 필수 최소 구성

적합한 대상

  • 모바일 앱 개발자
  • 웹 애플리케이션 제작자
  • 사용자 경험 중심 디자이너
  • 온보딩 흐름을 구축하는 스타트업
  • 빠른 온보딩 솔루션을 찾는 개발자

고려 사항

  • 온보딩 전용 사용 사례에 한정
  • 복잡한 UI의 경우 추가 스타일링이 필요할 수 있습니다
  • 애니메이션 성능은 기기의 기능에 따라 달라집니다
  • 온보딩이 아닌 탐색 흐름에는 적합하지 않습니다
  • 기본 테마에 의해 사용자 지정 옵션이 제한될 수 있습니다

원본 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 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.