[Class] Circular/LinearProgressIndicator

Material 디자인에서 제공하는 진행상태 표시(ProgressIndicator)

 

ProgressIndicator 는 요청한 작업을 진행, 처리중이라는 정보를 알려주면서, 기다림을 유도한다. 

요청을 했는대 아무 반응이 없다면 요청자는 처리중인지 알수 없으므로 재시도를 하거나, 떠나버릴 거다. ;;

 

원형과 선형, 2가지가 있다. 

 

1. CircularProgressIndicator

 

이름에서 보듯 원형 

 

얼마나 진행되고 있는지 진행율을 표현하는 확정형과

그냥 진행중인 상태만 표시하는 비확정형이 있다. 

 

• 확정형
  원이 0~1 사이의 값으로 균등 분할되어, 진행 비율에 맞게 원의 테두리가 채워짐. 다 채워지면 100% 완료인 것 
• 비확정형
  처리되는 동안 지속, 반복적인 애니메이션이 보여짐  

       애니메이션이므로 이미지로는 차이를 알기 어렵고 영상(아래 이미지 클릭!)을 보면 쉽게 알 수 있다. 

 

확정, 비확정 원형 진행 표시기 비교

 

 

 

2. LinearProgressIndicator

이 아이가 선형이다. 

선의 위치가 표시 되어 있고(트랙-옅은 색) 그 위에 활성화 컬러(짙은색)가 나타난다.

 

원형과 마찬가지로 확정형과 비확정형이 있다.

• 확정형 
  진행율에 따라 활성화 컬러가 채워지고, 다 채워지면 완료
• 비확정형 
  진행되는 동안 활성화 컬러가 채워진 위치나 길이가 바뀌는 애니매이션이 반복된다.  (아래 이미지 클릭!)
•  

확정, 비확정 선형 진행표시기 비교

LinearProgressIndicator(               value: controller.value,               semanticsLabel: ' Linear progress indicator',               backgroundColor: const Color(0xFFFFFFF8),               color: const Color(0x4242A5F5),             ),