[flutter] carousel_slider에서 캐러셀 커스텀 디자인 적용하기

04 Dec 2023

flutter

캐러셀은 사용자가 좌우로 스와이프하여 여러 항목을 탐색할 수 있는 인터페이스 요소입니다. Flutter에서 carousel_slider 패키지를 사용하면 쉽게 캐러셀을 구현할 수 있습니다. 이번에는 carousel_slider를 사용하여 캐러셀에 커스텀 디자인을 적용하는 방법에 대해 알아보겠습니다.

시작하기 전에

먼저, Flutter 프로젝트를 생성하고 carousel_slider 패키지를 추가해야 합니다. 프로젝트에 carousel_slider 패키지를 추가하기 위해서는 pubspec.yaml 파일에 다음과 같은 의존성을 추가해야 합니다:

dependencies:
  carousel_slider: ^4.0.0-nullsafety.0

의존성을 추가한 후에는 pub get 명령어를 실행하여 패키지를 다운로드합니다.

캐러셀 커스텀 디자인 적용하기

먼저, carousel_slider 위젯을 사용하여 기본 캐러셀을 구현합니다. 필요한 항목을 캐러셀 위젯의 자식으로 추가합니다.

carousel_slider.CarouselSlider(
  items: [
    // 캐러셀 항목들
    Container(
      color: Colors.red,
      child: Center(
        child: Text('Item 1'),
      ),
    ),
    Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item 2'),
      ),
    ),
    Container(
      color: Colors.green,
      child: Center(
        child: Text('Item 3'),
      ),
    ),
  ],
)

이제 캐러셀에 커스텀 디자인을 적용할 차례입니다. carousel_slider 패키지에는 options 매개변수를 통해 커스텀 디자인을 설정할 수 있습니다. options 매개변수에는 height, aspectRatio, viewportFraction 등 다양한 속성을 포함할 수 있습니다.

carousel_slider.CarouselSlider(
  options: carousel_slider.CarouselOptions(
    height: 200,
    aspectRatio: 16/9,
    viewportFraction: 0.8,
  ),
  items: [
    // 캐러셀 항목들
    Container(
      color: Colors.red,
      child: Center(
        child: Text('Item 1'),
      ),
    ),
    Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item 2'),
      ),
    ),
    Container(
      color: Colors.green,
      child: Center(
        child: Text('Item 3'),
      ),
    ),
  ],
)

carousel_slider 위젯에 캐러셀의 화면에 표시되는 항목에 대한 디자인을 수정해보겠습니다. options의 itemBuilder 속성을 사용하여 각 항목의 레이아웃을 구성할 수 있습니다.

carousel_slider.CarouselSlider(
  options: carousel_slider.CarouselOptions(
    height: 200,
    aspectRatio: 16/9,
    viewportFraction: 0.8,
    itemBuilder: (context, index, realIndex) {
      return CustomCarouselItemWidget(
        // 각 항목에 대한 정보 전달
        item: items[index],
      );
    },
  ),
  items: items,
)

위 코드에서 CustomCarouselItemWidget은 각 항목의 커스텀 디자인을 구성하는 위젯입니다. 해당 위젯을 직접 정의하여 사용하면 됩니다.

CustomCarouselItemWidget 정의하기

CustomCarouselItemWidget을 정의하기 위해 StatefulWidget을 사용할 수 있습니다. 예를 들어 다음과 같이 정의할 수 있습니다:

class CustomCarouselItemWidget extends StatefulWidget {
  final Item item;

  const CustomCarouselItemWidget({required this.item});

  @override
  _CustomCarouselItemWidgetState createState() => _CustomCarouselItemWidgetState();
}

class _CustomCarouselItemWidgetState extends State<CustomCarouselItemWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: double.infinity,
      color: widget.item.color,
      child: Center(
        child: Text(
          widget.item.title,
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

위 코드에서 CustomCarouselItemWidget은 item이라는 필수 매개변수를 받습니다. 이 매개변수를 사용하여 각 항목에 대한 정보를 전달하고, 필요한 디자인을 적용합니다.

마치며

carousel_slider 패키지를 사용하여 Flutter 앱에서 캐러셀에 커스텀 디자인을 적용하는 방법을 알아보았습니다. 캐러셀 위젯의 options와 itemBuilder를 적절히 활용하여 원하는 디자인을 구현할 수 있습니다. 자신의 앱에 적용해보고 다양한 디자인을 시도해보세요!

참고 자료

carousel_slider 패키지: https://pub.dev/packages/carousel_slider