FLUTTER ECOSYSTEM

douglasiacovelli/page_view_dot_indicator

점의 형태로 간단하고 애니메이션 효과가 있는 페이지 뷰 인디케이터이며, 색상, 크기, 간격 및 지속 시간을 사용자 정의할 수 있습니다.

page_view_dot_indicator 프로젝트 이미지
Stars
17
Forks
11
최근 푸시(UTC)
2024. 2. 13.
프로젝트 상태
활성
Douglas Iacovelli GitHub avatar
GITHUB User

Douglas Iacovelli ↗

Tech manager, Flutter contributor, article writer and a developer with product in mind.

@contratadome Bertioga
언어DartSwiftKotlinObjective-C

기술 주제

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 3 개
  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}
  • flutter_lints개발 의존성2.0.2

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

Page view dot indicator

pub package

This lib draws a simple dot indicator for page views with a simple API. Right now it is able to draw dots with custom size, colors, spacing and duration. Besides that it also handles overflow by fading the edges if there are more dots than the width of the page allows.

https://user-images.githubusercontent.com/1608564/111876654-7f539200-897e-11eb-9d1e-7a9ceb820ec7.gif

Usage

Simply use this Widget in your page and make sure to use any form of state management to update the currentItem, such as setState.

These are the mandatory parameters:
PageViewDotIndicator(
  currentItem: selectedPage,
  count: pageCount,
  unselectedColor: Colors.black26,
  selectedColor: Colors.blue,
)
But you can also customize it using other parameters, such as:
PageViewDotIndicator(
  currentItem: selectedPage,
  count: pageCount,
  unselectedColor: Colors.black26,
  selectedColor: Colors.blue,
  size: const Size(12, 12),
  unselectedSize: const Size(8, 8),
  duration: const Duration(milliseconds: 200),
  margin: const EdgeInsets.symmetric(horizontal: 8),
  padding: EdgeInsets.zero,
  alignment: Alignment.centerLeft,
  fadeEdges: false,
  boxShape: BoxShape.square, //defaults to circle
  borderRadius: BorderRadius.circular(5), //only for rectangle shape
  onItemClicked: (index) { ... }
)