[flutter] 플러터에서의 Swipeable 원형 이미지 갤러리 구현 방법

08 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 Swipeable한 원형 이미지 갤러리를 구현하는 방법에 대해 알아보겠습니다.

1. 다트 패키지 import

먼저, flutter_swipable 패키지를 프로젝트에 추가해주어야 합니다. 아래와 같이 pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter_swipable: ^0.2.0

위와 같이 패키지를 추가하고 나면, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 받아주세요.

2. Swipeable 이미지 갤러리 구현

이제, Swipeable한 원형 이미지 갤러리를 만들어봅시다. 아래는 간단한 예제 코드입니다.

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

class CircularImageGallery extends StatelessWidget {
  final List<String> images;

  CircularImageGallery({required this.images});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Swipable(
        children: images
            .map((url) => ClipRRect(
                  borderRadius: BorderRadius.circular(150), // 반지름이 이미지 높이의 절반인 원형 모양으로
                  child: Image.network(
                    url,
                    fit: BoxFit.cover,
                  ),
                ))
            .toList(),
        onChanged: (index) {
          // 이미지 변경 시 동작할 로직
        },
      ),
    );
  }
}

위 코드에서 CircularImageGallery 위젯은 원형 이미지 갤러리를 나타냅니다. Swipable 위젯을 사용하여 이미지를 스와이프하면 변경되도록 구현되어 있습니다.

3. 결과 확인

위와 같이 구현한 코드를 실행하여 Swipeable한 원형 이미지 갤러리가 예상대로 동작하는지 확인해보세요.

이상으로, 플러터에서 Swipeable한 원형 이미지 갤러리를 구현하는 방법에 대해 알아보았습니다.

참고: