[flutter] photo_view 패키지의 이미지 핀치 줌 기능 사용하기

04 Dec 2023

flutter

photo_view

photo_view는 Flutter에서 이미지 핀치 줌(pinch-to-zoom) 기능을 지원하는 패키지입니다. 이 패키지를 사용하면 사용자가 이미지를 확대/축소하고 드래그하여 이동할 수 있는 인터랙티브한 이미지 뷰어를 구현할 수 있습니다.

photo_view 패키지의 기능을 사용하려면 먼저 해당 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 photo_view 패키지를 의존성으로 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

이미지 뷰어 화면을 구성하려면 PhotoView 위젯을 사용합니다. imageProvider 속성에 이미지를 제공하는 객체를 지정합니다. 이 예제에서는 NetworkImage를 사용하여 인터넷에서 이미지를 가져옵니다.

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Viewer'),
      ),
      body: Center(
        child: PhotoView(
          imageProvider: NetworkImage(imageUrl),
        ),
      ),
    );
  }
}

위젯을 사용하는 곳에서 해당 위젯을 호출하면 이미지 핀치 줌 기능이 포함된 이미지 뷰어가 표시됩니다.

import 'package:flutter/material.dart';
import 'package:your_app_name/image_viewer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App Name',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ImageViewer(
                  imageUrl: 'https://example.com/image.jpg',
                ),
              ),
            );
          },
          child: Text('Open Image Viewer'),
        ),
      ),
    );
  }
}

위와 같이 구현하면 Flutter 앱에서 photo_view 패키지를 사용하여 이미지 핀치 줌 기능을 갖춘 이미지 뷰어를 만들 수 있습니다. 자세한 사용 방법은 공식 문서를 참조하시기 바랍니다.