패키지 상세v1.0.2

simple_circular_progress_bar

오픈소스 플러터 패키지, 간단한 원형 진행률 표시기.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 7.2천
좋아요: 194
Pub 점수: 160

패키지 설치

flutter pub add simple_circular_progress_bar

패키지 개요

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

간단한 원형 진행률 표시기를 만들기 위한 가볍고 오픈소스인 Flutter 패키지입니다. 최소한의 설정으로 로딩 상태나 진행 상황을 깔끔하고 사용자 정의 가능한 방식으로 표시할 수 있습니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원합니다. 복잡한 진행률 UI의 간편한 대안을 찾는 개발자를 위해 설계되었으며, 부드러운 애니메이션과 간단한 구성 옵션을 제공합니다. 폼, 데이터 로딩 화면 또는 진행 중인 프로세스에 대한 시각적 피드백이 필요한 모든 상황에서 이상적입니다.

사용 사례

로딩 상태 표시기
양식 제출 진행 상황
데이터 가져오기 시각화
게임 또는 앱 레벨 진행 상황
사용자 정의 가능한 UI 요소

주요 기능

간단한 API
크로스 플랫폼 지원
부드러운 애니메이션
사용자 지정 가능한 색상 및 크기
최소 종속성
간편한 통합

적합한 대상

초보자 플러터 개발자
간단한 로딩 UI
성능에 민감한 앱
빠른 프로토타이핑
경량 진행 표시기가 필요한 앱

고려 사항

고급 패키지에 비해 사용자 지정이 제한적입니다
내장된 텍스트 레이블 없음
복잡한 진행 추적에 적합하지 않습니다
동적 값의 수동 처리가 필요합니다
기본적인 원형 진행 상황 요구 사항에 가장 적합

원본 README

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

Simple circular progress bar

Open source Flutter package, simple circular progress bar.

Installing

Add in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  simple_circular_progress_bar: ^1.0.2

Now in your code, you can import:

import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

Basic examples

See the full example here. Most of the examples are in the rows_in_progress_bar_example folder.

Example numbers correspond to their numbers in the code. To quickly find examples in the repository, look in the code: 'EXAMPLE CODE'.

Colors

Dart code

// Example 1
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
)

// Example 2
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purple],
),

// Example 3
SimpleCircularProgressBar(
    progressColors: const [
        Colors.cyan,
        Colors.green,
        Colors.amberAccent,
        Colors.redAccent,
        Colors.purpleAccent
    ],
    backColor: Colors.blueGrey,
),

Start angle

Dart code

// Example 4
SimpleCircularProgressBar(
    startAngle: 45,
),

// Example 5
SimpleCircularProgressBar(
    startAngle: 90,
),

// Example 6
SimpleCircularProgressBar(
    startAngle: -180,
),

Thickness of the lines

Dart code

// Example 7
SimpleCircularProgressBar(
    size: 80,
    progressStrokeWidth: 25,
    backStrokeWidth: 25,
),

// Example 8
SimpleCircularProgressBar(
    progressStrokeWidth: 20,
    backStrokeWidth: 10,
),

// Example 9
SimpleCircularProgressBar(
    backStrokeWidth: 0,
),

Merge mode

Dart code

// Example 10
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    mergeMode: true,
),

// Example 11
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    fullProgressColor: Colors.deepOrangeAccent,
    mergeMode: true,
),

// Example 12
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purpleAccent],
    mergeMode: true,
),

Animation time

If you don't need animation, set animationDuration = 0.

Dart code

// Example 13
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(milliseconds: 500),
),

// Example 14
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(seconds: 3),
),

// Example 15
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(minutes: 1),
),

Text

Dart code

// Example 16
SimpleCircularProgressBar(
    mergeMode: true,
    onGetText: (double value) {
        return Text('${value.toInt()}%');
    },
),

// Example 17
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        return Text(
            '${value.toInt()}',
            style: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.white,
            ),
        );
    },
),

// Example 18
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        TextStyle centerTextStyle = TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.greenAccent.withOpacity(value * 0.01),
        );
        
        return Text(
            '${value.toInt()}',
            style: centerTextStyle,
        );
    },
),

Value Notifier Example

You can read about how ValueNotifier works here.

The source code of the example can be found here.

Parameters description

Parameter	Default	Description
size double	100	Widget size.
maxValue double	100	The maximum value of the progress bar. The values will vary from 0 to [maxValue].
startAngle double	0	The angle from which the countdown of progress begins.
progressStrokeWidth double	15	Thickness of the progress line.
backStrokeWidth double	15	Line thickness of the background circle. If you don't need a background circle, set this parameter to 0.
progressColors List		Progress bar can be either with or without a gradient. For a gradient, specify more than one color in the [progressColors] field and if a gradient is not needed specify only one color.
fullProgressColor Color		The color of the circle at 100% value. It only works when [mergeMode] equal to true.
backColor Color		The color of the background circle.
animationDuration int	Duration(seconds: 6)	Animation duration. If you don't need animation, set this parameter to zero Duration.
mergeMode bool	false	When this mode is enabled the progress bar with a 100% value forms a full circle with [fullProgressColor]. If no [fullProgressColor] is specified, the last color from [progressColors] is taken.
valueNotifier ValueNotifier		The object designed to update the value of the progress bar. By default, creates a ValueNotifier with the maximum value.
onGetText Text Function(double)		Callback to generate a new Text widget located in the center of the progress bar. The callback input is the current value of the progress bar.

YouTube video

You can see how the application works from the example in this video.

카테고리

지표: 로딩, 새로 고침, 진행률

소스 저장소

Nulllix/simple_circular_progress_bar

simple_circular_progress_bar

☆ 17 스타⑂ 10 포크

DartHTML

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

jicsontoh/EcoMateSG

EcoMateSG

☆ 1 스타⑂ 2 포크

DartC++