intervalprogressbar

패키지 개요

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

수평 및 수직 방향을 지원하는 사용자 정의 가능한 간격 프로그레스 바를 제공하는 플러터 패키지입니다. 생생한 색상과 여러 개의 진행 구간을 표시할 수 있는 기능을 갖추고 있어 분할된 진행 상황이나 시간 기반 작업을 시각적으로 표현하는 데 이상적입니다. 직관적이고 시각적으로 매력적인 디자인으로, 동적 진행 피드백이 필요한 애플리케이션에 적합합니다. 플러터 위젯 시스템과 원활하게 통합되며 최소한의 구성으로 쉽게 구현할 수 있습니다.

사용 사례

앱에서 세그먼트된 진행 상황 시각화
시간 기반 간격 표시
로딩 화면에서 사용자 피드백 향상
애니메이션 진행률 표시기 만들기
다단계 작업 완료 표시

주요 기능

수평 및 수직 방향 지원
색상이 풍부하고 사용자 정의 가능한 외관
다중 진행 간격 지원
Flutter와의 간편한 통합
부드러운 애니메이션 전환

적합한 대상

작업 추적 앱을 개발하는 개발자
매력적인 UI 요소를 찾는 디자이너
시간 기반 진행 상황 시각화가 필요한 앱
다단계 프로세스를 가진 프로젝트

고려 사항

제한된 플랫폼별 사용자 지정
접근성 기능에 대한 내장 지원 없음
복잡한 레이아웃을 위해 추가 스타일링이 필요할 수 있습니다
매우 높은 빈도의 업데이트에 최적화되지 않음

원본 README

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

An interval progress widget for Flutter.

Preview

v1	v2

Depend on it

https://pub.dev/packages/intervalprogressbar

Add this to your package's pubspec.yaml file:

dependencies:
  intervalprogressbar: ^{last_version}

Features

Horizontal
Vertical
Circle
Interval Progress
Colorful

Getting Started

Usage

Widget buildHorizontal() => IntervalProgressBar(
    direction: IntervalProgressDirection.horizontal,
    max: 30,
    progress: 10,
    intervalSize: 2,
    size: Size(400, 10),
    highlightColor: Colors.red,
    defaultColor: Colors.grey,
    intervalColor: Colors.transparent,
    intervalHighlightColor: Colors.transparent,
    reverse: true,
    radius: 0);

Widget buildVertical() => Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [10, 29, 18, 27, 16, 15, 24, 3, 20, 10].map<Widget>((i) {
      return Padding(
          padding: EdgeInsets.only(right: 10),
          child: IntervalProgressBar(
              direction: IntervalProgressDirection.vertical,
              max: 30,
              progress: i,
              intervalSize: 2,
              size: Size(12, 200),
              highlightColor: Colors.red,
              defaultColor: Colors.grey,
              intervalColor: Colors.transparent,
              intervalHighlightColor: Colors.transparent,
              reverse: true,
              radius: 0));
    }).toList());

Widget buildCircle() => IntervalProgressBar(
      direction: IntervalProgressDirection.circle,
      max: 30,
      progress: 10,
      intervalSize: 2,
      size: Size(200, 200),
      highlightColor: Colors.red,
      defaultColor: Colors.grey,
      intervalColor: Colors.transparent,
      intervalHighlightColor: Colors.transparent,
      reverse: true,
      radius: 0,
      intervalDegrees: 5,
      strokeWith: 5,
    );

Property

Property	type	note
direction	`enum`	ProgressBar's direction, support `vertical` and `horizontal`
max	`int`	count of default blocks
progress	`int`	count of highlight blocks
intervalSize	`int`	size of interval blocks. when `vertical` direction, means height, when `horizontal` direction, means width
size	`Size`	size of this widget
highlightColor	`Color`	color of highlight blocks
defaultColor	`Color`	color of default blocks
intervalColor	`Color`	color of default intervals
intervalHighlightColor	`Color`	color of intervals which between highlight blocks
reverse	`bool`
radius	`int`
intervalDegrees	`double`	support for circle progress
strokeWith	`int`	support for circle progress

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