[flutter] carousel_slider를 사용하여 독서 목록 슬라이더 만들기

04 Dec 2023

flutter

이번 포스트에서는 Flutter에서 carousel_slider 패키지를 사용하여 독서 목록 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

설정을 마친 후, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

사용법

이제 carousel_slider를 사용하여 독서 목록 슬라이더를 만들어 보겠습니다.

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

class BookListSlider extends StatelessWidget {
  final List<String> books = [
    'Book 1',
    'Book 2',
    'Book 3',
    'Book 4',
    'Book 5',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: books.map((book) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                book,
                style: TextStyle(fontSize: 16),
              ),
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        height: 200,
        enlargeCenterPage: true,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 2),
      ),
    );
  }
}

위의 코드는 BookListSlider 클래스를 정의하여 carousel_slider를 사용하는 예시입니다. books 변수에 독서 목록을 저장하고, items 속성에서 각 책 제목을 Container 위젯으로 만들어 반환합니다. options 속성에서 슬라이더의 높이, 자동 재생, 자동 재생 간격 등을 설정할 수 있습니다.

위의 코드 예시에서는 가로 여백을 10으로 설정하고, 폰트 크기를 16으로 설정하였지만, 필요에 따라 여러 가지 스타일을 추가로 설정할 수 있습니다.

사용하기

위에서 정의한 BookListSlider를 원하는 화면에 사용하기 위해서는 그 화면에서 BookListSlider를 추가하면 됩니다.

import 'package:flutter/material.dart';

class BookPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Book Page'),
      ),
      body: Center(
        child: BookListSlider(),
      ),
    );
  }
}

위의 코드는 BookPage 클래스를 정의하여 BookListSlider를 가운데에 배치하는 예시입니다. 필요에 따라 레이아웃이나 스타일을 추가로 설정할 수 있습니다.

이제 앱을 실행해보면 독서 목록 슬라이더가 표시되는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 Flutter에서 carousel_slider 패키지를 사용하여 독서 목록 슬라이더를 만드는 방법을 알아보았습니다. carousel_slider 패키지를 사용하면 간편하게 이미지 슬라이더나 기타 슬라이드 컴포넌트를 만들 수 있습니다. 추가적인 옵션 설정이나 사용법에 대해서는 carousel_slider 패키지의 공식 문서를 참고하시기 바랍니다.

carousel_slider 패키지: https://pub.dev/packages/carousel_slider

Happy coding!