10. [Flutter] card_swiper 위젯 사용하기

Flutter의 장점 중 하나는, 구현하고자 하는 위젯들이 대부분 이미 만들어져있다는 것에 있습니다.

 

위젯을 사용하려면 pubspec.yaml 이나 node.js 혹은 flutter SDK 터미널로 설치만 해주시면됩니다.

 

오늘은 card_swiper라는 위젯을 프로젝트에 설치하여 사용해 보도록하겠습니다.

 

기존의 ListView는 스크롤 시, item 상관없이 슬라이드 되었다면, card_swiper는 각각의 item에 할당되어있는 index를 통해 하나씩 스크롤되는 점이 차이가 있으며, 그 밖에도 여러가지 속성을 이용하여 보다 깔끔한 ListView를 만들 수 있습니다.

 

(.NET MAUI에서 했던 CarouselView과 비슷하지만, 보다 사용하기 간편하고 멋집니다.)

링크: https://mroh1226.tistory.com/27

14. [.NET MAUI] CarouselView (with Json ) 만들어보기

 

 

---

1. 우선 아래 링크로 가셔서 이 포스트에 다루는 위젯 버전이 최신버전을 확인하고  Widget을 설치합니다.

 

- 설치링크: https://pub.dev/packages/card_swiper/install

card_swiper | Flutter Package

 

pubspec.yaml

 

2. dependencies: 의 flutter: 하단에 card_swiper: ^2.0.4 (최신버전 확인필요)를 추가하시고 Ctrl + S 를 눌러주시면 아래와같이 설치가 진행됩니다.

설치 진행

---

3. 화면이될 dart 파일 내의 위젯에 아래 소스를 작성합니다.

 

page_theory.dart

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

class PageTheory extends StatelessWidget {
  PageTheory({super.key});
  final List<Image> imageList = [
    Image.network('https://source.unsplash.com/random/1'),
    Image.network('https://source.unsplash.com/random/2'),
    Image.network('https://source.unsplash.com/random/3'),
    Image.network('https://source.unsplash.com/random/4'),
    Image.network('https://source.unsplash.com/random/5'),
    Image.network('https://source.unsplash.com/random/6'),
    Image.network('https://source.unsplash.com/random/7'),
    Image.network('https://source.unsplash.com/random/9'),
    Image.network('https://source.unsplash.com/random/10'),
    Image.network('https://source.unsplash.com/random/11'),
    Image.network('https://source.unsplash.com/random/12'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 50),
      child: Center(
        child: Expanded(
          child: Swiper(
            control: const SwiperControl(),
            pagination:
                const SwiperPagination(alignment: Alignment.bottomCenter),
            itemCount: imageList.length,
            viewportFraction: 1,
            autoplay: true,
            itemBuilder: (context, index) {
              var images = imageList[index];
              return Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 10, vertical: 40),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(color: Colors.grey.withOpacity(0.5))
                      ]),
                  child: images);
            },
          ),
        ),
      ),
    ));
  }
}

 

설명.1

class PageTheory extends StatelessWidget {

  PageTheory({super.key});

  final List<Image> imageList = [

    Image.network('https://source.unsplash.com/random/1'),

    Image.network('https://source.unsplash.com/random/2'),

    Image.network('https://source.unsplash.com/random/3'),

    Image.network('https://source.unsplash.com/random/4'),

    Image.network('https://source.unsplash.com/random/5'),

    Image.network('https://source.unsplash.com/random/6'),

    Image.network('https://source.unsplash.com/random/7'),

    Image.network('https://source.unsplash.com/random/9'),

    Image.network('https://source.unsplash.com/random/10'),

    Image.network('https://source.unsplash.com/random/11'),

    Image.network('https://source.unsplash.com/random/12'),

  ];

Image 파일을 무료로 제공하는 사이트를 이용하여 Image.network로 item을 추가해줍니다.
(랜덤으로 이미지를 가져오도록 uri에 random을 붙이고 뒤에 숫자를 붙여 각각 다른 사진을 가져오도록 합니다. https://source.unsplash.com/random/)

 

- 이미지를 무료로 제공하는 Unsplash 링크: https://unsplash.com/developers

Unsplash Image API | Free HD Photo API

 

 

설명.2

card_swiper 패키지에서 사용할 수 있는 위젯은 Swiper() 이며, 위젯에 대해 간단하게 몇가지 속성들을 설명하겠습니다.

child: Swiper(

            control: const SwiperControl(),

            pagination:

                const SwiperPagination(alignment: Alignment.bottomCenter),

            itemCount: imageList.length,

            viewportFraction: 1,

            autoplay: true,

            itemBuilder: (context, index) {

              var images = imageList[index];

              return Container(

                  padding:

                      const EdgeInsets.symmetric(horizontal: 10, vertical: 40),

                  decoration: BoxDecoration(

                      borderRadius: BorderRadius.circular(20),

                      boxShadow: [

                        BoxShadow(color: Colors.grey.withOpacity(0.5))

                      ]),

                  child: images);

            },

          ),

 

- autoPlay: bool값으로 값을 부여할 수 있으며, true 일 경우 자동으로 item들이 넘어갑니다.

- autoplayDisableOnInteraction: bool값으로 값이 true 일 경우 인터렉트가 발생하면 autoPlay를 멈춥니다.

- itemBuilder: 리스트뷰와 마찬가지로 item들이 어떻게 표현되고 어떤 item이 들어갈지 coontext와 index를 통해 구현하는 속성입니다.

- viewportFraction: 이전,현재,다음의 item을 가지고있는 Widget들 간의 간격을 나타내며 1이하의 소수점으로 값을 주고, 값이 작을 수록 양옆의 Widget들이 현재보여지는 Widget의 영역에 침범하여 보여지게 됩니다.

- Control: Widget에 양옆으로 넘길 수있는 <,> 버튼들을 만들어주며, WiperControl() 과 같은 위젯들을 함께 사용합니다.

- Pagination: 하단에 현재 item의 인덱스를 확인할 수 있도록 도와주는 점모양의 UI를 생성해줍니다. SwiperPagination() 을 같이 사용하며, 점ㅂ이 노출되는 위치를 변경할 수 있습니다.

 

---

빌드된 모습.

card_swiper