앱을 개발할 때 사용자 인터페이스를 더 예쁘고 동적으로 만들 수 있는 방법 중 하나는 shimmer 애니메이션을 사용하는 것입니다. 이번 포스팅에서는 Flutter와 shimmer 패키지를 활용하여 슬라이더 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. Shimmer 패키지 설치

shimmer 패키지를 사용하기 위해 먼저 pubspec.yaml 파일에 아래와 같이 shimmer 패키지를 추가해야 합니다.

dependencies:
  shimmer: ^2.0.0

위의 코드를 추가한 후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

2. 슬라이더 위에 Shimmer 효과 추가

슬라이더 위에 shimmer 효과를 추가하기 위해서는 shimmer 패키지를 사용하여 원하는 애니메이션을 생성하고, 그 위에 슬라이더를 겹쳐야 합니다.

먼저, shimmer 패키지를 import 합니다.

import 'package:shimmer/shimmer.dart';

다음으로, 원하는 위치에 shimmer 애니메이션을 추가합니다.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Slider(
    value: _currentSliderValue,
    min: 0,
    max: 100,
    onChanged: (double value) {
      setState(() {
        _currentSliderValue = value;
      });
    },
  ),
)

위의 코드에서 Shimmer.fromColors를 사용하여 shimmer 애니메이션을 생성하고, 이를 Slider 위에 겹쳐 표시합니다.

3. 결과 확인

위의 작업을 완료한 후에 앱을 실행하면 슬라이더 위에 shimmer 효과가 추가된 것을 확인할 수 있습니다. 사용자가 슬라이더를 조작하면 shimmer 애니메이션도 함께 변화하여 더 동적인 사용자 경험을 제공할 수 있습니다.

이번 포스팅에서는 Flutter와 shimmer 패키지를 사용하여 슬라이더 애니메이션에 shimmer 효과를 추가하는 방법에 대해 알아보았습니다. shimmer 애니메이션을 다양한 UI 요소에 활용하여 사용자에게 더 흥미로운 경험을 제공할 수 있습니다.