Flutter : PercentIndicator(ProgressBar) 만들기

PercentIndicator (ProgressBar) 만들기

percent_indicator 패키지를 이용하면 원형 또는 선형의 프로그래스바를 쉽게 만들 수 있습니다.

CircularPercentIndicator는 원형 프로그래스바를, LinearPercentIndicator는 선형 프로그래스바를 나타냅니다. 두 위젯 모두 percent, backgroundColor, progressColor, lineHeight, animation, animationDuration.. 등과 같은 다양한 속성을 사용자가 정의할 수 있습니다.

 

1. percent_indicator 패키지 추가

1) 터미널 창에서 아래 명령 실행 (아래 이미지 A 참조)

2) Pub Get 버튼 클릭 (아래 이미지 B 참조)

3) 추가된 percent_indicator 패키지 확인 (아래 이미지 C 참조)

// command
flutter pub add percent_indicator

percent_indicator 패키지 추가 화면

 

2. CircularPercentIndicator (원형 프로그래스바) 생성

// 원형 프로그래스바 생성
CircularPercentIndicator(
radius: 100.0,
  animation: true,
  animationDuration: 1200,
  lineWidth: 30.0,
  percent: 0.4,
  center: Text(
    '40%',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 34.0,
    ),
  ),
  footer: Text(
    'Hard Disk Capacity',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.black,
      fontSize: 36.0,
    ),
  ),
  circularStrokeCap: CircularStrokeCap.round,
  progressColor: Colors.indigo,
),

- radius : 원의 반지름

- lineWidth : 프로그래스바 두께

- percent : 진행 상태 (0.0에서 1.0 사이의 값으로 지정)

   . 예를 들어 10% 진행된 막대를 표시하려면 percent 값으로 0.1을 지정해야 함

- center : 진행률을 원 가운데에 표시

- circularStrokeCap : 프로그래스바의 끝 모양

- backgroundColor : 프로그래스바의 배경색

- progressColor : 프로그래스바의 진행 중인 부분의 색을

- animation : 애니메이션 적용

- animationDuration : 애니메이션 지속 시간

...

 

3. LinearPercentIndicator (선형 프로그래스바) 생성

// 선형 프로그래스바 생성
LinearPercentIndicator(
  alignment: MainAxisAlignment.center,
  width: 500.0,
  animation: true,
  animationDuration: 1200,
  lineHeight: 30.0,
  leading: Text("left content"),
  trailing: Text("right content"),
  percent: 0.5,
  center: Text('50%'),
  barRadius: Radius.circular(16.0),
  progressColor: Colors.lightGreen,
),

- width : 프로그래스바의 너비

- animationDuration : 애니메이션 지속 시간

- percent : 진행 상태 (0.0에서 1.0 사이의 값으로 지정)

   . 예를 들어 10% 진행된 막대를 표시하려면 percent 값으로 0.1을 지정해야 함

- center 속성은 진행률을 막대 가운데에 표시

- animation : 애니메이션 적용

- animationDuration : 애니메이션 지속 시간

...

 

개인적으로 학습하면서 정리한 내용입니다.

잘못된 내용이 있으면 알려주세요. 확인 후 수정 및 반영하도록 하겠습니다.

아래 전체 소스 및 실행 영상입니다.

 

오늘도 감사합니다.(__)>

 

 

lib.zip

0.00MB

 

 

< 실행영상  보기 >

Flutter - Percentindicator(progressbar) 위젯 샘플 영