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

page_indicator 표지
패키지 상세v0.4.1

page_indicator

flutter pageview 인디케이터, 사용하기 쉬움. 위치와 크기 커스터마이징 가능하지만 원형만 지원.

30일 다운로드
464
좋아요
58
Pub 점수
60

패키지 설치

flutter pub add page_indicator

패키지 개요

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

PageView 위젯용 간단하고 사용자 정의 가능한 원형 인디케이터를 제공하는 플러터 패키지입니다. 사용자는 크기와 위치를 조정하여 현재 페이지 위치를 쉽게 표시할 수 있으며, 스크롤 가능한 인터페이스에서 탐색 피드백을 향상시킵니다. 인디케이터는 원형 모양만 지원하여 깔끔하고 일관된 시각적 스타일을 보장합니다. 온보딩 화면, 이미지 슬라이더 또는 시각적 페이지 추적 기능이 필요한 모든 카루셀 기반 UI에 적합합니다.

사용 사례

  • 온보딩 화면
  • 이미지 슬라이더
  • 카루셀 인터페이스
  • 튜토리얼 워크스루
  • 폼 마법사
  • 제품 쇼케이스

주요 기능

  • 원형 표시기만
  • 사용자 정의 크기
  • 조절 가능한 위치
  • 간단한 API
  • Lightweight
  • 내장 애니메이션

적합한 대상

  • 초보자용 플러터 개발자
  • 간단한 캐러셀 디자인
  • 미니멀리스트 UI
  • PageView 탐색 지시기
  • 모바일 앱 온보딩

고려 사항

  • 원형 모양으로 제한
  • 사용자 정의 모양 지원 없음
  • 고급 스타일링 옵션이 없습니다
  • 복잡한 지표에 적합하지 않습니다
  • 페이지 뷰 통합에 의존함
  • 다크 모드 사용자 정의 없음

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

page_indicator

pub package

Preview

image

image

Install

see

  1. Depend on it Add this to your package's pubspec.yaml file:
dependencies:
  page_indicator: ^0.3.0
  1. Install it

You can install packages from the command line:

with Flutter:

flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

  1. Import it Now in your Dart code, you can use:
import 'package:page_indicator/page_indicator.dart';

Usage

see example file

or

PageIndicatorContainer(
  child: PageView(
    children: <Widget>[
      Text("1"),
      Text('2'),
      Text('3'),
      Text('4'),
    ],
    controller: controller,
  ),
  align: IndicatorAlign.bottom,
  length: 4,
  indicatorSpace: 20.0,
  padding: const EdgeInsets.all(10),
  indicatorColor: Colors.white,
  indicatorSelectorColor: Colors.blue,
  shape: IndicatorShape.circle(size: 12),
  // shape: IndicatorShape.roundRectangleShape(size: Size.square(12),cornerSize: Size.square(3)),
  // shape: IndicatorShape.oval(size: Size(12, 8)),
}
Force refersh state
final key = GlobalKey<PageContainerState>();
PageIndicatorContainer(
  key: key,
  // other ...
);

// force refersh
key.currentState.forceRefreshState();

Migration guide

0.1.x => 0.2.x

PageIndicatorContainer(
  ...
--  size: 12.0,
++  shape: IndicatorShape.circle(size: 12),
)

카테고리

소스 저장소

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