[flutter] 플러터 shimmer를 활용한 앱의 슬라이더 애니메이션

11 Dec 2023

flutter

플러터를 사용하여 앱을 개발하고 있다면, 인상적인 애니메이션을 구현하고 싶을 것입니다. 이번에는 shimmer를 활용하여 앱의 슬라이더 애니메이션을 만드는 방법에 대해 알아보겠습니다. Shimmer는 사용자가 데이터가 로드되고 있음을 나타내기 위해 사용되는 효과적인 UI/UX 기술 중 하나입니다.

Shimmer란?

Shimmer는 UI 요소에서 변경되는 그래디언트로 이루어진 반짝이는 애니메이션 효과를 말합니다. 데이터가 로드 중일 때, 사용자에게 로딩이 진행 중임을 시각적으로 알려주는 데 사용됩니다. 이를애니메이션 효과로 보여주므로 사용자에게 눈에 띄는 반짝이는 효과를 제공합니다.

Shimmer 패키지 설치하기

플러터에서 Shimmer 효과를 구현하기 위해서는 shimmer 패키지를 사용해야 합니다.

pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다:

dependencies:
  shimmer: ^2.0.0

앱에 Shimmer 슬라이더 적용하기

다음은 Shimmer 슬라이더 애니메이션을 만드는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shimmer Slider'),
        ),
        body: Center(
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: SizedBox(
              width: 200,
              height: 100,
              child: Text(
                'Shimmer Slider',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 shimmer 패키지를 사용하여 앱의 슬라이더 애니메이션을 구현하는 예제입니다. Shimmer.fromColors 위젯으로 감싼 Text 위젯에 애니메이션 효과를 적용하고 있습니다.

이제 앱을 실행하면 슬라이더 텍스트에 반짝이는 애니메이션 효과가 적용된 것을 확인할 수 있습니다.

Shimmer를 활용하여 인상적인 UI를 구현할 수 있으며, 앱의 사용자 경험을 향상시킬 수 있는 강력한 기술입니다.

더 많은 정보와 예제는 shimmer 패키지 공식 문서를 참고하시기 바랍니다.