[flutter] photo_view 패키지를 활용한 이미지 회전 제스처 적용하기

04 Dec 2023

flutter

이번 글에서는 Flutter에서 photo_view 패키지를 사용하여 이미지 회전 제스처를 적용하는 방법에 대해 알아보겠습니다.

photo_view 패키지란?

photo_view는 Flutter에서 이미지를 확대/축소하고 드래그 제스처를 사용하여 이미지를 이동할 수 있는 기능을 제공하는 패키지입니다. 이 패키지는 이미지 갤러리 앱이나 상세보기 화면에서 많이 사용됩니다.

패키지 설치하기

pubspec.yaml 파일에 다음과 같이 photo_view 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.11.1

설치를 완료하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

이미지 회전 제스처 적용하기

photo_view 패키지를 임포트합니다:

import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:photo_view/photo_view_scale_state.dart';

회전 가능한 이미지를 표시할 위젯을 생성합니다:

class RotatableImageView extends StatefulWidget {
  final String imageUrl;

  RotatableImageView({required this.imageUrl});

  @override
  _RotatableImageViewState createState() => _RotatableImageViewState();
}

class _RotatableImageViewState extends State<RotatableImageView> {
  double rotationAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        onLongPressMoveUpdate: (details) {
          setState(() {
            rotationAngle += details.delta.dx;
          });
        },
        child: Transform.rotate(
          angle: rotationAngle,
          child: PhotoView(
            imageProvider: NetworkImage(widget.imageUrl),
            loadingBuilder: (context, event) {
              return Center(
                child: CircularProgressIndicator(),
              );
            },
          ),
        ),
      ),
    );
  }
}

생성한 위젯을 사용하여 이미지를 화면에 표시합니다:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('이미지 회전'),
      ),
      body: RotatableImageView(imageUrl: 'https://example.com/image.jpg'),
    ),
  );
}

이제 RotatableImageView 위젯을 사용하여 이미지를 표시하면, 사용자가 이미지 위에서 길게 누르고 이동하면 이미지가 회전됩니다.

결론

이 글에서는 Flutter에서 photo_view 패키지를 사용하여 이미지 회전 제스처를 적용하는 방법에 대해 알아보았습니다. 이를 사용하여 이미지 갤러리 앱이나 상세보기 화면을 개발할 때 유용하게 활용할 수 있습니다.

photo_view 패키지에 대한 자세한 정보는 공식 문서를 참조하시기 바랍니다.