[Flutter] card-swiper

flutter도 다양한 라이브러리를 사용할 수 있는데

 

swiper 를 이용해야 해서 패키지를 찾던중 여러가지가 있었는데

그중 card-swiper 사용한 걸 정리하려고 한다.

https://pub.dev/packages/card_swiper

card_swiper | Flutter Package

 

 

먼저 pubspec.yaml 파일에 사용할 라이브러리들을 작성하고 pub get 해준다.

 

 

사용할 위치에서 import 해준다

import 'package:card_swiper/card_swiper.dart';

 

사용할 위치에서 Swiper를 불러주고 필요한 부분들을 작성해 주면서 넣어주면 된다.

Swiper(
            viewportFraction: 0.8, // 전체 슬라이드 아이템 크기
            scale: 0.9, // 활성화 슬라이드 아이템 크기
            scrollDirection: Axis.horizontal, // 슬라이드 방향
            axisDirection: AxisDirection.left, // 정렬
          pagination: SwiperPagination(
            alignment: Alignment.bottomCenter, // 페이지네이션 위치
            builder: SwiperPagination.rect, // 세 가지 스타일의 pagination 사용 가능
          ), // 페이지네이션
          control: SwiperControl(
            iconPrevious: Icons.access_alarms_rounded,// 이전 버튼
            iconNext: Icons.add,// 다음 버튼
            color: Colors.red,// 버튼 색상
            disableColor: Colors.lightGreenAccent, // 비활성화 버튼 색상
            size: 50.0, // 버튼 크기
          ),// 컨트롤 방향 버튼
          loop: false,// 반복
          autoplay: true,// 자동 슬라이드
          duration: 300,// 속도
          itemCount: 3, // 슬라이드 개수
          itemBuilder: (BuildContext ctx, int idx) {
            return SizedBox(
              child: Column(
                children: [
                  Image.asset(
                    'images/cat.jpg',
                    width: MediaQuery
                        .of(context)
                        .size
                        .width,
                    height: 300,
                  ),
                ],
              ),
            );
          },
        ),