1. 정의 및 사용 의도

캐로셀 슬라이더(CarouselSlider)는 자동 스크롤 슬라이딩이 가능한 Widget입니다.

이벤트 배너를 나타내주기 위해 자동 슬라이딩이 가능한 위젯을 사용하기 위해 캐로셀 슬라이더를 조사하였습니다.

2. 구현 방법

CarouselSlider를 사용하기 위해서는 pubspec.yaml에 다음과 같은 코드를 추가하고, pub get을 통해 설치합니다.

dependencies:
	carousel_slider: ^4.1.1

이제 다음과 같은 코드를 dart 파일에 추가해서 Carousel Slider 패키지를 import하면 이제부터는 캐로셀 슬라이더를 사용할 수 있습니다.

import 'package:carousel_slider/carousel_slider.dart';

Widget EventBanner(List<dynamic> _eventList) {
  final _carouselController = CarouselController();

  return CarouselSlider(
    items: _eventList.map((element) => Builder(
        builder: (BuildContext imageContext) {
          return Container(
            width: MediaQuery.of(imageContext).size.width,
            margin: EdgeInsets.symmetric(horizontal: 5.0),
            decoration: BoxDecoration(
              color: Colors.transparent,
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: CachedNetworkImage(
                imageUrl: element,
                fit: BoxFit.fitWidth,
                width: MediaQuery.of(imageContext).size.width,
                placeholder: (imageContext, url) => Container(
                  child: Center(
                    child: CupertinoActivityIndicator(
                      radius: 25,
                    ),
                  ),
                ),
              ),
            ),
          );
        }
      ),
    ).toList(),
    carouselController: _carouselController,
    options: CarouselOptions(
      autoPlay: true,
      enlargeCenterPage: true,
      viewportFraction: 0.9,
      aspectRatio: 2.0,
      initialPage: 1,
    ),
  );
}

CarouselSlider 위젯은

3. 결과 화면