Flutter에서 Carousel Slider를 사용하면 이미지나 컨텐츠를 좌우로 슬라이딩하는 기능을 만들 수 있습니다. 이번에는 Carousel Slider에 표시되는 아이템에 맞는 장소 정보를 표시하는 방법에 대해 알아보겠습니다.

1. Carousel Slider를 설치하기

먼저, Carousel Slider를 사용하기 위해 라이브러리를 설치해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  carousel_slider: ^3.0.0

의존성을 추가한 후에는 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받습니다.

2. Carousel Slider 구현하기

Carousel Slider를 구현하기 위해 carousel_slider 패키지를 import 해야 합니다.

import 'package:carousel_slider/carousel_slider.dart';

이제 Carousel Slider 위젯을 생성합니다. Carousel Slider는 items 매개변수로 아이템들을 받고, onChanged 콜백으로 현재 선택된 아이템의 인덱스를 전달받을 수 있습니다. 여기서는 장소 정보를 표시할 수 있도록 List<Place> 형태의 아이템을 전달받겠습니다.

CarouselSlider(
  items: places.map((place) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          child: /* 장소 정보를 표시하는 위젯 */,
        );
      },
    );
  }).toList(),
  onChanged: (int currentIndex) {
    // 현재 선택된 아이템의 인덱스를 받아 처리하는 로직
  },
),

items 매개변수에 전달하는 places.map((place) { ... }) 은 각 아이템을 위젯으로 변환하는 작업을 수행합니다. Builder 위젯을 사용하여 BuildContext를 전달하여 스코프 문제를 해결할 수 있습니다.

3. 장소 정보 표시하기

이제 각 아이템에 맞는 장소 정보를 표시하는 위젯을 만들어보겠습니다. 장소 정보를 표시하기 위해서는 Place 클래스를 정의하고, 그에 맞는 UI를 구현해야 합니다.

class Place {
  String name;
  String description;
  // 필요한 다른 정보들

  Place({required this.name, required this.description});
}

Place 클래스 안에는 장소의 이름 name과 설명 description을 저장하는 예시입니다. 필요한 다른 정보들도 필요에 따라 추가해주시면 됩니다.

위에서 구현한 CarouselSlider에서 장소 정보를 표시할 위젯을 만들어 return 문으로 반환합니다.

CarouselSlider(
  items: places.map((place) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          child: Column(
            children: [
              Text(place.name, style: TextStyle(fontSize: 20)),
              SizedBox(height: 10),
              Text(place.description),
            ],
          ),
        );
      },
    );
  }).toList(),
  // ...
),

위와 같이 구현하면 각 아이템에 맞는 장소 정보가 Carousel Slider에서 표시됩니다.

결론

Flutter의 Carousel Slider를 사용하여 아이템에 맞는 장소 정보를 표시하는 방법에 대해 알아보았습니다. 원하는 UI를 구성하여 Carousel Slider를 보다 다양하게 사용할 수 있습니다.