[flutter] 플러터 shimmer를 이용한 앱의 알림 센터 애니메이션 구현 방법

11 Dec 2023

flutter

알림 센터는 앱에 있어서 중요한 부분 중 하나입니다. 사용자에게 새로운 알림을 시각적으로 표시하여 중요한 정보를 전달할 수 있습니다. 이번 블로그에서는 Flutter로 알림 센터에 화려한 shimmer 효과를 추가하는 방법에 대해 알아보겠습니다.

Shimmer 효과란?

Shimmer 효과는 UI 요소가 반짝이는 효과를 주는 것을 말합니다. 이것은 주로 로딩 중인 상태를 나타내거나 사용자의 주의를 끌기 위해 사용됩니다.

Shimmer 패키지 설치

첫 번째로, shimmer 패키지를 Flutter 프로젝트에 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

알림 센터 구현

Flutter에서 알림 센터를 구현합니다. 알림 센터는 기본적으로 ListView나 Column과 같은 위젯으로 구성됩니다. 이제 이 위젯 내부에 Shimmer.fromColors 위젯을 추가하여 shimmer 효과를 구현할 수 있습니다.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: ListTile(
    leading: CircleAvatar(
      backgroundColor: Colors.grey[300],
      radius: 25,
    ),
    title: Text('새로운 알림', style: TextStyle(fontSize: 16)),
    subtitle: Text('이제부터 새로운 알림이 여기에 표시됩니다.'),
    trailing: Text('1분 전', style: TextStyle(fontSize: 12)),
  ),
),

위 예시에서는 Shimmer.fromColors 위젯으로 ListTile을 감싸 shimmer 효과를 추가했습니다.

이제 앱이 새로운 알림을 받았을 때 이러한 효과를 적용하여 알림 센터를 화려하게 표현할 수 있게 되었습니다.

언제나 사용자 경험을 고려하여 애니메이션 효과나 시각적 요소를 추가하는 것은 유용합니다. Shimmer 효과를 통해 알림 센터를 더욱 매력적으로 만들고 사용자의 참여도를 높일 수 있습니다.

이상으로, Flutter를 사용하여 알림 센터에 Shimmer 효과를 추가하는 방법에 대해 알아보았습니다. 유용한 정보이고 실제 구현에 도움이 되셨기를 바랍니다.

Shimmer 효과란?

Shimmer 패키지 설치

알림 센터 구현

참고 자료