[flutter] 플러터 shimmer 사용법

11 Dec 2023

flutter

플러터(Flutter) 앱에서 Shimmer를 사용하여 부드러운 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

Shimmer란?

Shimmer는 콘텐츠가 로딩 중인 상태를 시각적으로 나타내는 애니메이션 효과입니다. 일반적으로 글자, 이미지, 혹은 다른 컴포넌트들이 로딩 중임을 나타내기 위해 사용됩니다.

Shimmer 패키지 설치

먼저, shimmer 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  shimmer: ^2.0.0

그리고 패키지를 설치합니다.

flutter pub get

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 예제'),
        ),
        body: Center(
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: Text(
              '로딩 중입니다...',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Shimmer.fromColors 위젯으로 baseColor와 highlightColor를 설정하여 Shimmer의 색상을 지정할 수 있습니다.

이제 위젯을 실행하여 Shimmer 효과를 확인하세요.

Shimmer을 사용하여 로딩 중인 상태를 시각적으로 표현할 수 있습니다. 원하는 UI 요소에 쉽게 적용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

더 많은 기능과 설정에 대해서는 공식 Shimmer 패키지 문서를 참고하세요.

이상으로 Flutter에서 Shimmer를 사용하는 방법에 대해 알아보았습니다.