Flutter에서 이미지를 회전하거나 이동하는 애니메이션 효과를 주기 위해 photo_view 패키지를 사용할 수 있습니다. photo_view는 이미지를 확대, 축소, 이동, 회전할 수 있는 기능을 제공하는 강력한 이미지 뷰어 패키지입니다.

1. photo_view 패키지 추가하기

먼저, pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 photo_view 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

별도의 패키지 매니저를 사용하지 않는 경우, 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter packages get

2. 이미지 뷰어 생성하기

이제 photo_view를 사용하여 이미지 뷰어를 생성하고, 애니메이션 효과를 적용할 수 있습니다. 아래의 코드는 PhotoView 위젯을 사용하여 이미지를 화면에 표시하는 예제입니다.

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Viewer'),
      ),
      body: Container(
        child: PhotoView(
          imageProvider: NetworkImage(imageUrl),
        ),
      ),
    );
  }
}

PhotoView 위젯은 imageProvider 속성을 통해 이미지를 로드하며, 여기서는 네트워크 이미지를 로드하기 위해 NetworkImage를 사용하였습니다.

3. 이미지 애니메이션 효과 주기

photo_view 패키지는 이미지에 대한 다양한 애니메이션 효과를 제공합니다. 아래는 이미지를 회전하거나 이동하는 애니메이션 효과를 줄 수 있는 속성들입니다.

이미지 회전

Container(
  child: PhotoView(
    imageProvider: NetworkImage(imageUrl),
    enableRotation: true, // 이미지 회전 허용
  ),
)

enableRotation 속성을 true로 설정하여 이미지 회전을 허용할 수 있습니다.

이미지 이동

Container(
  child: PhotoView(
    imageProvider: NetworkImage(imageUrl),
    backgroundDecoration: BoxDecoration(
      color: Colors.transparent, // 배경 투명하게 설정
    ),
    minScale: PhotoViewComputedScale.contained * 0.8, // 최소 크기 설정
    maxScale: PhotoViewComputedScale.covered * 2.0, // 최대 크기 설정
  ),
)

backgroundDecoration 속성을 사용하여 이미지 이동시 배경을 투명하게 설정할 수 있습니다. minScale과 maxScale 속성을 사용하여 이미지의 최소 크기와 최대 크기를 설정할 수도 있습니다.

이제 photo_view 패키지를 사용하여 이미지 회전 또는 이동 애니메이션 효과를 적용할 수 있습니다. 더 자세한 설정 및 사용 방법은 photo_view 패키지의 공식 문서를 참조하시기 바랍니다.