[flutter] LinearProgressIndicator와 함께 사용할 수 있는 그래픽 효과

18 Dec 2023

flutter

Flutter 애플리케이션을 개발할 때 중요한 부분 중 하나는 사용자에게 진행 상태를 시각적으로 보여주는 것입니다. 이 때 사용자 경험을 향상시키기 위해 LinearProgressIndicator가 유용하게 활용됩니다. 그렇지만 단순한 프로그레스 바로만으로는 사용자들의 눈길을 끌기에 충분하지 않을 수 있습니다. 이 문제를 해결하기 위해 아래에서는 LinearProgressIndicator와 함께 사용할 수 있는 몇 가지 그래픽 효과에 대해 알아보겠습니다.

1. Gradient 프로그레스 바

LinearProgressIndicator의 색상은 단색 또는 Material Design 테마에 맞춰 설정할 수 있지만, 때로는 좀 더 생동감 있고 매력적인 디자인을 구현하고 싶을 때가 있습니다. 이런 경우에 Gradient를 이용한 프로그레스 바를 구현할 수 있습니다.

다음은 Gradient 프로그레스 바의 예시입니다:

LinearProgressIndicator(
  value: _progressValue,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
  backgroundColor: Colors.transparent,
),

이 코드에서 valueColor를 AlwaysStoppedAnimation<Color>로 설정하는 대신 LinearGradient를 이용하여 Gradient 색상을 적용할 수 있습니다.

2. 다양한 애니메이션 효과

LinearProgressIndicator를 더 화려하게 만들기 위해 다양한 애니메이션 효과를 추가할 수 있습니다. 예를 들어, 프로그레스 바에 펄럭이는 효과를 주거나, 반짝이는 효과를 줄 수 있습니다. 이를 위해 Flutter 애니메이션 구조와 AnimatedBuilder를 활용할 수 있습니다.

다음은 애니메이션 효과를 추가하는 코드의 예시입니다:

AnimatedBuilder(
  animation: _animationController,
  builder: (context, child) {
    return LinearProgressIndicator(
      value: _progressValue,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
      backgroundColor: Colors.transparent,
    );
  },
),

3. 사용자 정의 Shape

기본적인 직선 형태로 제공되는 LinearProgressIndicator를 커스터마이징하여, 다양한 모양의 프로그레스 바를 구현할 수 있습니다. 예를 들어, 원형, 불규칙한 모양, 또는 이미지를 활용한 모양으로 변형할 수 있습니다.

다음은 사용자 지정 모양을 가진 프로그레스 바의 예시입니다:

Container(
  width: 100,
  height: 100,
  child: CircularProgressIndicator(
    value: null,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
    backgroundColor: Colors.transparent,
    strokeWidth: 10,
  ),
),

LinearProgressIndicator와 함께 사용할 수 있는 이러한 그래픽 효과들은 앱의 사용자 경험을 높이는 데 도움을 줄 수 있습니다. 따라서 이러한 다양한 옵션들을 적극적으로 활용하여 애플리케이션의 디자인을 개선해보세요.

이상으로 LinearProgressIndicator와 함께 사용할 수 있는 그래픽 효과에 대해 알아보았습니다. 유용하게 참고하시기 바랍니다!