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

11 Dec 2023

flutter

앱에서 사용자에게 알림을 전달하는 것은 매우 중요합니다. 새로운 알림이 도착했을 때 사용자에게 시각적인 효과를 주어 주목을 끄는 효과를 가지게 할 수 있습니다. 푸시 알림 애니메이션을 구현하는 방법을 알아보겠습니다.

1. Shimmer 패키지 추가

플러터에서는 애니메이션이나 효과를 추가하기 위해 다양한 패키지를 사용할 수 있습니다. Shimmer 패키지는 알림이나 로딩 상태를 나타내는데 유용합니다.

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

dependencies:
  shimmer: ^2.0.0

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다:

flutter pub get

2. 푸시 알림 효과 구현

이제 shimmer 패키지를 사용하여 푸시 알림 효과를 구현해보겠습니다. 예를 들어, 앱에서 알림이 도착했을 때 상단에 알림이 슬라이드되며 나타나는 효과를 줄 수 있습니다. 이를 위해 다음과 같은 코드를 작성합니다:

import 'package:shimmer/shimmer.dart';

class NotificationAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Container(
        height: 80.0,
        width: double.infinity,
        color: Colors.white,
        // 알림 내용 및 아이콘 등을 추가합니다
      ),
    );
  }
}

위 코드에서 NotificationAnimation 위젯은 shimmer 패키지의 Shimmer.fromColors를 이용하여 푸시 알림의 슬라이드 애니메이션 효과를 나타내는데 사용됩니다.

마무리

푸시 알림은 사용자가 앱을 주목하도록 하고, 앱의 사용성을 높이는데 중요한 역할을 합니다. shimmer 패키지를 이용하여 푸시 알림에 애니메이션 효과를 추가함으로써 사용자 경험을 향상시킬 수 있습니다.

이와 같이 플러터에서 shimmer를 이용하여 앱의 푸시 알림 애니메이션을 구현할 수 있습니다.

참고 자료

Shimmer 패키지: https://pub.dev/packages/shimmer
Shimmer 패키지 GitHub 페이지: https://github.com/hnvn/flutter_shimmer