말랑한 하루
[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
'개발 > Flutter' 카테고리의 다른 글
[Flutter] (Project) MapleApp: 32. 비공개 테스트-1 (0) | 2024.02.29 |
---|---|
[Flutter] (Project) MapleApp: 31. 심사 통과 (0) | 2024.02.29 |
[Flutter] Infinity Scroll (무한 스크롤) (0) | 2024.02.20 |
[Flutter] TDD (Test Driven Development) - Riverpod (0) | 2024.02.08 |
[Flutter] TDD (Test Driven Development) - UseCase (0) | 2024.02.07 |