[flutter] photo_view 패키지로 이미지 더블 탭하여 확대/축소 기능 구현하기

04 Dec 2023

flutter

Flutter에서 이미지를 확대/축소하는 기능을 구현하려면 photo_view 패키지를 사용할 수 있습니다. photo_view는 터치 제스처를 활용하여 이미지를 확대, 축소, 이동할 수 있는 기능을 제공합니다. 이제 photo_view 패키지를 사용하여 이미지 더블 탭하여 확대/축소 기능을 구현하는 방법을 알아보겠습니다.

1. photo_view 패키지 추가하기

먼저, pubspec.yaml 파일의 dependencies 부분에 photo_view 패키지를 추가해야 합니다. 아래와 같이 photo_view 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

그리고 패키지를 적용하기 위해 터미널에서 flutter pub get 명령어를 입력하여 패키지를 다운로드합니다.

2. Image 화면에 추가하기

이제 photo_view 패키지를 사용하여 이미지를 더블 탭하여 확대/축소할 수 있는 화면을 구성해보겠습니다. PhotoView 위젯을 사용하여 이미지를 화면에 추가합니다.

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

class ZoomableImageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zoomable Image'),
      ),
      body: Container(
        child: PhotoView(
          imageProvider: AssetImage('assets/images/image.jpg'),
          backgroundDecoration: BoxDecoration(
            color: Colors.white,
          ),
          minScale: PhotoViewComputedScale.contained * 0.8,
          maxScale: PhotoViewComputedScale.covered * 2,
        ),
      ),
    );
  }
}

PhotoView 위젯을 사용하면 imageProvider를 통해 이미지를 로드할 수 있습니다. 위의 예제는 앱의 assets/images 폴더에 있는 image.jpg 파일을 로드하는 예제입니다.

minScale과 maxScale 속성을 사용하여 이미지를 어느 정도까지 확대/축소할 수 있는지 설정할 수 있습니다.

3. MaterialApp에 ZoomableImageScreen 등록하기

이제 ZoomableImageScreen을 이용하여 이미지를 확대/축소할 수 있는 화면을 보여주는 MaterialApp 위젯에 등록합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: ZoomableImageScreen(),
  ));
}

이제 앱을 실행하고 이미지 화면으로 이동하면 이미지를 더블 탭하여 확대/축소할 수 있는 기능을 사용할 수 있습니다.

참고 자료

위의 예제 코드와 설명을 참고하여 photo_view 패키지를 사용하여 이미지 더블 탭하여 확대/축소 기능을 구현해보세요. photo_view 패키지는 사용자 친화적인 이미지 확대/축소 기능을 제공하므로, Flutter 애플리케이션 개발에 유용하게 활용할 수 있습니다.