[047] 플러터 (Flutter) 배우기 - Carousel Slider + Indicator (자동 슬라이더 + 인디케이터 구현)

안녕하세요~ totally 개발자입니다.

 

Carousel Slider + Indicator

 

이 시간에는 carousel_slider 라이브러리를 사용하여 슬라이더를 indicator(현재 어느 슬라이드인지, 클릭하면 해당 슬라이드로 이동할 수 있게 도와주는 역할)와 함께 간단히 만들어보도록 하겠습니다. 물론 라이브러리를 사용하지 않고도 ListView를 활용하여 구현할 수 있으나 다소 복잡하기 때문에 라이브러리 사용을 권장드립니다.

 

Step 1: pubspec.yaml에 carousel_slider: 를 추가해줍니다.

 

 

 

Step 2: 필요한 변수들을 선언해줍니다. _current는 현재 슬라이드 위치를 나타내는 인덱스값, _controller는 슬라이더를 조작할 수 있도록 해주는 컨트롤러, imageList에는 필요한 샘플 이미지들을 넣어줍니다.

 

 

 

Step 3: sliderWidget을 별도로 선언해줍니다. 여기에서 imageList의 map를 활용해서 리스트에 있는 요소 숫자만큼 슬라이드를 반복적으로 만들어줍니다. 그리고 options 부분에는 슬라이드의 속성 값을 지정해줄 수 있는데 viewportFraction: 1.0을 넣으시면 여백 없이 채워진 이미지로 만들 수 있습니다. autoPlay: true를 넣으면 슬라이더 자동 재생 기능 활성화, autoPlayInterval는 자동 재생 시간을 몇 초 간격으로 지정할 것인지 여부, onPageChanged는 슬라이드의 페이지가 변할 때 어떤 기능을 담당할 것인지를 지정합니다.

 

 

Step 4: 다음으로는 sliderIndicator에 관한 위젯을 작성해주고 여기에는 imageList.asMap().entries.map((entry) 형식으로 작성해주는데 그 이유는 현재 imageList 변수에는 이미지 리스트 밖에 없지만 각 key의 인덱스값 0~4를 받아오기 위한 방편이고 map으로 key, value 형식으로 만들어주기 위해서 사용합니다. 103번째의 _controller.animateToPage(entry.key)를 사용하여 각 슬라이드로 손쉽게 이동할 수 있도록 도와줍니다. 

 

 

 

Step 5: build 위젯을 완성해줍니다. sliderWidget 위에 sliderIndicator를 띄워 놓기 위해서는 Stack(중첩 위젯)을 사용하시면 되며 Stack을 Container나 SizedBox로 높이를 지정해서 감싸주시면 됩니다. 그러면 위에 slideIndicator에 선언된 Align 위젯의 alignment: Alignment.bottomCenter 속성을 바로 사용해서 슬라이드 부분의 중앙 하단에 간단히 배치할 수 있습니다. 그 후에 현재 body: Column으로 감싸주고 있으므로 슬라이드 아래에 배치할 위젯들을 차례로 추가 배치하시면 됩니다.

 

 

 

Step 6: 작동 모습입니다.

 

 

References:

 

https://pub.dev/packages/carousel_slider

carousel_slider | Flutter Package

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

https://youtu.be/PHdq1WnheHo