[flutter] 플러터 shimmer를 사용한 홈스크린 애니메이션 예시

11 Dec 2023

flutter

플러터를 사용하면 편리하게 홈 스크린에서 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. 이 예시에서는 플러터의 Shimmer 패키지를 활용하여 홈 스크린에서 부드러운 애니메이션 효과를 만드는 방법을 안내하겠습니다.

Shimmer 애니메이션 이란?

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: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Shimmer 예시'),
      ),
      body: Column(
        children: <Widget>[
          Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.white,
                radius: 25.0,
              ),
              title: Text('로딩 중...'),
              subtitle: Text('로딩 중...'),
            ),
          ),
          Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.white,
                radius: 25.0,
              ),
              title: Text('로딩 중...'),
              subtitle: Text('로딩 중...'),
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드는 Shimmer 패키지를 사용하여 부드러운 애니메이션 효과를 구현한 예시입니다. Shimmer 패키지의 fromColors 메서드를 사용하여 기본 색상과 강조할 색상을 지정하고, 해당 효과를 부여할 화면 요소를 child 속성으로 전달합니다. 위의 코드에서는 ListTile을 사용하여 리스트의 각 아이템을 구현하고, Shimmer로 감싸 부드러운 애니메이션 효과를 적용하고 있습니다.

플러터에서 Shimmer 패키지를 활용하여 홈 스크린에서 부드러운 애니메이션 효과를 쉽게 구현할 수 있습니다.

참고 자료

Shimmer 패키지 공식 문서
플러터 공식 홈페이지
Udemy의 ‘Learn Flutter & Dart to Build iOS & Android Apps’ 출처: udemy.com
플러터 공식 GitHub 저장소

위의 예시 코드와 설명은 Shimmer 패키지를 사용하여 홈 스크린에서 부드러운 애니메이션 효과를 구현하는 방법을 안내합니다. Shimmer 패키지의 더 자세한 정보는 공식 문서나 플러터 공식 홈페이지에서 확인할 수 있습니다.