[flutter] photo_view 패키지를 사용한 이미지 좌우 이동 효과 주기

04 Dec 2023

flutter

이미지를 확대, 축소 및 이동할 수 있는 기능을 제공하는 Flutter 패키지인 photo_view를 사용하여 이미지 좌우로 스와이프하는 효과를 주는 방법을 알아보겠습니다.

photo_view 패키지 설치

photo_view 패키지를 사용하기 위해 pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  photo_view: ^0.11.1

패키지를 추가한 후에는 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

이미지 좌우 이동 효과 적용

photo_view 패키지를 사용하여 이미지를 좌우로 이동할 수 있는 효과를 주기 위해서는 PhotoView 위젯을 사용합니다. 다음은 기본적인 사진 뷰를 생성하는 예제입니다.

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

class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Viewer'),
      ),
      body: Container(
        child: PhotoView(
          imageProvider: AssetImage('images/my_image.jpg'),
        ),
      ),
    );
  }
}

위 예제에서 PhotoView 위젯의 imageProvider 속성에 이미지를 제공하는 프로바이더를 설정하면 됩니다. 이때 AssetImage 클래스를 사용하여 앱 내에 포함된 이미지를 지정할 수 있습니다. 웹 이미지나 로컬 파일도 사용할 수 있습니다.

이제 사진을 좌우로 스와이프할 수 있는 효과를 주기 위해 enableRotation 속성과 backgroundDecoration 속성을 추가해보겠습니다.

class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Viewer'),
      ),
      body: Container(
        child: PhotoView(
          imageProvider: AssetImage('images/my_image.jpg'),
          enableRotation: true,
          backgroundDecoration: BoxDecoration(
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

enableRotation 속성을 true로 설정하면 사용자는 사진을 스와이프하는 동안 이미지를 회전시킬 수 있습니다. backgroundDecoration 속성을 사용하여 배경 색상을 지정할 수 있습니다.

정리

photo_view 패키지를 사용하여 이미지 좌우로 스와이프하는 효과를 주는 방법에 대해 알아보았습니다. PhotoView 위젯을 사용하여 이미지를 확대, 축소 및 이동할 수 있는 기능도 추가할 수 있습니다. photo_view 패키지의 자세한 사용 방법은 공식 문서를 참조하시기 바랍니다.