플러터의 ProgressIndicator 위젯은 기본 디자인이 있지만, 사용자 지정하여 모양과 디자인을 변경할 수 있습니다. 이를 위해 LinearProgressIndicator나 CircularProgressIndicator를 사용하여 다양한 디자인을 만들 수 있습니다.

선형 진행 표시기의 디자인 변경하기

선형 ProgressIndicator의 디자인을 변경하려면, LinearProgressIndicator 위젯을 사용하고 LinearProgressIndicator의 생성자에 있는 valueColor 매개변수를 사용하여 진행 표시기의 색상을 변경할 수 있습니다.

예를 들어, 파란색의 진행 표시기를 만드는 코드는 다음과 같습니다.

LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

원하는 색상을 사용하려면 Color 클래스를 import하고 해당 색상을 지정하면 됩니다.

원형 진행 표시기의 디자인 변경하기

원형 ProgressIndicator를 변경하는 방법은 선형과 유사합니다. CircularProgressIndicator 위젯을 사용하고 CircularProgressIndicator의 생성자에 있는 valueColor 매개변수를 사용하여 원형 진행 표시기의 색상을 변경할 수 있습니다.

예를 들어, 빨간색의 원형 진행 표시기를 만드는 코드는 다음과 같습니다.

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

요약

플러터의 ProgressIndicator 위젯을 사용하여 진행 표시기의 디자인을 변경하는 방법에 대해 알아보았습니다. LinearProgressIndicator와 CircularProgressIndicator를 사용하여 다양한 디자인을 구현할 수 있습니다. 사용자 지정할 수 있는 다양한 속성을 활용하여 진행 표시기를 디자인할 수 있습니다.

참고 문서: 플러터 공식 문서 - ProgressIndicator