flutter_circular_progress_indicator

패키지 개요

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

Flutter 애플리케이션을 위한 시각적으로 매력적인 원형 진행률 표시기로, 로딩 상태에서 사용자 경험을 향상시키도록 설계되었습니다. 부드러운 애니메이션과 사용자 정의 가능한 스타일링을 제공하여 데이터 가져오기 또는 파일 업로드와 같은 작업의 진행 상황을 나타내기에 이상적입니다. 이 패키지는 가볍고 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼에서 호환됩니다. pub.dev를 통한 간단한 통합으로 개발자들이 복잡한 설정 없이도 완성도 높은 로딩 컴포넌트를 쉽게 이용할 수 있습니다.

사용 사례

양식 내 로딩 표시기
데이터 가져오기 진행 상황
파일 업로드/다운로드 추적
앱 스플래시 화면
인증 흐름 진행 상황
백그라운드 작업 모니터링

주요 기능

부드러운 애니메이션 원형 디자인
사용자 지정 가능한 색상 및 선 두께
Flutter와의 간편한 통합
크로스 플랫폼 호환성
확정 및 비확정 모드 모두를 지원합니다
경량이며 성능이 뛰어남

적합한 대상

매력적인 로딩 UI를 찾는 개발자
일관된 진행 상황 피드백이 필요한 앱
다중 플랫폼 대상 프로젝트
사용자 인터페이스 중심의 Flutter 앱
간단하면서도 우아한 로딩 컴포넌트

고려 사항

원형 모양으로만 제한됨
내장 텍스트 레이블 없음(사용자 정의 위젯 감싸기 필요)
브랜드 일관성을 위해 추가적인 스타일링이 필요할 수 있습니다
비원형 진행 요구 사항에 적합하지 않음
업데이트를 위해 외부 GitHub 저장소에 의존합니다

원본 README

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

Load your data more beautiful.

Fixed Bugs

V 0.0.2 : setState error fixed

Installation

You just need to add flutter_circular_progress_indicator as a dependency in your pubspec.yaml file.

dependencies:
  flutter_circular_progress_indicator: ^0.0.2

Getting started

All features you can use :

Usage

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      spinDuration: Duration(seconds: 3),
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

spin

CircularProgressInd().normalCircular(
                    height: 55,
                    width: 55,
                    valueColor: Colors.deepOrange,
                    valueWidth: 5,
                    isSpining: true,
                  );

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      value: .4,
                      isSpining: true,
                      hasSpinReverse: true,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      backgroundColor: Colors.amber,
                      padding: EdgeInsets.all(10),
                      backgroundBorder:
                          Border.all(color: Colors.deepPurple, width: 3),
                      valueWidth: 6);

 CircularProgressInd().normalCircular(
                      height: 80,
                      width: 80,
                      isSpining: true,
                      value: .01,
                      secondaryColor: const Color.fromARGB(255, 23, 82, 27),
                      secondaryWidth: 10,
                      backgroundShape: BoxShape.rectangle,
                      backgroundRadius: 10,
                      backgroundColor: Colors.green,
                      padding: EdgeInsets.all(10),
                      valueColor: Colors.green[200],
                      backgroundBorder: Border.all(
                          color: const Color.fromARGB(255, 23, 82, 27),
                          width: 3),
                      valueWidth: 6);

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

패키지 설치