CarouselSilder

1) CarouselSlider는 플러터(Flutter)에서 이미지나 컨텐츠를 슬라이드로 표시하는 데 사용되는 패키지 중 하나입니다. 이 위젯은 화면에 여러 항목을 슬라이드할 때 특히 유용하며, 이미지 갤러리, 뉴스 기사, 제품 목록 등을 표시할 때 자주 활용됩니다. CarouselSlider 패키지는 이미지 또는 사용자 정의 위젯을 슬라이드할 수 있게 해주며, 여러 가지 속성을 통해 슬라이드 동작을 제어할 수 있습니다.

2) 주요 속성과 예시 코드

1) items: 슬라이드할 컨텐츠 항목을 지정합니다. 일반적으로 위젯 목록(리스트)을 전달합니다.

CarouselSlider(
  items: [
    Image.asset('assets/image1.jpg'),
    Image.asset('assets/image2.jpg'),
    Image.asset('assets/image3.jpg'),
  ],
  // 나머지 속성들...
)

1-1 리스트를 전달할 경우

        return Image.asset(
               "${bannerItemImageUrl[index]}",
                fit: BoxFit.cover,
                width: MediaQuery.of(context).size.width,

2) options: CarouselSlider의 동작을 제어하는 옵션을 설정합니다. 예를 들어, 슬라이드 속도, 자동 재생 여부 등을 설정할 수 있습니다

CarouselSlider(
  items: [...],
  options: CarouselOptions(
    autoPlay: true,
    autoPlayInterval: Duration(seconds: 3),
    enlargeCenterPage: true,
  ),
)

3) onPageChanged: 사용자가 슬라이드를 변경할 때 호출될 함수를 지정합니다. 현재 페이지 번호를 알려줍니다.

CarouselSlider(
  items: [...],
  options: CarouselOptions(
    onPageChanged: (int index, CarouselPageChangedReason reason) {
      print('페이지가 변경되었습니다: $index');
    },
  ),
)

4) controller: 슬라이드를 프로그래밍적으로 제어하기 위한 컨트롤러를 설정합니다. 이 컨트롤러를 사용하면 특정 페이지로 이동하거나 자동 재생을 시작 및 중지할 수 있습니다.

final CarouselController _controller = CarouselController();

CarouselSlider(
  items: [...],
  carouselController: _controller,
)

5) height 및 aspectRatio: 슬라이더의 높이와 화면 비율을 설정합니다.

CarouselSlider(
  items: [...],
  options: CarouselOptions(
    height: 200, // 높이 설정
    aspectRatio: 16 / 9, // 화면 비율 설정
  ),
)

6) Example

class BannerWidget extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
  
     List<String> imageUrlList = [
      "assets/images/이미지경로1.jpg",
      "assets/images/이미지경로2.jpg",
    ];
    
    return CarouselSlider.builder(
      itemCount: imageUrlLsit.length, //슬라이드 되는 이미지 수 
      options: CarouselOptions(
        viewportFraction: 1.0, //화면에 1개의 이미지가 보이게 함.
        autoPlay: true, //자동으로 슬라이드 되게 함.
      ),
      itemBuilder: (context, index, realIndex) {
      //슬라이드 되는 아이템의 위젯형태를 작성한다. 
        return Image.asset(
               "${bannerItemImageUrl[index]}",
                fit: BoxFit.cover,
                width: MediaQuery.of(context).size.width,
        );
      },
    );

3. CarouselSlider는 많은 커스터마이징 옵션을 제공하며, 사용자 인터페이스를 더 다양하게 표현할 수 있도록 도와줍니다. 이를 활용하여 원하는 슬라이드 쇼나 컨텐츠 목록을 구현할 수 있습니다.