[flutter] 플러터 shimmer를 활용한 사진 필터 애니메이션

플러터는 강력한 UI 기능을 제공하는 프레임워크로, shimmer 애니메이션을 활용하여 사용자의 눈길을 끄는 사진 필터 애니메이션을 만들 수 있습니다. Shimmer 애니메이션은 빛을 받아번지는 효과를 주어 부드럽게 사라지고 나타나는 효과를 냅니다.

필요한 패키지 추가

먼저, 플러터 pubspec.yaml 파일에 shimmer 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

Shimmer 애니메이션 적용 방법

Shimmer 애니메이션을 적용하려면, 이미지 위에 Shimmer.fromColors 위젯을 배치하고, 형상과 색상을 정의해야 합니다.

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

class PhotoFilterAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 150.0,
        height: 150.0,
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Image.network(
            'https://example.com/image.jpg',
            fit: BoxFit.cover,
          ),
        ));
  }
}

위 코드에서, Shimmer.fromColors 위젯은 baseColor로 기본 색상을, highlightColor로 강조 색상을 정의합니다. 해당 위젯은 이미지 위에 Shimmer 애니메이션을 적용하고, 주어진 색상으로 애니메이션 효과를 적용합니다.

결과 확인

위 코드를 실행하면, 지정된 이미지가 부드럽게 사라졌다 나타나는 Shimmer 애니메이션 효과가 적용된 사진 필터 애니메이션이 나타납니다.

이와 같이, 플러터에서는 Shimmer 애니메이션을 활용하여 사진 필터 애니메이션을 만들 수 있습니다.

결론

플러터의 shimmer를 사용하면 사용자 경험을 향상시키는 멋진 사진 필터 애니메이션을 손쉽게 구현할 수 있습니다.