플러터(Flutter)를 이용하여 앱을 개발할 때 화면이 바뀔 때 부드럽고 멋진 애니메이션 효과를 적용하고 싶을 때가 있습니다. 특히, 네트워크 요청 등의 작업으로 인해 화면 전환이 지연될 때 사용자 경험을 향상시키기 위해 로딩 애니메이션을 적용하고 싶을 수 있습니다. 이러한 상황에서 플러터의 shimmer 패키지를 사용하여 화면 전환 애니메이션을 구현할 수 있습니다.

Shimmer 애니메이션 소개

Shimmer 애니메이션은 화면 요소에 일시적으로 반짝이는 효과를 주어 로딩 상태임을 시각적으로 알려줍니다. 흔히 페이스북과 같은 소셜 미디어 앱에서 확인할 수 있는 애니메이션으로, 텍스트나 이미지 등의 요소에서 적용할 수 있습니다.

Shimmer 패키지 설치

먼저, shimmer 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 아래와 같이 shimmer 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

그런 다음, 터미널에서 프로젝트 루트 디렉토리로 이동하여 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

Shimmer를 이용한 화면 전환 애니메이션 구현

1. Shimmer 패키지 임포트

다음으로, 화면 전환 애니메이션을 적용할 화면의 파일에서 shimmer 패키지를 임포트합니다.

import 'package:shimmer/shimmer.dart';

2. Shimmer 효과 적용

이제 화면 전환 시에 Shimmer 효과를 적용할 위젯을 만들어야 합니다. 예를 들어, 다음과 같이 Container를 이용하여 Shimmer 효과를 적용할 수 있습니다.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Container(
    width: 200.0,
    height: 100.0,
    color: Colors.white,
  ),
),

위의 예제에서는 Shimmer.fromColors 메서드를 이용하여 Shimmer 효과를 적용하고 있습니다. baseColor와 highlightColor로 Shimmer의 기본 색상과 하이라이트 색상을 설정할 수 있습니다.

이제 Shimmer 효과를 적용할 화면 전환 애니메이션을 구현했습니다. 사용자 경험이 향상되는 멋진 화면 전환 애니메이션을 적용하여 앱을 더욱 매력적으로 만들어보세요.

더 많은 정보는 shimmer 패키지 문서에서 확인할 수 있습니다.