[Flutter Project] Carouse_Slider Package

✅Package

 

https://pub.dev/packages/carousel_slider

carousel_slider | Flutter Package

Install

dependencies:
  carousel_slider: ^4.2.1

✅적용

보통은 배너나, 이미지를 슬라이드 할 때 사용하지만,

게임 진행 중, 플레이어를 넘길 때 사용할 때 적용

 

☑️Code

Widget playerSlider() {
    return SizedBox(
      width: 150.w,
      height: 200.h,
      child:  CarouselSlider(
        carouselController: controller.carouselController,
        options: CarouselOptions(
            //가로방향으로 넘어가게
            scrollDirection: Axis.horizontal,
            //사용자가 임의로 넘기는거 막기
            scrollPhysics: const NeverScrollableScrollPhysics(),
            //자동넘김 막기
            autoPlay: false,
            height: 200.h,
            initialPage: 0,
            //무한스크롤으로 마지막 아이템에서 첫 아이템으로 넘어가짐
            enableInfiniteScroll: true,
            viewportFraction: 1,
            onPageChanged: (index, reason) {
              controller.setIndex(index);
            }),
        items: List.generate( controller.setting.playerList.length,
                (index) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    width: 150.w,
                    height: 150.h,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                          fit: BoxFit.fitHeight,
                          image: AssetImage(
                              controller.setting.playerIMG[index]),
                        )),
                  ),
                  SizedBox(height: 20.h,),
                  Text(controller.setting.playerList[index].name, style:  TextStyle(fontSize: 25.sp),),
                ],
              );
            }),
      ),
    );
  }
}

✅결과

gif로 찍어서 끊김이 있지만 사용감은 부드럽게 넘어간다.