[flutter] carousel_slider를 사용하여 온라인 쇼핑 슬라이더 만들기

04 Dec 2023

flutter

이번 포스트에서는 Flutter 프레임워크에서 carousel_slider 패키지를 사용하여 온라인 쇼핑 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지

carousel_slider는 Flutter에서 이미지 슬라이더 또는 콘텐츠 슬라이더를 구현하기 위한 패키지입니다. 이 패키지를 사용하면 간단하게 여러 개의 아이템을 가진 슬라이더를 만들 수 있습니다.

프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 pubspec.yaml 파일에 다음과 같이 carousel_slider 패키지를 추가해줍니다:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

이후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치합니다.

슬라이더 만들기

먼저, import 문을 사용하여 carousel_slider 패키지를 가져옵니다:

import 'package:carousel_slider/carousel_slider.dart';

다음으로, 슬라이더에 표시될 이미지들을 리스트로 준비합니다:

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

슬라이더 위젯을 구현합니다. CarouselSlider 위젯을 사용하여 슬라이더를 생성하고, child 속성을 통해 이미지가 표시될 방식을 정의합니다:

CarouselSlider(
  items: images.map((item) => Image.network(item, fit: BoxFit.cover)).toList(),
  options: CarouselOptions(
    autoPlay: true,
    aspectRatio: 16/9,
    enlargeCenterPage: true,
    enlargeStrategy: CenterPageEnlargeStrategy.scale,
  ),
)

위 코드에서 items 속성에는 이미지들을 Image.network 위젯으로 변환하여 전달하고, options 속성을 통해 슬라이더의 동작 방식을 설정할 수 있습니다.

위 코드를 기존의 MaterialApp 위젯에 추가하거나 별도의 Scaffold 위젯 안에 배치합니다:

Scaffold(
  appBar: AppBar(
    title: Text('온라인 쇼핑 슬라이더'),
  ),
  body: Center(
    child: CarouselSlider(
      items: images.map((item) => Image.network(item, fit: BoxFit.cover)).toList(),
      options: CarouselOptions(
        autoPlay: true,
        aspectRatio: 16/9,
        enlargeCenterPage: true,
        enlargeStrategy: CenterPageEnlargeStrategy.scale,
      ),
    ),
  ),
)

결과 확인하기

이제 앱을 실행하고 온라인 쇼핑 슬라이더를 확인해보세요. 슬라이더가 자동으로 이동하며, 이미지를 클릭하여 상세 페이지로 이동할 수도 있습니다.

이 포스트에서는 carousel_slider 패키지를 사용하여 간단한 온라인 쇼핑 슬라이더를 만드는 방법을 알아보았습니다. Flutter를 이용하여 다양한 슬라이더를 구현할 수 있으니 참고해보세요.

carousel_slider 패키지

프로젝트 설정

슬라이더 만들기

결과 확인하기

참고 자료