슬라이드 될때마다 밑에 표시 나도록 하는 방법
CarouselSlider사용
텍스트 슬라이드
SizedBox(
width: 275,
height: 27,
child: CarouselSlider.builder(
itemCount: textList.length,
itemBuilder: (context, index, realIdx) {
return Center(
child: Text(
textList[index],
style: Black(14, FontWeight.w500),
),
);
},
options: CarouselOptions(
height: 50,
initialPage: 0,
enableInfiniteScroll: true,
autoPlay: true,
viewportFraction: 10,
autoPlayInterval: const Duration(seconds: 5),
onPageChanged: (index, reason) {
setState(() {
_currentPage = index;
});
},
))),
DotsIndicator는 슬라이드 될때마다 밑에 동그랗게 같이 따라 움직이는 슬라이드가 몇개 되는지 현재 몇번째 슬라이드인지 확인 할수있는 인디케이터이다.
DotsIndicator(
dotsCount: textList.length,
position: _currentPage,
mainAxisAlignment: MainAxisAlignment.center,
decorator: DotsDecorator(
color: Colors.black.withOpacity(0.4),
activeColor: Colors.black,
size: const Size(4, 4),
activeSize: const Size(4, 4),
spacing: const EdgeInsets.only(right: 4)),
),
그런데 기능구현을 하던중 슬라이드를 구현할때 텍스트가 넘어갈때 DotsIndicator도 같이 넘어가야하는데 텍스트는 넘어가는데 DotsIndicator는 안넘어갔다.
onPageChanged: (index, reason) {
setState(() {
_currentPage = index;
});
},
제자리에 있길래 왜 그러나 했더니 CarouselOptions에 _currentPage페이지가 변경될때마다 업데이트 되도록 해주니 기능이 실행이 됐다.