[Flutter] CarouselSlider

 

안녕하세요!

이번엔 캐로셀(CarouselSlider) 위젯 인데요!

 

CarouselSlider 위젯

 

이번엔 캐로셀(CarouselSlider) 위젯 인데요! 저번에 포스팅했던 PageView 와 비슷하지만 캐로셀(CarouselSlider) 는 자동 스크롤 슬라이딩을 할 수 있는 위젯(Widget) 입니다.

 

 

 

1. pubspec.yaml

 

CarouselSlider 을 사용하기 위해 pubspec.yaml 파일에 dependencies 를 추가해줘야 하는데요!

https://pub.dev/packages/carousel_slider

carousel_slider | Flutter Package

여기서 carousel_slider 의 버전을 확인하여
flutter: 와 같은 라인에 carousel_slider 를 추가해주어야해요~~! 

carousel_slider: ^4.0.0

 

 

 

2. CarouselSliderPage.dart

 

CarouselSliderPage.dart 파일을 만들어서 CarouselSlider 위젯을 구현하였습니다~

 

CarouselSlider(
     options: CarouselOptions(
        autoPlay: true,  //자동재생 여부
     ),
     items: ...   //item 리스트 항목 형성        
),

이 형태를 사용합니다.

 

그리고 ..!

이미지 모서리를 둥글게 하기 위해 ClipRRect 위젯(Widget) 을 사용하였고,

테두리와 테두리를 둥근게 하기 위해 Container 위젯으로 감싸고 decoration: BoxDecoration(..) 을 사용하였습니다.

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

import 'model/BearItem.dart';

final bearItem = {
  "list": [
    {"image": "assets/images/img_blue.png", "name": "파랑이"},
    {"image": "assets/images/img_mint.png", "name": "민트트"},
    {"image": "assets/images/img_skyblue.png", "name": "하늘이"},
    {"image": "assets/images/img_white.png", "name": "하양이"},
    {"image": "assets/images/img_pink.png", "name": "분홍이"},
    {"image": "assets/images/img_yellow.png", "name": "노랑이"},
    {"image": "assets/images/img_purple.png", "name": "보라라"},
    {"image": "assets/images/img_mix.png", "name": "믹스스"}
  ]
};
BearList? bearList;

class CarouselSliderPage extends StatefulWidget {
  const CarouselSliderPage({Key? key}) : super(key: key);

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

class _CarouselSliderPageState extends State<CarouselSliderPage> {
  @override
  Widget build(BuildContext context) {
    
    bearList = BearList.fromJson(bearItem);

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'CarouselSliderPage',
        ),
      ),
      body: Center(
        child: CarouselSlider(
          options: CarouselOptions(
            autoPlay: true, //자동재생 여부
          ),
          items: bearList!.list!.map((item) {
            return Builder(builder: (BuildContext context) {
              return Container(
                decoration: BoxDecoration(
                  //border 를 주기 위해 decoration 사용
                  border: Border.all(
                    width: 3,
                    color: Colors.grey,
                  ),
                  borderRadius: BorderRadius.circular(16.0),
                ),
                child: ClipRRect(
                  //ClipRRect : 위젯 모서리 둥글게 하기위해 사용하는 위젯
                  borderRadius: BorderRadius.circular(16.0),
                  child: Image.asset(
                    item.image!,
                    fit: BoxFit.fill,
                  ),
                ),
              );
            });
          }).toList(),
        ),
      ),
    );
  }
}

 

 

 

결과 화면