[Flutter]CarouselSlider

wjdguseya_0880·2024년 6월 11일
0

슬라이드 될때마다 밑에 표시 나도록 하는 방법
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페이지가 변경될때마다 업데이트 되도록 해주니 기능이 실행이 됐다.

profile
플러터 공부 기록일지

0개의 댓글