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

Carousel Slider

소개

Flutter의 carousel_slider 패키지는 여러 개의 아이템을 슬라이드 형식으로 보여주는 기능을 제공합니다. 이 기능을 통해 가격 정보를 포함한 아이템을 사용자에게 표시하는 것이 가능합니다.

carousel_slider 패키지를 사용하려면 먼저 pubspec.yaml 파일에서 다음과 같이 패키지를 추가해주세요:

dependencies:
  carousel_slider: ^4.0.0

그리고 터미널에서 아래 명령어를 실행하여 패키지를 가져와주세요:

flutter pub get

가격 정보 포함한 아이템 만들기

가격 정보를 포함한 아이템을 만들기 위해 다음과 같은 모델 클래스를 먼저 생성해주세요:

class Item {
  String name;
  String price;

  Item({required this.name, required this.price});
}

그리고 가격 정보를 포함한 아이템의 리스트를 생성합니다:

List<Item> items = [
  Item(name: '상품 1', price: '10,000원'),
  Item(name: '상품 2', price: '20,000원'),
  Item(name: '상품 3', price: '30,000원'),
];

새로운 파일을 생성하고 다음과 같이 carousel_slider를 구현해주세요:

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

class MyCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        autoPlay: true,
      ),
      items: items.map((item) {
        return Container(
          child: Column(
            children: [
              Text(item.name),
              Text(item.price),
            ],
          ),
        );
      }).toList(),
    );
  }
}

위 코드에선 items.map() 메서드를 사용하여 각 아이템을 위젯으로 변환하고, Column을 사용하여 아이템의 이름과 가격 정보를 표시했습니다. 필요에 따라 레이아웃을 조정하여 가격 정보를 보다 시각적으로 표현하는 것도 가능합니다.

결과 확인하기

만든 carousel_slider를 어느 위치에서든 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

위 코드에선 MyCarousel 위젯을 Center 위젯 내에 배치하여 가운데에 carousel_slider가 나타나도록 했습니다.

결론

이제 carousel_slider를 사용하여 아이템에 맞는 가격 정보를 표시하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 슬라이더 기능을 구현해보세요. Flutter의 carousel_slider 패키지는 다양한 옵션과 제어 기능을 제공하여 다양한 사용자 인터페이스를 구현할 수 있습니다.

© 2018 Colin. All rights reserved.