[flutter] 플러터 shimmer를 이용한 앱의 게시판 애니메이션 구현

11 Dec 2023

flutter

이번 포스트에서는 플러터 프레임워크를 사용하여 앱의 게시판 화면에 새로고침 혹은 데이터 로딩 시 shimmer 효과를 구현하는 방법에 대해 알아보겠습니다.

Shimmer 효과란?

Shimmer 효과는 내용이 로딩 중일 때 화면 상에 번쩍이는 효과를 주어 사용자에게 로딩 중임을 안내하는 UI 효과입니다. 게시판이나 리스트와 같은 화면에서 로딩 중이거나 콘텐츠가 업데이트 중일 때, shimmer 효과를 적용하여 사용자 경험을 향상시킬 수 있습니다.

Shimmer 플러그인 설치

플러터 프로젝트에서 shimmer 효과를 구현하기 위해서는 shimmer 플러그인을 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 종속성을 추가하세요.

dependencies:
  shimmer: ^2.0.0

pubspec.yaml 파일에 종속성을 추가한 후, 종속성을 다운로드하려면 터미널에서 flutter pub get 명령을 실행하세요.

Shimmer 효과 적용하기

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

class ShimmerListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.grey[300],
              radius: 25,
            ),
            title: Text('로딩 중', style: TextStyle(color: Colors.black)),
            subtitle: Text('로딩 중', style: TextStyle(color: Colors.black)),
          ),
        );
      },
    );
  }
}

위의 코드는 ShimmerListView 위젯을 생성하고, 해당 위젯에서 리스트뷰 아이템에 shimmer 효과를 적용하는 예시입니다.

마치며

이렇게 플러터 프레임워크를 사용하여 게시판이나 리스트의 새로고침 혹은 데이터 로딩 시 shimmer 효과를 구현할 수 있습니다. 사용자에게 로딩 중임을 시각적으로 안내함으로써 더 나은 사용자 경험을 제공할 수 있습니다.

Shimmer 플러그인 공식 문서 바로가기

플러터 shimmer 플러그인을 이용하여 여러분만의 독특한 shimmer 효과를 구현해보세요!