소개

이 문서에서는 Flutter의 carousel_slider 패키지를 사용하여 공부 스케줄을 보여주는 슬라이더를 만드는 방법에 대해 알아보겠습니다. carousel_slider는 이미지나 컨텐츠를 슬라이드 형태로 표시할 수 있는 라이브러리입니다.

선행 작업

carousel_slider 패키지를 사용하기 위해 pubspec.yaml 파일에 아래와 같이 의존성을 추가해야 합니다:

dependencies:
  carousel_slider: ^3.0.0

의존성을 추가한 다음 flutter pub get 명령을 실행하여 패키지를 다운로드 및 설치해주세요.

스케줄 슬라이더 생성

1. carousel_slider 패키지를 import합니다:

import 'package:carousel_slider/carousel_slider.dart';

1. 스케줄 데이터를 저장할 리스트를 생성합니다:

List<String> studySchedules = [
  '7am - 9am: Math',
  '10am - 12pm: Science',
  '1pm - 3pm: English',
  '4pm - 6pm: History'
];

1. CarouselSlider 위젯을 생성하고 스케줄 슬라이더를 만듭니다:

CarouselSlider(
  items: studySchedules.map((schedule) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Text(schedule),
    );
  }).toList(),
  options: CarouselOptions(
    height: 200,
    enlargeCenterPage: true,
    autoPlay: true,
    autoPlayInterval: Duration(seconds: 3),
  ),
)

위 코드에서 items 속성은 각 스케줄을 표시할 컨텐츠 위젯을 생성하는 함수를 지정합니다. options 속성은 슬라이더의 높이, 자동 재생 등을 설정합니다. 여기서는 슬라이더 높이를 200으로 설정하고, 가운데 페이지를 확대하여 표시하도록 enlargeCenterPage 속성을 true로 설정하였습니다.

1. 스케줄 슬라이더를 원하는 곳에 추가합니다:

Column(
  children: [
    // ...
    CarouselSlider(
      // ...
    ),
    // ...
  ],
)

결론

위의 단계를 따라하면 Flutter에서 carousel_slider 패키지를 사용하여 공부 스케줄을 보여주는 슬라이더를 만들 수 있습니다. carousel_slider는 다양한 환경에서 유연하게 사용할 수 있는 라이브러리이므로 다른 프로젝트에서도 쉽게 활용할 수 있습니다.

참고 자료

• carousel_slider 패키지 문서
• Flutter 문서