flutter photo gallery 사용하기

Flutter에서 Photo Gallery는 사용자가 여러 이미지를 탐색할 수 있게 해주는 기능을 의미합니다.

사용자는 이미지를 확대하거나 축소할 수 있고, 스와이프하여 다음 이미지로 넘어갈 수 있으며, 이미지에 대한 메타데이터를 볼 수도 있습니다.

Flutter에서 Photo Gallery를 구현하기 위해 다양한 위젯과 패키지를 사용할 수 있으며, 그 중 photo_view 패키지가 많이 사용됩니다.

 

Photo Gallery의 주요 구성 요소

 

1. 이미지 데이터 소스: 이미지를 저장하거나 가져오는 곳입니다. 로컬 디렉토리, 원격 서버, 또는 데이터베이스 등이 될 수 있습니다.

2. 이미지 로딩 및 캐싱: 대량의 이미지를 부드럽게 처리하기 위해 효율적인 로딩 및 캐싱 메커니즘이 필요합니다. cached_network_image 패키지와 같은 도구를 사용할 수 있습니다.

3. 이미지 표시: 이미지를 화면에 표시하기 위해 Flutter의 다양한 위젯을 사용합니다. 특히 photo_view 패키지는 이미지 확대/축소, 드래그, 회전 등의 기능을 제공합니다.

4. UI 및 사용자 상호작용: 사용자가 이미지를 탐색하고 상호작용할 수 있는 UI를 설계합니다. 예를 들어, 스와이프를 통한 이미지 전환, 버튼을 통한 이미지 삭제 등입니다.

 

주요 패키지

 

• photo_view: 이미지를 확대/축소하고 드래그할 수 있는 기능을 제공하는 패키지입니다.

• cached_network_image: 네트워크 이미지를 로드하고 캐시하는 기능을 제공하는 패키지입니다.

 

예제 코드

 

아래는 photo_view 패키지를 사용하여 Photo Gallery를 구현하는 예제 코드입니다.

 

PhotoViewPage.dart

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

class PhotoViewPage extends StatefulWidget {
  final List<String> imagePaths;
  final int currentIndex;

  PhotoViewPage({required this.imagePaths, required this.currentIndex});

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

class _PhotoViewPageState extends State<PhotoViewPage> {
  late PageController _controller;
  late int currentPageIndex;

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: widget.currentIndex);
    currentPageIndex = widget.currentIndex;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PhotoViewGallery.builder(
            itemCount: widget.imagePaths.length,
            pageController: _controller,
            onPageChanged: (index) {
              setState(() {
                currentPageIndex = index;
              });
            },
            builder: (context, index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: NetworkImage(widget.imagePaths[index]),
                maxScale: PhotoViewComputedScale.covered * 3,
                minScale: PhotoViewComputedScale.contained,
              );
            },
            loadingBuilder: (context, event) {
              return Center(
                child: CircularProgressIndicator(
                  strokeWidth: 2,
                ),
              );
            },
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              margin: const EdgeInsets.only(left: 25, top: 25),
              child: IconButton(
                onPressed: () => Navigator.of(context).pop(),
                icon: const Icon(
                  Icons.close,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.only(bottom: 20),
              child: Text(
                '${currentPageIndex + 1} / ${widget.imagePaths.length}',
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

사용법

 

위 코드를 사용하기 위해 pubspec.yaml 파일에 photo_view 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.13.0 # 최신 버전을 확인하세요

 

Main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GalleryPage(),
    );
  }
}

class GalleryPage extends StatelessWidget {
  final List<String> imagePaths = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gallery')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PhotoViewPage(
                  imagePaths: imagePaths,
                  currentIndex: 0,
                ),
              ),
            );
          },
          child: Text('Open PhotoView Gallery'),
        ),
      ),
    );
  }
}

 

참고 자료

 

• photo_view 패키지 공식 문서

• cached_network_image 패키지 공식 문서

 

결론

 

Flutter에서 Photo Gallery를 구현하는 것은 photo_view와 같은 패키지를 사용하면 매우 간단합니다. 이 패키지를 사용하면 사용자에게 고급 이미지 뷰어 기능을 제공할 수 있으며, 다양한 소스에서 이미지를 로드하고 캐시할 수 있습니다. 이로 인해 사용자 경험이 향상됩니다.