플러터는 다양한 로딩 상태를 나타내는데 사용되는 LinearProgressIndicator 위젯을 제공합니다. 이 위젯은 기본적인 스타일링 또는 커스터마이징 할 수 있는 여러 옵션을 제공합니다.

이 포스트에서는 LinearProgressIndicator의 다양한 디자인 옵션을 살펴보고, 어떻게 이를 사용하여 UI를 보다 다이내믹하게 만들 수 있는지 알아보겠습니다.

기본 스타일링

기본적으로 LinearProgressIndicator는 앱의 기본 테마에 맞게 디자인됩니다. 이를 커스터마이징 하지 않고 사용하면 아래와 같이 간단한 선형 로더를 얻을 수 있습니다.

LinearProgressIndicator()

컬러 및 두께 조절

LinearProgressIndicator의 컬러 및 두께를 조절하여 디자인을 개선할 수 있습니다. 아래 예시는 로더의 컬러를 파란색으로, 두께를 7로 조절한 예시입니다.

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

애니메이션 변경

로딩 애니메이션을 커스터마이징하여, 로더의 모양이나 움직임을 변경할 수 있습니다. 예를 들어, 아래와 같이 LinearProgressIndicator의 애니메이션을 변경할 수 있습니다.

LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  value: 0.5, // 애니메이션 값
  backgroundColor: Colors.grey, // 로더의 배경색
)

완료되었을 때 효과 추가

로딩이 완료되었을 때 애니메이션 효과를 주어 유저에게 시각적으로 완료를 알릴 수 있습니다.

LinearProgressIndicator(
  value: 1.0, // 완료 상태값
)

마침말

LinearProgressIndicator를 커스터마이징하여 앱의 로딩 상태를 시각적으로 효과적으로 나타낼 수 있습니다. 여기서 다룬 옵션들은 로더의 디자인을 개선하고, 유저 경험을 향상시킬 수 있는데 중요한 역할을 합니다.

더 많은 정보는 공식 문서를 확인하실 수 있습니다.