[flutter] 플러터 shimmer를 사용한 음악 플레이어 애니메이션 예시

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 애니메이션과 사용자 경험을 향상시키는 광범위한 라이브러리를 제공합니다. 이번에는 Shimmer 애니메이션을 사용하여 음악 플레이어에 반짝이는 효과를 추가하는 방법을 알아보겠습니다.

Shimmer 애니메이션 개요

Shimmer 애니메이션은 로딩 중이나 콘텐츠를 가져오는 동안 화면에서 반짝이는 효과를 제공하는 효과적인 방법입니다. 이는 사용자들이 어떤 것이 로딩 중이라는 것을 알리며, 지루한 로딩 화면을 조금 더 흥미롭게 만들어 줍니다.

Shimmer 애니메이션 라이브러리

Flutter에서 Shimmer 애니메이션을 사용하기 위해서는 shimmer 라이브러리를 추가하면 됩니다.

dependencies:
  shimmer: ^2.0.0

음악 플레이어 Shimmer 애니메이션 예시

다음은 음악 플레이어에 Shimmer 애니메이션을 적용한 예시입니다. 코드를 통해 어떻게 구현하는지 살펴보겠습니다.

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

class MusicPlayerShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: Container(
                width: 100,
                height: 100,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(width: 16.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Shimmer.fromColors(
                  baseColor: Colors.grey[300],
                  highlightColor: Colors.grey[100],
                  child: Container(
                    height: 16,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 8.0),
                Shimmer.fromColors(
                  baseColor: Colors.grey[300],
                  highlightColor: Colors.grey[100],
                  child: Container(
                    height: 16,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

음악 플레이어 Shimmer 애니메이션 예시에서는 shimmer 라이브러리를 사용하여, 앨범 아트와 음악 제목, 아티스트 등의 정보가 표시되는 곳에 반짝이는 효과를 적용했습니다.

이렇게 추가된 Shimmer 애니메이션을 통해 사용자들은 콘텐츠가 로딩 중임을 시각적으로 알 수 있고, 동시에 화면에 보다 흥미롭게 느낄 수 있습니다.

Shimmer 애니메이션은 로딩 상태를 시각적으로 표현하는 역할을 하며, 콘텐츠가 로딩되는 동안 사용자들이 지루함을 느끼지 않도록 돕는데 큰 도움을 줍니다.

이제 Shimmer 애니메이션을 사용하여 음악 플레이어에 반짝이는 효과를 추가하는 과정을 알아보았습니다. 본 예시를 참고하여, 앱의 다양한 부분에 Shimmer 애니메이션을 적용하여 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원하시거나 관련하여 도움이 필요하시다면 제공될 의뢰 시스템을 사용하여 추가 도움을 요청하실 수 있습니다.

References

Flutter Shimmer: https://pub.dev/packages/shimmer