[flutter] photo_view 패키지를 활용한 이미지 캔버스 제작하기

04 Dec 2023

flutter

이번 글에서는 Flutter 애플리케이션에서 이미지 캔버스를 만드는 방법에 대해 알아보겠습니다. 이를 위해 photo_view 패키지를 사용할 것입니다. photo_view 패키지는 간단하게 이미지를 확대 및 축소하고 드래그할 수 있는 기능을 제공합니다.

photo_view 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.11.1

그리고 패키지를 적용하기 위해 pub get 명령을 실행하십시오.

이미지 캔버스 생성하기

이제 이미지 캔버스를 생성하는 Flutter 위젯을 만들어 보겠습니다. 우선, 홈 화면에서 이미지를 터치하면 전체 화면으로 이미지가 나타나도록 설정하겠습니다.

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

class CanvasScreen extends StatelessWidget {
  final String imageUrl;

  CanvasScreen({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: PhotoView(
            imageProvider: NetworkImage(imageUrl),
          ),
        ),
      ),
    );
  }
}

이 위젯은 이미지 URL을 매개변수로 받아와서 PhotoView 위젯으로 화면 전체에 이미지를 보여줍니다. 이미지를 터치하면 캔버스 화면에서 나가도록 Navigator.pop을 사용합니다.

캔버스 화면에서 이미지 캔버스 사용하기

이미지 캔버스를 사용하려면 캔버스 화면에서 사용자의 드래그 및 확대/축소 동작을 처리해야 합니다. 이를 위해 PhotoView 위젯의 controller를 사용할 수 있습니다.

class CanvasScreen extends StatefulWidget {
  final String imageUrl;

  CanvasScreen({required this.imageUrl});

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

class _CanvasScreenState extends State<CanvasScreen> {
  final _controller = PhotoViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: PhotoView(
            imageProvider: NetworkImage(widget.imageUrl),
            controller: _controller,
          ),
        ),
      ),
    );
  }
}

위 코드에서 _controller를 생성하여 PhotoView 위젯에 전달합니다. 이렇게 하면 사용자의 동작을 감지하고 처리할 수 있습니다.

결론

이제 Flutter 애플리케이션에서 photo_view 패키지를 활용하여 이미지 캔버스를 만들 수 있는 방법에 대해 알아보았습니다. photo_view 패키지의 강력한 기능을 사용하여 사용자에게 이미지를 즐길 수 있는 인터랙티브한 경험을 제공할 수 있습니다.

더 많은 photo_view 패키지의 기능과 사용법을 알고 싶다면 여기를 참조하십시오.