[flutter] carousel_slider를 사용하여 상품 슬라이더 만들기

04 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작할 수 있는 앱을 빌드할 수 있습니다. carousel_slider 라이브러리를 사용하면 플러터 앱에 간단하게 이미지나 상품을 슬라이드로 보여줄 수 있습니다.

carousel_slider 라이브러리 설치하기

먼저, 프로젝트의 pubspec.yaml 파일에 carousel_slider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

carousel_slider 사용하기

carousel_slider를 import합니다.

import 'package:carousel_slider/carousel_slider.dart';

carousel_slider 위젯을 사용하여 이미지나 상품을 슬라이드로 보여줄 영역을 만듭니다.

CarouselSlider(
  items: [
    Image.asset('assets/images/item1.jpg'),
    Image.asset('assets/images/item2.jpg'),
    Image.asset('assets/images/item3.jpg'),
  ],
)

여기서 assets/images/item1.jpg와 같이 이미지 파일의 경로를 정확히 입력해야 합니다. 필요한 이미지 파일을 프로젝트의 assets/images 폴더에 추가해주세요.

슬라이더에 원하는 스타일과 옵션을 추가합니다.

CarouselSlider(
  items: [
    Image.asset('assets/images/item1.jpg'),
    Image.asset('assets/images/item2.jpg'),
    Image.asset('assets/images/item3.jpg'),
  ],
  options: CarouselOptions(
    height: 400,
    aspectRatio: 16 / 9,
    viewportFraction: 0.8,
    initialPage: 0,
    enableInfiniteScroll: true,
    reverse: false,
    autoPlay: true,
    autoPlayInterval: Duration(seconds: 3),
    autoPlayAnimationDuration: Duration(milliseconds: 800),
    autoPlayCurve: Curves.fastOutSlowIn,
    enlargeCenterPage: true,
    onPageChanged: (index, reason) {
      // 슬라이더 페이지 변경 시 호출될 함수
      print(index);
    },
  ),
)

위 예제에서는 슬라이더의 높이를 400으로 설정하고, 가로 세로 비율을 16:9로 지정했습니다. 또한 자동으로 슬라이드가 넘어가도록 설정하였으며, 슬라이드 간 간격을 0.2로 설정하였습니다. 추가적인 옵션은 carousel_slider 패키지의 문서에서 확인하실 수 있습니다.

이제 슬라이더를 구현하기 위해 위 코드를 적절한 위치에 추가하면 됩니다. 상품 슬라이더를 원하는 페이지에 해당 코드를 추가하여, 이미지나 상품들을 슬라이드로 보여줄 수 있습니다.

이렇게 carousel_slider를 사용하여 플러터 앱에서 상품 슬라이더를 만들었습니다. carousel_slider 라이브러리의 다양한 옵션을 활용하여 원하는 슬라이더 형태와 동작을 구현할 수 있습니다. 자세한 내용은 carousel_slider 패키지의 문서를 참고해주세요.

carousel_slider 라이브러리 문서: https://pub.dev/packages/carousel_slider