[flutter] photo_view 패키지로 이미지 드래그하여 이동하기

04 Dec 2023

flutter

flutter에서 이미지를 확대, 축소하고 드래그하여 이동할 수 있는 기능을 구현하려면 photo_view 패키지를 사용할 수 있습니다. photo_view 패키지는 ImageProvider를 사용하여 이미지를 로드하고 화면에 표시하며, 사용자가 이미지를 드래그하여 이동하고 확대, 축소할 수 있는 기능을 제공합니다.

1. `photo_view` 패키지 설치하기

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

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.10.3

pubspec.yaml 파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치해 주세요.

2. `photo_view` 사용하기

photo_view 패키지를 사용하여 이미지를 드래그하여 이동하는 기능을 구현하기 위해 다음과 같은 단계를 따라야 합니다.

2.1. 상태 관리 변수 선언하기

먼저, photo_view 위젯을 사용하기 위해 상태 관리 변수를 선언해야 합니다. 이 변수는 이미지의 위치를 저장하는 데 사용됩니다.

Offset _position = Offset(0, 0);

2.2. `photo_view` 위젯 구현하기

이제 photo_view 위젯을 구현할 차례입니다. 다음과 같이 PhotoView 위젯을 사용하고 ImageProvider를 제공해야 합니다.

PhotoView(
  imageProvider: AssetImage('assets/images/sample_image.jpg'),
  minScale: 0.1,
  maxScale: 2.0,
  initialScale: 1.0,
  enableRotation: true,
  basePosition: _position,
  onPositionChanged: (Offset position) {
    setState(() {
      _position = position;
    });
  },
),

위 코드에서 imageProvider는 이미지의 경로를 제공해야 합니다. 이 예시에서는 assets/images/sample_image.jpg 경로에 이미지 파일이 있는 것을 가정합니다. minScale과 maxScale은 이미지의 최소 및 최대 축소 비율을 설정하며, initialScale은 초기 확대/축소 비율을 설정합니다. enableRotation은 이미지의 회전을 활성화하는 데 사용됩니다. basePosition은 이미지의 초기 위치를 설정하는 데 사용됩니다. onPositionChanged 콜백 함수는 이미지의 위치가 변경될 때마다 호출되며, _position 변수를 업데이트하여 이를 저장합니다.

3. 완성된 코드 예시

아래 코드는 photo_view 패키지를 사용하여 이미지를 드래그하여 이동하는 예시입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drag and Move Image'),
        ),
        body: Center(
          child: PhotoViewSample(),
        ),
      ),
    );
  }
}

class PhotoViewSample extends StatefulWidget {
  @override
  _PhotoViewSampleState createState() => _PhotoViewSampleState();
}

class _PhotoViewSampleState extends State<PhotoViewSample> {
  Offset _position = Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: PhotoView(
        imageProvider: AssetImage('assets/images/sample_image.jpg'),
        minScale: 0.1,
        maxScale: 2.0,
        initialScale: 1.0,
        enableRotation: true,
        basePosition: _position,
        onPositionChanged: (Offset position) {
          setState(() {
            _position = position;
          });
        },
      ),
    );
  }
}

위 코드를 실행하면 assets/images/sample_image.jpg 파일이 있는 이미지가 표시되고, 사용자는 이미지를 드래그하여 이동할 수 있습니다.

4. 참고 자료

photo_view 패키지 문서

1. photo_view 패키지 설치하기

2. photo_view 사용하기