[flutter] carousel_slider에서 아이템에 맞는 태그 추가하기

04 Dec 2023

flutter

carousel_slider는 Flutter에서 이미지나 콘텐츠를 슬라이딩으로 보여주는 플러그인입니다. 이 플러그인을 사용하면 여러 개의 아이템을 슬라이드 형태로 보여줄 수 있습니다. 만약 각각의 아이템에 맞는 태그를 추가하고 싶다면 어떻게 해야 할까요? 이 글에서는 carousel_slider의 각 아이템에 태그를 추가하는 방법에 대해 알아보겠습니다.

1. carousel_slider 설치하기

먼저, carousel_slider를 사용하기 위해 프로젝트에 해당 플러그인을 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요:

dependencies:
  # 다른 의존성들...
  carousel_slider: ^4.0.0

의존성을 추가한 후, flutter packages get 명령어를 통해 의존성을 설치해주세요.

2. carousel_slider 사용하기

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

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

class _MyCarouselState extends State<MyCarousel> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: items.map((item) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              child: Text(
                item,
                style: TextStyle(fontSize: 20),
              ),
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        // carousel_slider의 옵션들을 설정할 수 있습니다.
      ),
    );
  }
}

위의 코드는 carousel_slider를 사용하여 간단한 아이템 리스트를 슬라이드로 보여주는 예시입니다. 현재는 각 아이템에 태그를 추가하지 않은 상태입니다.

3. 아이템에 태그 추가하기

각 아이템에 태그를 추가하려면 items 리스트에 해당 태그를 포함한 위젯을 생성하여 반환하면 됩니다. 예를 들어, 아이템과 태그를 함께 보여주기 위해 Column 위젯을 사용할 수 있습니다:

class _MyCarouselState extends State<MyCarousel> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: items.map((item) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              child: Column(
                children: [
                  Text(
                    item,
                    style: TextStyle(fontSize: 20),
                  ),
                  Text(
                    'Tag for $item',
                    style: TextStyle(fontSize: 14, fontStyle: FontStyle.italic),
                  ),
                ],
              ),
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        // carousel_slider의 옵션들을 설정할 수 있습니다.
      ),
    );
  }
}

위의 코드에서는 Column 위젯을 사용하여 각 아이템의 텍스트와 그 아래에 해당 태그를 표시하고 있습니다. $item은 문자열 보간법을 사용하여 아이템의 이름을 동적으로 보여주는 부분입니다.

이제 carousel_slider를 사용하여 아이템과 그에 맞는 태그를 함께 슬라이딩으로 보여줄 수 있습니다.

위의 예시는 간단한 방법으로 태그를 추가한 예시이며, 태그의 디자인 등을 원하는대로 변형할 수 있습니다. carousel_slider의 다양한 옵션을 사용하여 원하는 슬라이더 UI를 구성해보세요!

더 자세한 정보는 carousel_slider 패키지의 문서를 참고하시기 바랍니다.