Flutter에서 이미지를 스와이프하여 확대 및 축소할 수 있는 기능을 구현하고 싶다면 photo_view 패키지를 사용할 수 있습니다. 이 패키지를 활용하면 편리하게 이미지 스와이프 기능을 구현할 수 있습니다.
photo_view 패키지 설치하기
먼저, photo_view 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가해주세요:
dependencies:
photo_view: ^0.13.2
의존성을 추가한 후에는 pub get 명령어를 실행하여 패키지를 다운로드하고 프로젝트에 적용합니다.
이미지 스와이프 기능 구현하기
이제 photo_view 패키지를 사용하여 이미지 스와이프 기능을 구현해보겠습니다.
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
class SwipeImageScreen extends StatefulWidget {
@override
_SwipeImageScreenState createState() => _SwipeImageScreenState();
}
class _SwipeImageScreenState extends State<SwipeImageScreen> {
List<String> imageUrls = [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg",
// Add more image URLs as needed
];
int currentIndex = 0;
@override
Widget build(BuildContext context) {
return Container(
child: PhotoViewGallery.builder(
itemCount: imageUrls.length,
builder: (BuildContext context, int index) {
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(imageUrls[index]),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 2,
heroAttributes: PhotoViewHeroAttributes(tag: index),
);
},
onPageChanged: (int index) {
setState(() {
currentIndex = index;
});
},
loadingBuilder: (BuildContext context, ImageChunkEvent event) {
return Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}
위의 코드에서는 SwipeImageScreen이라는 StatefulWidget을 정의하고, imageUrls 리스트에 이미지 URL을 저장합니다. PhotoViewGallery.builder를 사용하여 이미지를 스와이프할 수 있는 갤러리 뷰를 생성합니다. imageProvider에는 현재 인덱스에 해당하는 이미지 URL을 넣어줍니다. minScale과 maxScale을 조정하여 이미지의 최소 및 최대 크기를 설정할 수 있습니다.
또한, onPageChanged 콜백을 사용하여 현재 인덱스를 변경할 때마다 currentIndex 값을 업데이트합니다. 이렇게 하면 현재 보고 있는 이미지의 인덱스를 추적할 수 있습니다.
마지막으로, loadingBuilder를 사용하여 이미지가 로딩되는 동안에 표시할 위젯을 설정할 수 있습니다. 위의 예제에서는 로딩 중에는 CircularProgressIndicator를 표시합니다.
사용하기
이제 SwipeImageScreen 위젯을 화면에 출력하면 이미지 스와이프 기능이 적용된 갤러리 형태의 화면이 나타납니다. 이제 앱에 맞게 이미지 URL을 수정하거나 새로운 이미지를 추가하여 원하는 이미지 스와이프 기능을 구현하면 됩니다.
결론
photo_view 패키지를 사용하면 Flutter 앱에서 이미지 스와이프 기능을 쉽게 구현할 수 있습니다. 이 패키지를 활용하여 사용자가 이미지를 확대, 축소하고 다음 혹은 이전 이미지로 스와이프할 수 있는 기능을 구현해보세요.