[flutter] 플러터 shimmer를 이용한 앱의 카메라 필터 애니메이션 구현

11 Dec 2023

flutter

오늘은 플러터(Flutter)의 shimmer 패키지를 활용하여 카메라 필터 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. shimmer 패키지 설치

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

dependencies:
  shimmer: ^1.1.3

그리고 패키지를 설치합니다.

flutter pub get

2. 카메라 필터 애니메이션 구현

카메라 필터 애니메이션을 구현하기 위해 shimmer 위젯을 사용합니다. 아래는 간단한 예제 코드입니다.

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

class CameraFilterAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.white,
      ),
    );
  }
}

위 예제에서는 Shimmer.fromColors 위젯을 사용하여 baseColor와 highlightColor를 설정하고, 필터 애니메이션을 적용할 컨테이너를 정의합니다.

3. 필터 애니메이션 효과 적용

위젯을 화면에 추가하여 필터 애니메이션 효과를 적용할 수 있습니다. 아래는 화면에 CameraFilterAnimation 위젯을 추가하는 예제 코드입니다.

class CameraScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('카메라'),
      ),
      body: Center(
        child: CameraFilterAnimation(),
      ),
    );
  }
}

결론

위의 예제 코드를 통해 플러터의 shimmer 패키지를 사용하여 카메라 필터 애니메이션을 구현하는 방법에 대해 알아보았습니다. shimmer를 이용하면 간단하게 아름다운 애니메이션 효과를 적용할 수 있으며, 사용자에게 시각적인 재미를 더해줄 수 있는 장점이 있습니다.