[flutter] photo_view 패키지로 이미지 회전/이동 제한하기

04 Dec 2023

flutter

이미지를 확대/축소하고 회전하는 기능을 제공하는 Flutter 패키지 중 하나인 photo_view는 이미지를 자유롭게 조작할 수 있는 많은 기능을 제공합니다. 그러나 때로는 이미지의 회전과 이동을 제한하고 싶을 수도 있습니다. 이번 블로그 포스트에서는 photo_view 패키지를 사용하여 이미지 회전과 이동을 제한하는 방법에 대해 알아보겠습니다.

패키지 추가하기

photo_view 패키지를 사용하기 위해서는 먼저 pubspec.yaml 파일에 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 photo_view 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter

  photo_view: ^0.11.1

저장 후 패키지를 가져오기 위해 터미널에서 다음 명령을 실행합니다.

flutter pub get

이미지 회전/이동 제한하기

photo_view를 사용하여 이미지 회전과 이동을 제한하려면 다음과 같은 단계를 따르면 됩니다.

PhotoView 위젯을 사용하여 이미지를 표시합니다.
CustomController를 사용하여 PhotoView 위젯의 제어를 설정합니다.
onScaleStateChanged 콜백을 사용하여 이미지의 크기 변경을 감지합니다.
onRotationUpdate 콜백을 사용하여 이미지의 회전 각도 변경을 감지합니다.
각각의 콜백에서 원하는 제한 조건을 검사하고, 필요한 경우 이벤트를 무시합니다.

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

class MyPhotoViewWidget extends StatefulWidget {
  @override
  _MyPhotoViewWidgetState createState() => _MyPhotoViewWidgetState();
}

class _MyPhotoViewWidgetState extends State<MyPhotoViewWidget> {
  double _previousScale;
  double _previousRotation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onScaleStart: (details) {
            _previousScale = 1.0;
          },
          onScaleUpdate: (details) {
            double scale = _previousScale * details.scale;
            double rotation = _previousRotation + details.rotation;

            // 이미지 회전 각도 제한
            if (rotation < -45.0 || rotation > 45.0) {
              return;
            }

            // 이미지 확대/축소 제한
            if (scale < 0.5 || scale > 2.0) {
              return;
            }

            setState(() {
              _previousScale = scale;
              _previousRotation = rotation;
            });
          },
          child: PhotoView(
            imageProvider: AssetImage('assets/image.jpg'),
            scaleStateController: CustomController(),
            loadingBuilder: (context, event) {
              return Center(
                child: CircularProgressIndicator(),
              );
            },
          ),
        ),
      ),
    );
  }
}

class CustomController extends PhotoViewController {
  @override
  void onScaleStateChanged(PhotoViewScaleState newScaleState) {
    // 이미지가 확대된 상태에서 이벤트 무시
    if (newScaleState == PhotoViewScaleState.zooming ||
        newScaleState == PhotoViewScaleState.zoomed) {
      ignoreRotationUpdate = true;
    } else {
      ignoreRotationUpdate = false;
      super.onScaleStateChanged(newScaleState);
    }
  }
}

위의 코드에서 CustomController 클래스는 PhotoViewController 클래스를 상속하여 onScaleStateChanged 메서드를 오버라이드합니다. 이 메서드에서 이미지가 확대된 상태에서는 회전 이벤트를 무시하고, 그 외의 상태에서는 회전 이벤트를 처리하도록 설정합니다.

또한, GestureDetector 위젯의 onScaleStart 및 onScaleUpdate 콜백에서 이미지의 회전 각도와 확대/축소 정도를 제한합니다. 필요에 따라 조건식을 수정하여 원하는 제한 조건을 추가하거나 변경할 수 있습니다.

이제 MyPhotoViewWidget을 사용하여 이미지가 제한된 회전과 이동을 가지도록 설정할 수 있습니다.

결론

photo_view 패키지를 사용하여 이미지 회전과 이동을 제한하는 방법에 대해서 알아보았습니다. 이를 통해 사용자가 원하는 대로 이미지를 컨트롤할 수 있으며, 필요한 경우 해당 기능을 수정하여 맞춤형 제한 조건을 추가할 수 있습니다. photo_view 패키지에 대한 더 자세한 내용은 공식 문서를 참고하시기 바랍니다.