[Flutter] progress bar 진행률 계산하기 percent_indicator 사용하기

flutter는 progress bar를 지원하지만.. 예쁘지 않다.. ㅎㅎ

package:flutter/src/material/progress_indicator.dart

간단하게 설명하자면

value : 진행률

backgroundColor : 기본 백그라운드 색 

color: 테두리 색 

valueColor: 진행률 색상 

 

LinearProgressIndicator(
    value: 0,
    backgroundColor:
        Color.fromARGB(255, 138, 65, 65),
    color: Colors.black45,
    valueColor:
        AlwaysStoppedAnimation<Color>(Colors.white),
    minHeight: 10.0,
    semanticsLabel: 'semanticsLabel',
    semanticsValue: 'semanticsValue',
)

 

LinearProgressIndicator(
    value: 1,
    backgroundColor:
        Color.fromARGB(255, 138, 65, 65),
    color: Colors.black45,
    valueColor:
        AlwaysStoppedAnimation<Color>(Colors.white),
    minHeight: 10.0,
    semanticsLabel: 'semanticsLabel',
    semanticsValue: 'semanticsValue',
)

 

 

 

LinearProgressIndicator(
    value: 0.3,
    backgroundColor:
        Color.fromARGB(255, 138, 65, 65),
    color: Colors.black45,
    valueColor: AlwaysStoppedAnimation<Color>(
        Color.fromARGB(255, 53, 119, 100)),
    minHeight: 10.0,
    semanticsLabel: 'semanticsLabel',
    semanticsValue: 'semanticsValue',
)

 

 

라이브러리 percent_indicator로 프로그래스바는 어떨까.

flutter pub add percent_indicator

https://pub.dev/packages/percent_indicator/install

percent_indicator | Flutter Package

아래 패키지를 import 해야 한다. 

package:percent_indicator/circular_percent_indicator.dart

 

아주 기본적인 형태는 아래와 같다. 

CircularPercentIndicator(
    radius: 60.0,
    lineWidth: 5.0,
    percent: 0.5,
    center: new Text("50%"),
    progressColor: Colors.green,
)

약간 응용은

CircularPercentIndicator(
    radius: 100.0,
    lineWidth: 30.0, // 굵기
    animation: true,
    percent: 0.7,
    center: const Text(
    	"70.0%",
    ),
    footer: const Text(
    	"footer here!",
    ),
    circularStrokeCap:
    CircularStrokeCap.round, // 프로그래스 끝 부분 둥글게
    progressColor: Colors.purple, // 프로그래스 색상
)

 

 

 

반응형

Linear는 아래와 같다. 

 

LinearPercentIndicator(
    width: 200.0,
    animation: true,
    animationDuration: 100,
    lineHeight: 20.0,
    leading: const Text("left"),
    trailing: const Text("right"),
    percent: 0.2,
    center: Text("20.0%"),
    progressColor: Colors.red,
    barRadius: Radius.circular(10),
)

 

 

더 많은 예제는 pub.dev 에 있다. 

 

StatefulWidget 으로 value  값을 줄 수 도 GetX로 상태관리를 할 수도 있을텐데 귀찮다.. 

요즘 개발이 너무 귀찮다... 생각만 하면 뚝딱나오면 좋겠다. ChatGPT 빨리 더 많이 열일해라...