이미지를 확대/축소하고 회전/이동까지 가능한 기능을 구현하려면 photo_view 패키지를 사용할 수 있습니다. 이 패키지는 Flutter에서 이미지 뷰어를 손쉽게 구현하는 데 도움이 됩니다. 이번 포스트에서는 photo_view 패키지를 사용하여 이미지 회전과 이동 기능을 구현하는 방법에 대해 알아보겠습니다.
1. photo_view 패키지 추가하기
먼저, 프로젝트의 pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 패키지를 추가합니다:
dependencies:
flutter:
sdk: flutter
photo_view: ^0.11.1
변경 사항을 적용하기 위해 터미널에서 flutter packages get 명령을 실행합니다.
2. 이미지 뷰어 생성하기
이제 이미지 뷰어를 생성해보겠습니다. 아래와 같이 PhotoView 위젯을 사용하여 이미지를 표시할 수 있습니다:
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class ImageViewer extends StatefulWidget {
final String imageUrl;
ImageViewer({required this.imageUrl});
@override
_ImageViewerState createState() => _ImageViewerState();
}
class _ImageViewerState extends State<ImageViewer> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('이미지 뷰어'),
),
body: Center(
child: PhotoView(
imageProvider: NetworkImage(widget.imageUrl),
),
),
);
}
}
우리는 imageUrl 매개변수를 받아와서 해당 URL에서 이미지를 로드하고 PhotoView 위젯을 이용하여 이미지를 표시합니다.
3. 이미지 회전/이동 기능 추가하기
이제 이미지를 회전하고 이동하는 기능을 추가해보겠습니다. 이를 위해 PhotoView 위젯을 감싸는 GestureDetector 위젯을 사용합니다. 아래와 같이 코드를 수정해보세요:
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class ImageViewer extends StatefulWidget {
final String imageUrl;
ImageViewer({required this.imageUrl});
@override
_ImageViewerState createState() => _ImageViewerState();
}
class _ImageViewerState extends State<ImageViewer> {
double _scale = 1.0;
double _rotation = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('이미지 뷰어'),
),
body: GestureDetector(
onScaleUpdate: (details) {
setState(() {
_scale = details.scale;
});
},
onRotationUpdate: (details) {
setState(() {
_rotation = details.rotation;
});
},
child: Center(
child: Transform(
transform: Matrix4.diagonal3Values(_scale, _scale, 1) * Matrix4.rotationZ(_rotation),
alignment: FractionalOffset.center,
child: PhotoView(
imageProvider: NetworkImage(widget.imageUrl),
),
),
),
),
);
}
}
이제 onScaleUpdate 이벤트 핸들러를 사용하여 이미지를 확대/축소하고, onRotationUpdate 이벤트 핸들러를 사용하여 이미지를 회전할 수 있습니다. 이벤트 핸들러로부터 받아온 값을 이용하여 Transform 위젯을 사용하여 이미지를 확대/축소하고 회전합니다.
이제 photo_view 패키지를 사용하여 Flutter 애플리케이션에서 이미지 회전/이동 기능을 구현하는 방법을 알아보았습니다. photo_view 패키지는 이미지 뷰어를 구현하는 데 유용한 도구입니다. 추가적인 정보는 photo_view 패키지의 공식 문서를 참조하시기 바랍니다.