[Flutter] CarouselSlider 구현

동적으로 여러 위젯이 생성됨과 동시에, UIUX를 고려한 여러 커스텀이 필요한 Carousel의 구현이 필요하였다. 커스텀, 빠른 구현, 추후 유지보수를 위한 커뮤니티 활성화를 위해 아래 후보들을 취합하였다.

1. PageView

특징: Flutter 프레임워크에 기본적으로 포함되어 있는 위젯이다.
간단한 스와이프 가능한 페이지 컬렉션을 만들기 위해 사용됟나.
PageController를 통해 페이지의 특정 세트를 제어할 수 있다.
장점: 별도의 라이브러리 설치 없이 사용할 수 있으며,
Flutter의 기본 위젯이기 때문에 안정성이 높다.
단점: CarouselSlider만큼 많은 커스터마이즈 옵션을 제공하지 않는다.

2. flutter_swiper

특징: 다양한 스와이프 효과와 커스텀 설정을 지원하는 강력한 슬라이더 위젯 라이브러리다.
장점: 여러 가지 내장 레이아웃과 효과를 제공하여 다이나믹한 슬라이더 경험을 만들 수 있다.
단점: CarouselSlider에 비해 더 복잡할 수 있으며, 프로젝트에 따라 과도한 기능일 수 있다.

3. flutter_carousel_slider

특징: CarouselSlider와 유사하게 동작하는 또 다른 슬라이더 라이브러리로, 다양한 커스터마이징 옵션을 제공한다.
장점: 사용하기 쉬우며, 여러 가지 슬라이더 효과와 커스텀 옵션을 지원한다.
단점: CarouselSlider만큼 널리 사용되거나 커뮤니티 지원이 강력하지 않을 수 있다.

4. page_indicator

특징: PageView와 함께 사용할 수 있는 페이지 인디케이터를 제공하는 위젯이다.
이 라이브러리는 인디케이터만을 제공하기 때문에 슬라이더 기능과 함께 사용하려면 PageView와 결합해야 한다.
장점: 단순하고 가볍으며, 여러 디자인과 스타일의 페이지 인디케이터를 쉽게 구현할 수 있다.
단점: 슬라이더 기능 자체를 제공하지 않으며, 단지 PageView와 함께 사용하기 위한 인디케이터 기능만을 제공한다.

결론적으로 CarouselSlider를 사용하기로 결정하였다.
예제를 봤을 때, 사용이 간단하고 페이지네이션, 인디케이터 커스텀, 센터 페이지 확대 등 기능이 다양하고, 무엇보다 내부적으로 위젯 재사용 매커니즘이 훌륭했다(궁금한 사람은 맨 하단으로). 사내 프로젝트의 경우, 많은 데이터를 보여주기에 적합하다고 판단이 되었다.

CarouselSlider

기본 속성

items (List): 슬라이더에 표시될 위젯들의 리스트다.
각 아이템은 CarouselSlider의 각 슬라이드로 표시된다.
options (CarouselOptions): CarouselSlider의 동작과 모양을 정의하는 다양한 옵션을 설정할 수 있는 객체다.

CarouselOptions의 주요 속성

height (double): 슬라이더의 높이.
aspectRatio (double): 슬라이더의 종횡비. height가 지정되지 않은 경우 사용.
initialPage (int): 초기에 표시될 슬라이드의 인덱스. 기본값은 0.
enableInfiniteScroll (bool): 무한 스크롤을 활성화할지 여부를 결정. 기본값은 true.
reverse (bool): 슬라이드의 넘김 방향을 반전시킬지 여부. 기본값은 false.
autoPlay (bool): 슬라이드가 자동으로 넘어가게 할지 여부. 기본값은 false.
autoPlayInterval (Duration): 자동 넘김 간격을 설정. autoPlay가 true일 때만 적용.
autoPlayAnimationDuration (Duration): 자동 넘김 애니메이션의 지속 시간을 설정.
autoPlayCurve (Curve): 자동 넘김 애니메이션의 커브를 설정.
pauseAutoPlayOnTouch (Duration): 사용자가 슬라이더를 터치하고 있을 때 자동 넘김을 일시 중지할 지속 시간을 설정. autoPlay가 true일 때만 적용.
enlargeCenterPage (bool): 중앙에 위치한 슬라이드를 크게 표시할지 여부.
onPageChanged (Function(int, CarouselPageChangedReason)): 페이지가 변경될 때 호출될 콜백 함수. 변경된 페이지의 인덱스와 변경 이유를 인자로 받음.
scrollDirection (Axis): 슬라이드의 스크롤 방향. 기본값은 Axis.horizontal.

