[ Flutter ] Progress Bar

progress bar 기능 구현을 위해 percent_indicator 라이브러리를 사용

여러 progress bar가 존재하기에 추후 여러 progress bar를 만들때 유용하게 사용이 가능할 것 같음.

 

https://pub.dev/packages/percent_indicator

percent_indicator | Flutter package

 

---

Dependencies

percent_indicator 의존성 추가

percent_indicator: ^4.0.1

 

---

Useage

percent_indicator라이브러리에는 여러 progressbar가 존재하지만 오른쪽 첫번째 progress bar를 이용해서 표현주기로 정함.

width값을 제외하면 부모 위젯의 width값을 따라서 부모 위젯의 크기만큼 정해지므로 width값을 제외

LinearPercentIndicator에 default로 padding 값이 존재하여 위치를 맞추기 어려워서 padding값을 zero로 없애서 사용

percent에는 몇% 까지 채울지를 설정

 

progressBar에 현재 퍼센트를 표현해주고자 center로 설정 

만약 progressBar말고 progressBar 맨앞 혹은 맨뒤에 글씨를 넣고 싶다면 leading 과 trailing을 사용

 

linearStrokeCap: LinearStrokeCap.roundAll, docs에서는 이렇게 사용하는 부분이 있는데 progresBar의 끝부분을 어떻게 처리하는지 설정하는 것 같은데 적용이 안되어서

barRadius를 활용하여 끝부분을 둥굴게 처리

class ProgressBarWidget extends StatefulWidget {
  const ProgressBarWidget({super.key});

  @override
  State<ProgressBarWidget> createState() => _ProgressBarWidgetState();
}

class _ProgressBarWidgetState extends State<ProgressBarWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.zero,
        child: new LinearPercentIndicator(
          padding: EdgeInsets.zero,
          alignment: MainAxisAlignment.start,
          lineHeight: 20.0,
          percent: 0.5,
          center: Text(
            '50%',
            style: TextStyle(fontSize: 13.0, foreground: fontBold(textColor)),
          ),
          barRadius: const Radius.circular(50.0),
          backgroundColor: darkLight,
          progressColor: mint,
        ));
  }
}

 

center경우와 trailing경우에 이런식으로 표시가 된다.