[Flutter] Shimmer 라이브러리에 대해 알아보자

안녕하세요! 

오늘은 Shimmer 라이브러리에 대해 알아보겠습니다.

---

https://pub.dev/packages/shimmer

shimmer | Flutter Package

Shimmer 라이브러리는 로딩 indicator와 유사하다고 보시면 됩니다.

그러나 내가 원하는 위젯과 모양에 넣어서 적용할 수 있고, 부분적인 로딩에 관해서 처리하기 용이하다는 장점이 있습니다.

안드로이드나 iOS 네이티브 플랫폼에서는 Skeleton이라 하는 유명한 라이브러리와 유사한 성격의 라이브러리입니다.

 

먼저 pubspec.yaml에

shimmer: ^3.0.0

shimmer 라이브러리를 추가한 후 flutter pub get으로 라이브러리를 프로젝트에 적용시켜 줍니다.

 

사용 예시

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);

pub.dev에 올라와있는 사용예시입니다.

• baseColor : shimmer 효과에서 가장 많은 부분을 차지하는 색깔.
• highlightColor : shimmer 효과에서 indicator처럼 지나가는 부분의 색깔.
• child : shimmer 효과를 줄 위젯

매우 간단하지만 한 가지 유의사항이 있습니다. shimmer 효과는 하위의 특정 위젯 (제가 알아본 걸로는 Container, Text)에 관해서만 적용이 된다고 합니다. 그러니 본인이 shimmer 효과를 넣으려 한다면, 그에 맞는 위젯을 구성해야 됩니다.

이미지 로딩 예시

CachedNetworkImage(
    imageUrl: imageUrl,
    fit: BoxFit.fitWidth,
    placeholder: (context, string) {
      return Shimmer.fromColors(
        baseColor: Colors.grey,
        highlightColor: Colors.grey.withOpacity(0.8),
        child: Container(color: Colors.grey),
      );
    }
);

CachedNetworkImage 라이브러리를 같이 사용했습니다.

placeholder에 Shimmer를 넣으면 이미지가 완전히 불러오기 전까지 shimmer 효과를 볼 수 있습니다.

 

리스트 로딩 예시

pub.dev shimmer 라이브러리 소개 사진

ListView.separated(
    itemCount: isLoading ? 2 : contentList.length,
    itemBuilder: (context, index) {
      if (isLoading){
        return ContentLoadingCell();
      }

      final content = contentList[index];

      return ContentCell(content: content);
    },
    separatorBuilder: (context, index) {
      return const Divider(thickness: 2, color: Colors.grey);
    },
);

위와 같은 list shimmer도 응용해서 이렇게 활용할 수 있습니다!

API 호출하는 파트에서 isLoading state를 true로 변경해 주고, isLoading인 상태에서는 ContentLoadingCell을 띄워 shimmer 효과를 보여주고, 결괏값이 왔다면, isLoading state를 false로 변경해 주어, 본래 보여주려 한 리스트 위젯을 보여주면 됩니다.

 

개인적인 생각

개인적인 생각으론, 기능 자체가 shimmer 효과를 Container에 입힌다가 끝이라 매우 아쉽다 생각이 듭니다. Skeleton을 iOS에서 사용해 보았을 때는, 위젯 자체에 덧붙어서 애니메이션이 나올 분기, 애니메이션 타입 등이 세부 조정과 따로 모양을 만들어주지 않아도 된다는 점이 매우 용이했는데, 이 Shimmer 라이브러리는 shimmer 효과만 보여준다 그 이상이 아닌 것 같습니다. 거기다 특정 위젯에서만 효과가 보인다는 점도 아쉬운 것 같습니다.