사용 예제

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CarouselSlider Example'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> imgList = [
    'https://via.placeholder.com/600x400/8f8e94/FFFFFF?text=1',
    'https://via.placeholder.com/600x400/8f8e94/FFFFFF?text=2',
    'https://via.placeholder.com/600x400/8f8e94/FFFFFF?text=3',
    'https://via.placeholder.com/600x400/8f8e94/FFFFFF?text=4',
    'https://via.placeholder.com/600x400/8f8e94/FFFFFF?text=5',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: imgList.length,
      itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
          Container(
        child: Image.network(imgList[itemIndex], fit: BoxFit.cover),
      ),
      options: CarouselOptions(
        height: 400.0, // 슬라이더의 높이를 지정
        aspectRatio: 16 / 9, // 슬라이더의 종횡비를 지정
        initialPage: 0, // 처음에 표시될 슬라이드의 인덱스
        enableInfiniteScroll: true, // 무한 스크롤 활성화
        reverse: false, // 슬라이드 넘기는 방향 반전
        autoPlay: true, // 자동 재생 활성화
        autoPlayInterval: Duration(seconds: 3), // 자동 재생 간격
        autoPlayAnimationDuration: Duration(milliseconds: 800), // 자동 재생 애니메이션 시간
        autoPlayCurve: Curves.fastOutSlowIn, // 자동 재생 애니메이션 커브
        pauseAutoPlayOnTouch: true, // 사용자가 터치하면 자동 재생 일시 중지
        enlargeCenterPage: true, // 중앙 페이지를 크게 표시
        onPageChanged: (index, reason) { // 페이지가 변경될 때 실행할 함수
          print('Page changed: $index, Reason: $reason');
        },
        scrollDirection: Axis.horizontal, // 스크롤 방향을 가로로 설정
      ),
    );
  }
}  

위젯 재사용 매커니즘이 훌륭하다?

CarouselSlider가 Flutter에서 위젯 재사용 메커니즘을 잘 활용하는 것은 주로
Flutter의 ListView.builder와 PageView.builder와 유사한 builder 패턴을 사용하기 때문이다.
이 메커니즘은 슬라이더 내의 각 아이템을 효율적으로 관리하는 데 도움이 된다.
여기에는 몇 가지 기술적인 이유가 있다:

Lazy Loading(지연 로딩):

CarouselSlider의 builder 함수를 사용하면, 슬라이더의 현재 보이는 아이템만 메모리에 로드되고, 사용자가 슬라이더를 스크롤할 때만 다음 아이템이 동적으로 생성된다.
이 방식은 앱의 메모리 사용량을 줄이고 성능을 향상시키는 데 유용하다.
특히 많은 수의 아이템이나 복잡한 위젯이 포함된 큰 리스트를 다룰 때 이점이 크다.

Recycling(재사용):

Flutter의 위젯 트리에서 아이템이 화면 밖으로 스크롤되면 해당 아이템의 위젯은 다시 사용될 수 있다.
CarouselSlider도 이 재사용 메커니즘을 활용하여, 이미 생성된 위젯을 다른 아이템에 재사용함으로써, 새 위젯을 계속 생성하는 비용을 줄이고 앱의 반응 속도를 높일 수 있다.

Optimized Rendering(최적화된 렌더링):

CarouselSlider는 현재 보이는 아이템과 가까운 몇 개의 아이템만 렌더링하고, 나머지는 렌더링하지 않는다.
이는 Flutter 엔진이 작업을 효율적으로 수행할 수 있게 하며, 사용자 경험을 개선한다.

Customization(맞춤화):

CarouselSlider는 다양한 맞춤 설정 옵션을 제공한다.
예를 들어, autoPlay, enlargeCenterPage, aspectRatio 등의 속성을 통해 사용자의 요구 사항에 따라 슬라이더의 동작과 모양을 쉽게 조절할 수 있다.

위젯 재사용 메커니즘을 통해 CarouselSlider는 Flutter 앱 내에서 다양한 아이템을 효율적으로 표시하면서도 좋은 성능을 유지할 수 있다.
이는 특히 이미지 갤러리, 광고 배너, 제품 쇼케이스 등 다양한 시나리오에서 유용하게 사용될 수 있다.

Flutter의 공식 문서(https://flutter.dev/docs)에서는 위젯, 렌더링 과정, 성능 최적화 등 Flutter의 핵심 개념에 대해 설명한다.
특히, 'Introduction to widgets' 섹션에서 위젯의 기본적인 동작 원리를 확인할 수 있다.