[flutter] 플러터 shimmer를 사용한 음악 스트리밍 앱 디자인 예시

11 Dec 2023

flutter

오늘은 플러터에서 Shimmer를 사용하여 음악 스트리밍 앱의 디자인을 어떻게 할 수 있는지에 대해 살펴보겠습니다.

Shimmer는 사용자들이 데이터가 로드될 때까지 기다리는 동안 사용자 경험을 향상시키기 위해 사용됩니다. 음악 스트리밍 앱에서는 Shimmer를 사용하여 사용자가 음악 목록이나 앨범 아트 등의 콘텐츠가 로드되기를 기다리는 동안에도 시각적 효과를 제공할 수 있습니다.

Shimmer 효과 적용

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

dependencies:
  shimmer: ^2.0.0

그런 다음, 예를 들어 음악 목록을 표시하는 ListView에서 Shimmer 효과를 적용할 수 있습니다.

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

class MusicListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Music List'),
      ),
      body: 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,
              ),
              title: Text('Loading...'),
              subtitle: Text('Loading...'),
            ),
          );
        },
      ),
    );
  }
}

위 코드에서 Shimmer.fromColors 위젯은 목록 아이템이 로드될 때 Shimmer 효과를 나타냅니다.

결과

이제 앱을 실행하면, 데이터가 로드될 때까지 Shimmer 효과가 적용된 음악 목록화면을 볼 수 있습니다. 사용자는 실제 데이터가 로드될 때까지 대기하는 동안 심심해하지 않고 사용자 경험을 개선할 수 있습니다.

음악 스트리밍 앱 디자인에 Shimmer를 활용하면, 사용자들이 앱을 사용하는 동안 부드러운 고급 경험을 제공할 수 있습니다.

이렇게 Shimmer를 사용하여 음악 스트리밍 앱의 디자인을 더욱 향상시킬 수 있습니다.

Shimmer 효과 적용

결과

참고 자료