[Flutter] Infinity Carousel (무한 캐러셀)

무한 캐러셀에 대한 Demo 및 Code는 다음 경로를 참고하세요.

※ reference : https://github.com/Jisup/flutter_sample/tree/main/lib/page/infinityCarousel

 

무한 캐러셀은 사용자가 처음부터 끝까지 스크롤하지 않고도 계속해서 다음 콘텐츠를 볼 수 있도록 설계된 디자인을 말합니다. 웹 또는 앱에서 여러 이미지나 콘텐츠를 순환하거나 끊임없이 UI요소를 보여주는 UI 방식입니다.

 

InfinityScroll과 가장 큰 차이점은 사용자가 정확히 하나의 콘텐츠를 인지하고 넘길 수 있는 UX를 제공하는 것입니다.

🐇 PageView

※ reference : https://api.flutter.dev/flutter/widgets/PageView-class.html

PageView는 위젯이 가득한 화면을 넘겨보게 만들 수 있는 위젯입니다. 또한, PageController를 사용하여 스와이프를 감지하고 애니메이션을 제공합니다.

 

PageView로 InfinityCarousel을 만들고 싶다면, onPageChanged 속성을 활용하여 원하는 임계값에 도달했을 때 새로운 콘텐츠를 불러올 수 있습니다.

// StatefulWidget
PageController _pageController;

// StatefulWidget.initState
_pageController = PageController(initialPage: 1);

// StatefulWidget.build
PageView(
  controller: _pageController,
  onPageChanged: (value) {
    if (photoList.length - 2 < value) {
      _fetchPhotos();
    }
  },
  children: photoList.isNotEmpty
      ? photoList
          .map((photo) => Container(
                child: Image.network(photo.url!),
              ))
          .toList()
      : [],
),

🥕 smooth_page_indicator

※ reference : https://pub.dev/packages/smooth_page_indicator

flutter pub add smooth_page_indicator

PageView를 사용할 때, UX 향상을 위해 필요한 indicator는 Carousel의 현재 위치를 확인하거나 원하는 위치로 이동하기 위해 사용됩니다.

 

그러나 InfinityCarousel을 구현할 때는 indicator의 존재가 무의미할 수 있으므로 추가하는 것을 고려해보아야 합니다.

 

smooth_page_indicator의 effect 속성을 활용하면 다양한 옵션에 대한 customize를 진행할 수 있습니다.

SmoothPageIndicator(
  controller: _pageController,
  count: itemList.length,
  effect: ScrollingDotsEffect(),
  onDotClicked: (index) => _pageController.animateToPage(
    index,
    duration: const Duration(milliseconds: 300),
    curve: Curves.bounceInOut,
  ),
),

🐇 carousel_slider

※ refernce : https://pub.dev/packages/carousel_slider