[flutter] 플러터 shimmer를 이용한 모달창 애니메이션 구현 방법

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 모달 창을 만들고 새로운 화면을 완전히 표시하기 전에 shimmer 애니메이션을 추가하는 방법을 살펴보겠습니다.

1. Shimmer 패키지 추가

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

dependencies:
  shimmer: ^2.0.0

그리고 나서 flutter pub get 명령을 사용하여 패키지를 다운로드 및 설치합니다.

2. Shimmer 애니메이션 구현

이제, 모달 창에 shimmer 애니메이션을 구현해 보겠습니다. 다음은 기본적인 shimmer 애니메이션을 구현하는 예제 코드입니다.

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

class ShimmerModal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: SizedBox(
        height: 100,
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Center(
            child: Text(
              '로딩 중...',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

3. 모달 창에서 Shimmer 애니메이션 사용

마지막으로, 만든 shimmer 애니메이션을 모달 창에서 사용합니다. 다음은 모달 창을 띄우고, 일정 시간 후에 실제 내용이 표시되도록 하는 코드입니다.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return ShimmerModal();
  },
);
// 실제 내용 로딩
Future.delayed(Duration(seconds: 2), () {
  Navigator.pop(context); // shimmer 모달 창 닫기
  // 원하는 내용을 표시하는 모달 창 열기
});

이제, shimmer 애니메이션을 사용하여 모달 창을 만들고, 로딩 중일 때 사용자에게 효과적인 시각적 피드백을 제공할 수 있습니다.

더 많은 구현 방법과 샘플 코드는 shimmer 패키지의 문서를 참고해 주세요.