[flutter] 플러터 shimmer를 이용한 앱의 섹션 헤더 애니메이션 구현 방법

11 Dec 2023

flutter

플러터로 개발하는 앱에서 섹션 헤더에 애니메이션 효과를 주고 싶을 때, shimmer를 이용하여 부드러운 애니메이션 효과를 구현할 수 있습니다. 아래에서는 플러터 shimmer를 이용하여 앱의 섹션 헤더에 애니메이션을 추가하는 방법을 알아보겠습니다.

1. shimmer 패키지 추가

먼저, shimmer 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 shimmer 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

이후, pub get 명령어를 실행하여 패키지를 설치합니다.

2. 섹션 헤더 위젯 구현

섹션 헤더를 나타내는 위젯을 구현합니다. 이때, shimmer 위젯을 이용하여 부드러운 애니메이션 효과를 추가합니다.

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

class SectionHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: Row(
          children: [
            Container(
              width: 100,
              height: 20,
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제 코드에서 Shimmer.fromColors를 사용하여 부드러운 애니메이션을 설정하고, SectionHeader 위젯에 shimmer 애니메이션을 추가합니다.

3. 섹션 헤더 위젯 사용

이제 앱의 섹션 헤더를 나타내는 부분에 위에서 구현한 SectionHeader 위젯을 사용하면 애니메이션 효과가 적용된 섹션 헤더를 확인할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:your_package_name/section_header.dart';

class YourScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your App'),
      ),
      body: ListView(
        children: [
          SectionHeader(),
          // Other widgets...
        ],
      ),
    );
  }
}

위의 코드에서는 SectionHeader 위젯을 ListView 등의 앱의 섹션 헤더를 나타내는 부분에 추가하여, shimmer 애니메이션을 확인할 수 있습니다.

이와 같이 shimmer 패키지를 이용하여 플러터 앱의 섹션 헤더에 부드러운 애니메이션 효과를 추가할 수 있습니다. 이를 통해 앱의 UI를 더 동적이고 눈에 띄도록 만들 수 있습니다.

참고: shimmer 패키지