[flutter] carousel_slider에서 아이템에 맞는 버튼 추가하기

04 Dec 2023

flutter

소개

carousel_slider는 Flutter에서 많이 사용되는 이미지 슬라이더 라이브러리입니다. carousel_slider를 사용하면 이미지나 위젯들을 좌우로 슬라이드하여 보여줄 수 있습니다. 이번에는 carousel_slider에 각 아이템마다 맞는 버튼을 추가하는 방법을 알아보겠습니다.

단계별 가이드

단계 1: carousel_slider 패키지 추가하기

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 다음 코드를 dependencies 섹션에 추가해주세요:

dependencies:
  carousel_slider: ^x.x.x

위의 코드에서 x.x.x는 사용하고자 하는 carousel_slider 버전을 의미합니다. 최신 버전을 사용하기 위해서는 pub.dev에서 확인해주세요.

단계 2: carousel_slider 위젯 만들기

이제 carousel_slider 위젯을 만들어봅시다. 아래의 예시 코드는 3개의 이미지를 슬라이드하는 carousel_slider를 만드는 예시입니다. 코드를 복사하여 사용해도 되고, 자신의 필요에 맞게 수정하셔도 됩니다.

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

class MyCarousel extends StatefulWidget {
  @override
  _MyCarouselState createState() => _MyCarouselState();
}

class _MyCarouselState extends State<MyCarousel> {
  int _currentIndex = 0;

  List<String> _imageList = [
    'assets/images/image1.jpg',
    'assets/images/image2.jpg',
    'assets/images/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: _imageList.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(image),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        height: 200.0,
        initialPage: 0,
        enableInfiniteScroll: true,
        onPageChanged: (index, reason) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

단계 3: 아이템에 맞는 버튼 추가하기

각 아이템에 맞는 버튼을 추가하기 위해서는 CarouselSlider 위젯의 items 매개변수에서 아이템을 생성하고 해당 아이템에 버튼을 추가해주어야 합니다. 아래의 코드는 각 아이템마다 버튼을 추가하는 예시입니다.

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

class MyCarousel extends StatefulWidget {
  @override
  _MyCarouselState createState() => _MyCarouselState();
}

class _MyCarouselState extends State<MyCarousel> {
  int _currentIndex = 0;

  List<String> _imageList = [
    'assets/images/image1.jpg',
    'assets/images/image2.jpg',
    'assets/images/image3.jpg',
  ];

  List<Widget> _buildCarouselItems() {
    return _imageList.map((image) {
      return Builder(
        builder: (BuildContext context) {
          return Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.symmetric(horizontal: 5.0),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(image),
                fit: BoxFit.cover,
              ),
            ),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: ElevatedButton(
                onPressed: () {
                  // 버튼이 눌렸을 때 수행할 동작
                },
                child: Text('버튼'),
              ),
            ),
          );
        },
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: _buildCarouselItems(),
      options: CarouselOptions(
        height: 200.0,
        initialPage: 0,
        enableInfiniteScroll: true,
        onPageChanged: (index, reason) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

위의 코드에서 List<Widget> _buildCarouselItems() 함수를 사용하여 각 아이템마다 버튼을 추가하였습니다. 버튼을 누를 때 수행할 동작을 설정하고 싶다면 onPressed 콜백을 수정해주시면 됩니다.

결론

이제 carousel_slider에서 각 아이템에 맞는 버튼을 추가하는 방법을 알아보았습니다. carousel_slider를 사용하여 이미지나 위젯을 슬라이드하고, 각 아이템에 맞는 버튼을 추가하여 다양한 상호작용을 구현할 수 있습니다.