[flutter] photo_view 패키지로 이미지 레이어 추가하기

04 Dec 2023

flutter

이번에는 Flutter 앱에 이미지 레이어를 추가하는 방법에 대해 알아보겠습니다. 우리는 photo_view 패키지를 사용하여 이미지를 확대/축소하고 스와이프하여 이동할 수 있는 간단한 이미지 뷰어를 만들 것입니다.

1. photo_view 패키지 추가하기

먼저 pubspec.yaml 파일에 photo_view 패키지를 추가해야합니다. 아래와 같이 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.11.1

의존성을 추가한 후에는 pub get 명령어를 실행하여 패키지를 다운로드하고 세팅합니다.

2. ImageViewer 위젯 생성하기

이제 ImageViewer 위젯을 생성해보겠습니다. ImageViewer는 StatefulWidget을 상속받아 구현됩니다. 또한 photo_view 패키지의 PhotoView 위젯을 사용하여 이미지를 렌더링합니다.

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

class ImageViewer extends StatefulWidget {
  final String imageUrl;

  ImageViewer(this.imageUrl);

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

class _ImageViewerState extends State<ImageViewer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhotoView(
          imageProvider: NetworkImage(widget.imageUrl),
        ),
      ),
    );
  }
}

위의 코드에서 ImageViewer 위젯은 imageUrl을 입력받아 PhotoView 위젯을 생성하여 이미지를 화면에 표시합니다.

3. 이미지 레이어 호출하기

마지막으로, 이미지 레이어를 호출하는 방법에 대해 알아보겠습니다. 이를 위해 어떤 이벤트가 발생했을 때 이미지 레이어를 표시할 수 있는 버튼 또는 위젯을 추가하면 됩니다.

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

위의 코드에서 RaisedButton을 클릭하면 ImageViewer 위젯이 호출되고 https://example.com/image.jpg URL에서 이미지를 로드하여 레이어로 표시됩니다.

결론

이번에는 photo_view 패키지를 활용하여 Flutter 앱에 이미지 레이어를 추가하는 방법을 알아보았습니다. 이를 통해 사용자들은 이미지를 간편하게 확대, 축소 및 이동할 수 있게 됩니다. photo_view 패키지는 다양한 설정과 제스처 기능을 제공하므로 개발자들은 해당 패키지의 문서를 참고하여 원하는 이미지 뷰어를 구현할 수 있습니다.