[flutter] Swipeable Widget을 이용한 이미지 갤러리 구현하기

08 Dec 2023

flutter

이미지 갤러리는 사용자가 이미지를 편리하게 볼 수 있는 중요한 기능입니다. Flutter 앱에서 Swipeable Widget을 사용하여 사용자가 스와이프하여 이미지를 전환할 수 있는 갤러리를 만들 수 있습니다. 이번 블로그에서는 Swipeable Widget을 이용하여 Flutter 앱에 이미지 갤러리를 어떻게 구현하는 지 살펴보겠습니다.

Swipeable Widget은 사용자가 제스처를 사용하여 스와이프 하는 동작을 감지하고, 해당 동작에 반응하는 위젯입니다. 사용자가 화면을 스와이프할 때마다 새로운 내용을 표시하거나 페이지를 전환하는 데 사용할 수 있습니다.

이미지 갤러리 구현하기

먼저, flutter_swipeable 패키지를 사용하여 Swipeable Widget을 추가합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter_swipeable: ^0.0.6

이제 이미지 갤러리 페이지를 만들고 Swipeable Widget으로 감싸 이미지를 추가합니다.

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

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

class _ImageGalleryState extends State<ImageGallery> {
  int _currentIndex = 0;
  List<String> _images = [
    'assets/image1.jpg',
    'assets/image2.jpg',
    'assets/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이미지 갤러리'),
      ),
      body: Swipeable(
        onSwipeLeft: () {
          setState(() {
            if (_currentIndex < _images.length - 1) {
              _currentIndex++;
            }
          });
        },
        onSwipeRight: () {
          setState(() {
            if (_currentIndex > 0) {
              _currentIndex--;
            }
          });
        },
        child: Image.asset(
          _images[_currentIndex],
          fit: BoxFit.cover,
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: _images
            .map((imageUrl) => BottomNavigationBarItem(
                  icon: Icon(Icons.image),
                  label: '',
                ))
            .toList(),
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: ImageGallery(),
  ));
}

위의 예제에서는 Flutter의 flutter_swipeable 패키지를 사용하여 Swipeable Widget을 추가하고, 이미지를 전환하는 갤러리를 구현했습니다. onSwipeLeft와 onSwipeRight 콜백을 사용하여 사용자가 스와이프할 때마다 이미지를 전환하고, BottomNavigationBar를 사용하여 현재 이미지를 나타내었습니다.

위와 같이 Swipeable Widget을 사용하여 Flutter 앱에 이미지 갤러리를 쉽게 구현할 수 있습니다.

이제 Swipeable Widget을 활용하여 사용자가 갤러리를 편리하게 탐색할 수 있는 Flutter 앱을 만들어보세요!

Swipeable Widget 소개

이미지 갤러리 구현하기

참고 자료