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

04 Dec 2023

flutter

개요

carousel_slider는 플러터에서 이미지나 컨텐츠를 카드 형태로 슬라이드하는 라이브러리입니다. 이 라이브러리를 사용하면 앱에서 다양한 형태의 슬라이더를 구현할 수 있습니다. 이번에는 carousel_slider를 사용하여 아이템에 맞는 캐시백 정보를 표시하는 방법에 대해 알아보겠습니다.

구현 방법

carousel_slider 패키지 추가하기

먼저, carousel_slider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 패키지를 추가합니다.
```
dependencies:
  carousel_slider: ^x.x.x  # 최신 버전으로 변경해주세요
```
패키지를 추가한 후, flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

carousel_slider 사용하기

carousel_slider를 사용하기 위해 먼저 carousel_slider 패키지를 임포트해야 합니다. 다음과 같이 import 문을 추가합니다.

import 'package:carousel_slider/carousel_slider.dart';

아래는 carousel_slider를 사용하여 이미지를 슬라이드하는 예제입니다.

CarouselSlider(
  options: CarouselOptions(
    height: 200,
    enlargeCenterPage: true,
  ),
  items: [
    'assets/images/image1.jpg',
    'assets/images/image2.jpg',
    'assets/images/image3.jpg',
  ].map((item) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          child: Image.asset(item),
        );
      },
    );
  }).toList(),
),

아이템에 맞는 캐시백 정보 표시하기

이제 carousel_slider의 각 아이템에 맞는 캐시백 정보를 표시해보겠습니다. 예를 들어, CashbackItem 객체의 리스트에서 각 아이템에 대한 정보를 가져오려면 다음과 같이 코드를 수정할 수 있습니다.

List<CashbackItem> cashbackItems = [
  CashbackItem(title: 'Item 1', cashback: 5),
  CashbackItem(title: 'Item 2', cashback: 10),
  CashbackItem(title: 'Item 3', cashback: 8),
];

CarouselSlider(
  options: CarouselOptions(
    height: 200,
    enlargeCenterPage: true,
  ),
  items: cashbackItems.map((item) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          child: Column(
            children: [
              Image.asset(item.image),
              Text(item.title),
              Text('Cashback: \$${item.cashback}'),
            ],
          ),
        );
      },
    );
  }).toList(),
),

위의 예제에서는 CashbackItem 클래스의 리스트를 만들어 각 아이템의 이미지, 제목 및 캐시백 정보를 표시했습니다. 여기서 CashbackItem 클래스는 다음과 같이 정의됩니다.

class CashbackItem {
  String image;
  String title;
  int cashback;

  CashbackItem({required this.image, required this.title, required this.cashback});
}

위의 예제를 사용하면 carousel_slider의 각 아이템마다 캐시백 정보가 표시될 것입니다.

마무리

이번 포스트에서는 carousel_slider를 사용하여 아이템에 맞는 캐시백 정보를 표시하는 방법에 대해 알아보았습니다. carousel_slider를 사용하면 앱에 다양한 슬라이더를 구현할 수 있으며, 각 아이템에 개별적인 정보를 추가하는 것도 가능합니다. 캐시백 정보 외에도 다른 정보를 표시할 수 있으니 참고해보세요!