[flutter] photo_view 패키지를 이용한 이미지 화살표 표시하기

04 Dec 2023

flutter

이미지를 확대/축소하고 드래그하여 이동할 수 있는 기능을 가진 이미지 뷰어를 구현하려면, Flutter의 photo_view 패키지를 사용할 수 있습니다. 이 패키지는 이미지를 편리하게 제어할 수 있는 기능을 제공합니다. 이번 포스트에서는 photo_view 패키지를 사용하여 이미지에 화살표를 표시하는 방법을 알아보겠습니다.

photo_view 패키지 설치하기

먼저, photo_view 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  photo_view: ^0.12.1

그리고 패키지를 가져오기 위해 다음 명령어를 실행해주세요:

flutter pub get

이미지 화살표 표시하기

이제 이미지에 화살표를 표시할 수 있는 기능을 구현해보겠습니다.

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

class ImageGallery extends StatefulWidget {
  @override
  _ImageGalleryState createState() => _ImageGalleryState();
}

class _ImageGalleryState extends State<ImageGallery> {
  int currentIndex = 0;
  List<String> images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Gallery'),
      ),
      body: Stack(
        children: [
          PhotoViewGallery.builder(
            itemCount: images.length,
            builder: (context, index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: AssetImage(images[index]),
              );
            },
            onPageChanged: (index) {
              setState(() {
                currentIndex = index;
              });
            },
          ),
          Positioned(
            top: 16,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  icon: Icon(
                    Icons.arrow_back,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    if (currentIndex > 0) {
                      setState(() {
                        currentIndex--;
                      });
                    }
                  },
                ),
                IconButton(
                  icon: Icon(
                    Icons.arrow_forward,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    if (currentIndex < images.length - 1) {
                      setState(() {
                        currentIndex++;
                      });
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

이 코드에서는 ImageGallery 클래스를 정의하여 화살표가 있는 이미지 갤러리를 구현합니다. currentIndex 변수는 현재 보고 있는 이미지의 인덱스를 저장합니다. images 리스트에는 보여줄 이미지 파일의 경로를 저장합니다.

PhotoViewGallery.builder 위젯을 사용하여 이미지를 표시합니다. itemCount에는 이미지 개수를, builder에는 각 이미지를 어떻게 보여줄지 정의합니다. 화살표를 표시하기 위해 Positioned 위젯을 사용하여 상단 가운데에 IconButton을 배치합니다. 각 화살표 버튼의 onPressed 콜백에서 currentIndex를 업데이트하여 이미지를 변경할 수 있습니다.

위의 코드를 실행하면, photo_view 패키지를 이용하여 이미지에 화살표를 표시하는 이미지 갤러리를 구현할 수 있습니다.

마무리

이번 포스트에서는 photo_view 패키지를 사용하여 이미지에 화살표를 표시하는 방법을 알아보았습니다. 이와 같은 방법을 사용하여 다양한 기능을 구현할 수 있으며, photo_view 패키지에는 더 많은 기능을 제공하므로 더 자세한 내용은 공식 문서를 확인해보시기 바랍니다.