Flutter는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 강력한 UI와 완벽한 크로스 플랫폼 기능을 제공합니다. 이번 글에서는 carousel_slider 패키지를 사용하여 사진 포스터 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지란?

carousel_slider 패키지는 Flutter 앱에서 이미지나 컨텐츠를 슬라이딩하는 기능을 쉽게 구현할 수 있도록 도와주는 패키지입니다. 사용자가 좌우로 슬라이드하여 다양한 사진 포스터를 감상할 수 있는 슬라이더를 만들 수 있습니다.

설치하기

carousel_slider 패키지를 사용하기 위해서는 먼저 pubspec.yaml 파일에 해당 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 carousel_slider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

그리고 Flutter 앱의 루트 디렉토리에서 터미널을 열고 다음 명령어를 실행하여 패키지를 설치합니다.

$ flutter pub get

사용하기

carousel_slider 패키지를 사용하기 위해 먼저 해당 패키지를 가져와야 합니다. carousel_slider 패키지를 가져오기 위해 다음과 같이 import 문을 추가합니다.

import 'package:carousel_slider/carousel_slider.dart';

그리고 슬라이더에 표시할 이미지 목록을 준비합니다. 예를 들어 List<String> 타입의 imageList 변수에 이미지 URL을 저장합니다.

List<String> imageList = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

이제 carousel_slider 위젯을 사용하여 슬라이더를 만들 수 있습니다. 다음 코드와 같이 CarouselSlider 위젯을 사용하고, items 속성에 이미지 목록을 전달합니다.

CarouselSlider(
  items: imageList.map((imageUrl) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      child: Image.network(imageUrl),
    );
  }).toList(),
  options: CarouselOptions(
    height: 200,
    autoPlay: true,
    enlargeCenterPage: true,
    viewportFraction: 0.8,
  ),
)

위 코드에서 items 속성은 슬라이더에 표시할 항목들을 나타내며, 각 항목은 Container 위젯으로 감싸진 이미지로 구성됩니다. options 속성은 슬라이더의 설정을 나타내며, height는 슬라이더의 높이, autoPlay는 자동으로 슬라이드, enlargeCenterPage는 현재 보이는 항목을 확대하여 표시하며, viewportFraction은 화면에 보이는 항목의 비율을 설정하는 등의 기능을 정의할 수 있습니다.

마무리하기

이렇게하면 간단한 사진 포스터 슬라이더를 만들 수 있습니다. carousel_slider 패키지를 사용하면 Flutter 앱에서 간편하게 슬라이딩 이미지를 구현할 수 있습니다. 자세한 사항은 공식 문서를 참조하시기 바랍니다.

• carousel_slider 패키지
• Flutter 공식 문서