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

04 Dec 2023

flutter

이번에는 carousel_slider를 사용하여 이미지나 아이템 목록을 슬라이더로 표시하고, 각 아이템에 맞는 액션 버튼을 추가하는 방법에 대해 알아보겠습니다.

1. carousel_slider 패키지 추가하기

먼저, carousel_slider 패키지를 사용하기 위해 pubspec.yaml 파일에 아래와 같이 해당 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

그리고 패키지를 가져오기 위해 flutter pub get 명령어를 실행합니다.

2. carousel_slider로 슬라이더 생성하기

다음으로, carousel_slider로 슬라이더를 생성합니다. 아래는 간단한 예시 코드입니다.

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

class CarouselWithActionButton extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        viewportFraction: 0.8,
        enlargeCenterPage: true,
      ),
      items: items.map((item) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              margin: EdgeInsets.symmetric(horizontal: 8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(item),
                  // Add your action button here
                  RaisedButton(
                    onPressed: () {
                      // Action to be performed
                    },
                    child: Text('Action'),
                  ),
                ],
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위 코드에서는 CarouselSlider 위젯을 사용하여 슬라이더를 생성하고, items 리스트의 각 아이템에 맞게 컨테이너를 생성합니다. 그리고 액션 버튼을 추가하기 위해 RaisedButton을 사용하였습니다.

3. 슬라이더 사용하기

마지막으로, 슬라이더를 사용하는 화면에서 위에서 만든 CarouselWithActionButton 위젯을 추가합니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider'),
      ),
      body: Center(
        child: CarouselWithActionButton(),
      ),
    );
  }
}

위 코드에서는 MyHomePage 위젯에서 CarouselWithActionButton 위젯을 사용하는 예시를 보여주고 있습니다. 필요에 따라 화면을 커스터마이즈하고 추가적인 기능을 구현할 수 있습니다.

이제, carousel_slider를 이용하여 아이템에 맞는 액션 버튼을 추가하는 방법을 알게 되었습니다. 원하는 디자인 및 기능을 추가하여 앞으로의 프로젝트에 적용해 보시기 바랍니다.

참고 자료:

carousel_slider 패키지 - Flutter