[flutter] carousel_slider를 사용하여 캘린더 슬라이더 만들기

04 Dec 2023

flutter

Flutter에서 carousel_slider 패키지는 이미지나 컨텐츠의 슬라이더를 쉽게 구현할 수 있는 도구입니다. 이번 블로그에서는 carousel_slider를 사용하여 캘린더 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 추가하기

우선, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^x.x.x

이때 ^x.x.x는 사용하고자 하는 패키지의 버전을 의미합니다. 원하는 버전을 지정해 주세요. 그리고 업데이트를 위해 pub get 명령어를 실행해 주세요.

캘린더 슬라이더 구현하기

Flutter에서 carousel_slider의 사용은 매우 간단합니다. 먼저 carousel_slider 패키지를 import 해야 합니다.

import 'package:slider_carousel/slider_carousel.dart';

그리고 슬라이더에 표시할 일정 목록이 있는 경우, List 형태로 데이터를 준비해 주세요.

List<DateTime> events = [
  DateTime(2022, 1, 1),
  DateTime(2022, 1, 15),
  DateTime(2022, 2, 1),
  DateTime(2022, 2, 15),
  DateTime(2022, 3, 1),
  DateTime(2022, 3, 15),
];

이제 위에서 생성한 events 리스트를 사용하여 캘린더 슬라이더를 생성합니다. carousel_slider 위젯을 사용하고, items 속성에 일정 목록을 전달합니다.

CarouselSlider(
  items: events.map((DateTime event) {
    return Container(
      child: Text(event.toString()),
    );
  }).toList(),
),

이렇게 하면 각 일정이 슬라이더에 텍스트로 표시됩니다.

추가적인 설정

캘린더 슬라이더를 더욱 사용자 친화적으로 만들기 위해서는 여러 가지 추가적인 설정을 적용할 수 있습니다. 아래는 몇 가지 예시입니다.

슬라이더 속성 설정하기

carousel_slider 위젯에서는 다양한 속성을 설정할 수 있습니다. 예를 들어, 슬라이더의 크기나 경계선 설정을 변경하는 등의 설정이 가능합니다.

CarouselSlider(
  items: events.map((DateTime event){
    return Container(
      width: 200,
      height: 150,
      margin: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text(
          event.toString(),
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
      ),
    );
  }).toList(),
),

슬라이더 동작 설정하기

슬라이더의 동작을 조정하기 위해서는 carousel_slider 위젯의 속성을 활용할 수 있습니다. 예를 들어, 자동 재생, 반복 재생, 슬라이더 간격 설정 등이 가능합니다.

CarouselSlider(
  items: events.map((DateTime event){
    return Container(
      child: Text(event.toString()),
    );
  }).toList(),
  autoPlay: true, // 자동 재생 설정
  autoPlayInterval: Duration(seconds: 3), // 자동 재생 간격 설정
  pauseAutoPlayOnTouch: true, // 터치 시 자동 재생 일시 정지 설정
  enlargeCenterPage: true, // 가운데 페이지 확대 설정
),

마무리

이로써 carousel_slider를 사용하여 캘린더 슬라이더를 만드는 방법에 대해 알아보았습니다. carousel_slider 패키지의 다양한 속성을 활용하여 원하는 슬라이더를 구현해 보세요. 자세한 내용은 carousel_slider 패키지의 공식 문서를 참고하시기 바랍니다.

참고 자료

carousel_slider 패키지: pub.dev/packages/carousel_slider
carousel_slider 패키지 문서: pub.dev/documentation/carousel_slider