[Flutter] Carousel Slider 구현하기

^{이미지 출처: https://flutter-ko.dev/}

carousel_slider 패키지를 사용하면 캐러셀 슬라이더를 정말 쉽게 구현할 수 있습니다. 그리고 carousel_slider 패키지는 Android, iOS, web, desktop을 모두 지원한다고 되어 있습니다.

carousel_slider 설치하기

carousel_slider 패키지를 설치합니다.

$ flutter pub add carousel_slider

참고: https://pub.dev/packages/carousel_slider

샘플 예제는 여기에서 확인해 볼 수 있습니다.

carousel_slider 사용 방법

사용하는 방법은 매우 쉽습니다.

carousel_slider 패키지를 import 하고

import 'package:carousel_slider/carousel_slider.dart';

아래 코드를 작성하면 됩니다.

이렇게 동작합니다.

응용 하기

아래는 carousel_slider 를 사용해서 만들어본 화면입니다.

^{디자인 출처: https://kr.freepik.com/ (Mockup psd는 asylab - kr.freepik.com가 제작함)}

그리고 위 화면을 만들기 위해서 작성한 코드는 다음과 같습니다.

Happy Coding~!