Flutter CarouselSlider 한 페이지 여러 개

일반적으로 CarouselSlider 위젯을 사용하면 item에 Widget List를 넣고 그만큼 페이지 갯수가 생성된다.

하지만 CarouselSlider.builder 를 이용하면 itemCount를 원하는대로 구성하여 한 페이지에 여러 위젯을 집어넣을 수 있다.

CarouselSlider.builder(
  itemCount: (controller.youtubeUrls.length / 2).round(),
  
  // 이 itemBuilder 실행은 페이지를 넘길때마다 실행된다. 
  // 그래서 autoPlay 기능을 넣는다면 성능을 위해서는 builder를 사용하지 않는 편이 좋을 것 같다.
  itemBuilder: (BuildContext context, int index, int realIndex) {
  // 한 페이지에 2개를 넣기 위해 따로 index를 생성한다.
  // realIndex를 이용할 수도 있지 않을까 싶어서 log를 찍어봤지만 그저 index+10000 값이 나온다.
  // 공식 문서에서도 별 말 없는거 보면 왜 있는지는 잘 모르겠음.
    final curIndex = index * 2;
    return Flex(direction: Axis.horizontal, children: [
      Flexible(
          flex: 1,
          child: CustomWidget(itemList[index]),
      SizedBox(
        width: 4,
      ),
      Flexible(
          flex: 1,
          child: controller.itemList.length == curIndex+1
              ? SizedBox()
              : CustomWidget(itemList[index+1]))
              // curIndex를 이용하여 홀수일때는 마지막 짝수번째에 빈 공간을 만들어준다.
    ]);
  },
  options: CarouselOptions(
  	// 기본 Ratio가 16/9 이므로 32/9로 맞춰준다.
    // 가운데 SizedBox가 존재하기는 하지만 워낙 작은 숫자이므로 이렇게 설정했다.
    // 원한다면 더 비율을 키워도 괜찮음.
      aspectRatio: 32 / 9,
      disableCenter: false,
      viewportFraction: 1))

 

이렇게 builder의 itemBuilder 메소드에 커스텀 index 변수를 생성해서 이용하는 방법을 택했다.

 

주석에 적어놓은대로 autoPlay를 쓰지 않는다면 builder가 나쁘지 않지만

autoPlay가 있고, 갯수가 많다면 쓰지 않는게 빌드가 쓸데없이 많이 되는 걸 막는 방법일 듯 하다.