[j Flutter] Swipe Image 사용하기

사진을 옆으로 넘기는 기능을 구현해보자. (Swipe Image)

 

1. pubspect.yaml 파일에 해당 패키지를 설치해준다.

https://pub.dev/packages/swipe_image_gallery/example

swipe_image_gallery | Flutter Package

 

2. 이미지 추가하기

project 에 asset 폴더를 만들어준뒤 pubspec.yaml파일에 asset폴더를 추가해준다.

해당 폴더에 사용할 사진을 넣어준다. 

 

 

3. 구현하기

ImageGalleryController galleryController =
      ImageGalleryController(initialPage: 2);

  StreamController<Widget> overlayController =
      StreamController<Widget>.broadcast();

  @override
  void dispose() {
    overlayController.close();
    super.dispose();
  }
  
  
  final we = const [
    Image(image: AssetImage('assets/images/we/we1.jpg')),
    Image(image: AssetImage('assets/images/we/we2.jpg')),
    Image(image: AssetImage('assets/images/we/we3.jpg')),
    Image(image: AssetImage('assets/images/we/we4.jpg')),
  ];
  
  
   SwipeImageGallery(
                              context: context,
                              images: we,
                              overlayController: overlayController,
                            ).show();

 

- 사진의 index를 구현하고 싶으면 SwipeImageGallery에 해당부분을 추가해준다.

onSwipe: (index) {
                                overlayController.add(OverlayExample(
                                  title: '${index + 1}/${we.length}',
                                ));
                              },
                              
initialOverlay: OverlayExample(
                                title: '1/${we.length}',
                              ),

 

OverlayExample.dart

mport 'package:flutter/material.dart';

class OverlayExample extends StatelessWidget {
  const OverlayExample({
    Key? key,
    required this.title,
  }) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            color: Colors.black.withAlpha(50),
            padding: EdgeInsets.all(8.0),
            child: Text(
              title,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.close),
            color: Colors.white,
            tooltip: 'Close',
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

해당 파일에서 인덱스 위치나 닫기버튼 위치를 바꿔주면된다.