[flutter] carousel_slider에서 아이템에 맞는 정보 표시하기

04 Dec 2023

flutter

carousel_slider는 플러터(Flutter)에서 이미지나 컨텐츠를 슬라이드로 표시하기 위한 패키지입니다. 이 패키지를 사용하면 여러 개의 아이템을 가진 슬라이더를 쉽게 구현할 수 있습니다. 이번에는 carousel_slider를 사용하여 각 아이템에 맞는 정보를 표시하는 방법을 알아보겠습니다.

1. carousel_slider 패키지 추가하기

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: <버전>

<버전>에는 사용하고자 하는 carousel_slider 패키지의 버전을 입력합니다. 예를 들어, 현재 가장 최신 버전은 4.0.0 입니다.

2. 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> {
  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: items.map((item) {
        return Container(
          margin: EdgeInsets.all(10),
          child: Text(
            item,
            style: TextStyle(fontSize: 20),
          ),
        );
      }).toList(),
      options: CarouselOptions(
        height: 200,
        enableInfiniteScroll: true,
        onPageChanged: (index, reason) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

위의 예제 코드는 CarouselSlider를 사용하여 간단한 텍스트 아이템을 슬라이드로 표시하는 방법을 보여줍니다. 각 아이템은 Container 위젯으로 감싸져 있으며, 텍스트는 Text 위젯으로 표시됩니다.

options 속성을 통해 슬라이더의 높이를 조정하거나, 무한 스크롤을 사용할 수 있습니다. onPageChanged 콜백은 슬라이더의 현재 인덱스가 변경될 때마다 호출되며, 여기에서 _currentIndex 값을 업데이트하여 현재 아이템을 추적할 수 있습니다.

3. 아이템에 정보 추가하기

이제 각 아이템에 정보를 추가해보겠습니다. 예를 들어, 아이템의 타이틀과 설명을 표시하고 싶다면 다음과 같이 수정할 수 있습니다.

class _MyCarouselState extends State<MyCarousel> {
  final List<Map<String, String>> items = [
    {
      'title': 'Item 1',
      'description': 'Description 1',
    },
    {
      'title': 'Item 2',
      'description': 'Description 2',
    },
    {
      'title': 'Item 3',
      'description': 'Description 3',
    },
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: items.map((item) {
        return Container(
          margin: EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                item['title'],
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              Text(item['description']),
            ],
          ),
        );
      }).toList(),
      // 이하 동일
    );
  }
}

위의 예제 코드에서는 각 아이템을 Map 형태로 표현합니다. 각 Map은 ‘title’과 ‘description’라는 키를 가진 값을 가지고 있으며, 이 값을 이용하여 타이틀과 설명을 텍스트로 표시하고 있습니다. 각 아이템을 컬럼(Column) 위젯으로 감싸서 정렬할 수도 있습니다.

이제 carousel_slider를 사용하여 슬라이더를 만들고, 각 아이템에 맞는 정보를 표시하는 방법을 알아봤습니다. 위의 예제를 참고하여 필요한 요소를 추가하고 스타일링해보세요!

참고 자료

carousel_slider 패키지: https://pub.dev/packages/carousel_slider
Flutter 공식 문서: https://flutter.dev