[flutter] carousel_slider에서 아이템 선택 이벤트 처리하기

04 Dec 2023

flutter

carousel_slider는 Flutter에서 이미지나 컨텐츠를 슬라이드 형태로 보여줄 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 쉽게 이미지 슬라이더나 컨텐츠 슬라이더를 구현할 수 있습니다.

하지만 기본적으로 carousel_slider는 아이템 선택에 대한 이벤트 처리를 제공하지 않습니다. 따라서, 사용자가 특정 아이템을 선택했을 때 원하는 동작을 수행하기 위해서는 아이템 선택 이벤트를 직접 처리해야 합니다.

아래는 carousel_slider에서 아이템 선택 이벤트를 처리하는 방법을 설명한 예제 코드입니다.

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

class MyCarouselSlider extends StatefulWidget {
  @override
  _MyCarouselSliderState createState() => _MyCarouselSliderState();
}

class _MyCarouselSliderState extends State<MyCarouselSlider> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: [
        // 아이템 위젯들을 추가
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.blue,
        ),
      ],
      options: CarouselOptions(
        // 아이템 선택 이벤트를 처리하기 위해 onPageChanged 콜백 함수를 정의
        onPageChanged: (index, reason) {
          setState(() {
            _currentIndex = index; // 현재 선택된 아이템 인덱스 업데이트
            // 여기서 선택된 아이템에 대한 원하는 동작 수행
          });
        },
      ),
    );
  }
}

위 예제 코드에서 CarouselOptions의 onPageChanged 콜백 함수를 정의하고, 해당 함수에서 선택된 아이템에 대한 동작을 처리할 수 있습니다. 이 예제에서는 _currentIndex 변수를 사용하여 현재 선택된 아이템의 인덱스를 업데이트하고, 원하는 동작을 수행하도록 구현되어 있습니다.

이제 이 코드를 사용하여 carousel_slider에서 아이템 선택 시 원하는 동작을 처리할 수 있습니다.

참고 자료: