[flutter] 플러터 shimmer를 사용한 뉴스 리더 앱 디자인 예시

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 뉴스 리더 앱을 개발하려고 합니다. 사용자가 앱을 실행했을 때, 뉴스 아이템이 로딩 중인 동안 그림자와 함께 부드러운 이펙트를 주면 사용자 경험을 향상할 수 있을 것 같습니다. 이를 위해 플러터의 shimmer 패키지를 사용해보겠습니다.

Shimmer란?

Shimmer는 어떤 내용이 로딩 중인 동안 부드럽게 표시되는 애니메이션이자 그래픽 이펙트입니다.

플러터 새빛 효과(Shimmer)를 적용하는 방법

플러터에서 shimmer 패키지를 쓰면, 로딩 중일 때 예쁜 효과를 줄 수 있습니다. 아래는 어떻게 사용할 수 있는지 간단한 예시입니다.

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

class NewsItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: CircleAvatar(),
      ),
      title: Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: Container(
          height: 16,
          color: Colors.white,
        ),
      ),
      subtitle: Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: Container(
          height: 12,
          color: Colors.white,
        ),
      ),
    );
  }
}

위 코드에서, shimmer 패키지의 Shimmer.fromColors 위젯으로 로딩 중에 표시되는 그림자 효과를 만듭니다.

결론

플러터의 shimmer 패키지를 사용하면 로딩 중일 때 아름다운 효과를 쉽게 추가할 수 있습니다. 뉴스 리더 앱 개발 시, 사용자가 데이터를 기다리는 동안 부드러운 이펙트를 줘서 사용자 경험을 향상할 수 있습니다.