[flutter] carousel_slider를 사용하여 학습 일지 슬라이더 만들기

04 Dec 2023

flutter

Flutter는 Google에서 개발한 사용자 인터페이스(UI) 프레임워크이며, 다양한 플랫폼에서 동작하는 애플리케이션을 작성할 수 있습니다. Flutter는 강력한 모바일 앱 개발 도구입니다. 이번 블로그 포스트에서는 Flutter의 carousel_slider 패키지를 사용하여 학습 일지 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 추가하기

먼저, Flutter 프로젝트에 carousel_slider 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같은 코드를 추가하여 패키지를 가져올 수 있습니다:

dependencies:
  carousel_slider: ^4.0.0-nullsafety.0

의존성을 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 가져올 수 있습니다.

carousel_slider 사용하기

carousel_slider 패키지를 성공적으로 추가한 후에는 사용할 준비가 끝납니다. 이제 슬라이더를 생성하고 사용자 정의 컨텐츠를 추가할 수 있습니다.

아래는 간단한 학습 일지 슬라이더 예제 코드입니다:

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

class DiarySlider extends StatelessWidget {
  final List<String> diaryEntries = [
    "오늘은 Flutter에 대해 공부했다.",
    "Dart 언어를 배웠다.",
    "carousel_slider 패키지를 사용해보았다."
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        enableInfiniteScroll: false,
      ),
      items: diaryEntries
          .map((entry) => Container(
                child: Center(
                  child: Text(
                    entry,
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              ))
          .toList(),
    );
  }
}

위의 코드에서는 CarouselSlider 위젯을 생성하고, CarouselOptions를 사용하여 슬라이더의 높이와 무한 스크롤 여부 등을 설정합니다. 그리고 items 속성을 사용하여 슬라이더에 표시할 컨텐츠를 설정합니다.

이제 DiarySlider 위젯을 원하는 곳에 추가하여 학습 일지 슬라이더를 표시할 수 있습니다.

carousel_slider 패키지 추가하기

carousel_slider 사용하기

참고 자료