Colin's Blog
[flutter] carousel_slider에서 아이템에 맞는 할인 정보 표시하기

carousel_slider

이번에는 Flutter 앱에서 carousel_slider 위젯을 사용하여 이미지 슬라이더를 구현하고, 각 이미지에 해당하는 할인 정보를 표시하는 방법에 대해 알아보겠습니다.

먼저, carousel_slider 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에서 dependencies 섹션에 아래와 같이 추가해주세요:

dependencies:
  carousel_slider: ^3.0.0

별도의 설정이 필요 없이 바로 사용할 수 있습니다.

이미지 슬라이더 생성하기

carousel_slider 위젯을 사용하여 이미지 슬라이더를 생성해보겠습니다.

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

class ImageSlider extends StatefulWidget {
  @override
  _ImageSliderState createState() => _ImageSliderState();
}

class _ImageSliderState extends State<ImageSlider> {
  List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        autoPlay: true,
        aspectRatio: 16 / 9,
        enlargeCenterPage: true,
      ),
      items: imageUrls.map((imageUrl) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
              child: Image.network(
                imageUrl,
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위 코드는 CarouselSlider 위젯을 생성하고 이미지를 슬라이딩하는 기능을 구현합니다. imageUrls 리스트에는 슬라이더에 표시될 이미지 URL들을 설정합니다.

할인 정보 표시하기

각 이미지에 해당하는 할인 정보를 표시하기 위해 carousel_slider 위젯에 items 속성을 사용하여 위젯 리스트를 구성할 수 있습니다. 아래는 각 이미지에 대한 할인 정보를 표시하는 예시입니다.

class ImageSlider extends StatefulWidget {
  @override
  _ImageSliderState createState() => _ImageSliderState();
}

class _ImageSliderState extends State<ImageSlider> {
  List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
  ];

  List<String> discountInfo = [
    '10% 할인',
    '20% 할인',
    '30% 할인',
    '40% 할인',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        autoPlay: true,
        aspectRatio: 16 / 9,
        enlargeCenterPage: true,
      ),
      items: imageUrls.asMap().entries.map((entry) {
        int index = entry.key;
        String imageUrl = entry.value;
        String discount = discountInfo[index];

        return Builder(
          builder: (BuildContext context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(
                    color: Colors.amber,
                  ),
                  child: Image.network(
                    imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),
                Text(discount, style: TextStyle(fontSize: 16)),
              ],
            );
          },
        );
      }).toList(),
    );
  }
}

위 코드에서는 discountInfo 리스트에 각 이미지에 대한 할인 정보를 설정하였습니다. items 속성을 구성할 때, imageUrls 및 discountInfo 리스트를 asMap() 메서드를 사용하여 인덱스와 함께 순회하고, 해당 인덱스에 해당하는 할인 정보를 표시하는 위젯을 추가하였습니다.

이제 ImageSlider 위젯을 원하는 곳에 배치하면 이미지 슬라이더와 할인 정보가 함께 표시됩니다.

결론

이번에는 carousel_slider 위젯을 사용하여 이미지 슬라이더를 구현하고, 각 이미지에 맞는 할인 정보를 표시하는 방법을 알아보았습니다. 이를 통해 사용자가 이미지들을 슬라이딩하면서 할인 정보도 함께 확인할 수 있습니다.

더 자세한 내용은 carousel_slider 라이브러리의 공식 문서를 참고해주세요.

© 2018 Colin. All rights reserved.