Flutter CarouselSlider 캐러셀슬라이드 사용

 

이렇게 카드 형식으로 된 캐러셀을 자동으로 혹은 마우스를 이용해서 스크롤이 가능하게 만드려고 한다. 

우선 각 카드에 필요한 형식들은 Widget 으로  Container를 반환하도록 만들어 주었다. 

Widget _addContainerWidget(
      String jm, String sign, String price, String increase) {
    return Container(
        width: 242,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
            color: sign == "+"
                ? CommonColor.bannerBgUp_DK
                : CommonColor.bannerBgDown_DK
        ),

    child : Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
                padding: EdgeInsets.fromLTRB(24, 16, 25, 16),
            child : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(jm, style: TextStyle(
              fontSize: 14, color : CommonColor.white)),
                Container(
                  padding: EdgeInsets.only(top: 4),

                  child : Text(price,
                    style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w300,
                        color : CommonColor.white))),
                Container(
                  padding: EdgeInsets.only(top: 4),
                child : Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children : [
                Icon(
                    sign == "+" ?
                    Icons.arrow_drop_up_rounded : Icons.arrow_drop_down_rounded,
                  color: sign == "+" ? CommonColor.fontUp : CommonColor.fontDown,
                  size: 22
                ),
                    Text(increase,
                    style: TextStyle(
                        fontSize: 14,
                        color: sign == "+"
                            ? CommonColor.fontUp
                            : CommonColor.fontDown))])
            ) ],
           )),

            Image.asset(
                sign == "+"
                    ? 'assets/images/redchart.png'
                    : 'assets/images/bluechart.png',
                width: 60,
                height: 50),
          ],
        ));
  }

 

 

이제 이 카드들을 슬라이드 될 수 있게 해주어야 한다.

 @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.all(20),
        ),
        CarouselSlider(
          items: [
            _addContainerWidget("코스피", "+", "2,225.67", "0.2%"),
            _addContainerWidget("코스닥", "-", "2767.95", "4.2%"),
            _addContainerWidget("다우니", "-", "1,113.58", "12.2%"),
            _addContainerWidget("코스피", "-", "2,225.67", "1.2%"),
            _addContainerWidget("코스피", "+", "2,225.67", "0.2%"),
            _addContainerWidget("코스닥", "-", "2767.95", "4.2%"),
            _addContainerWidget("다우니", "-", "1,113.58", "12.2%"),
            _addContainerWidget("코스피", "+", "2,225.67", "1.2%"),
            _addContainerWidget("코스피", "-", "2,225.67", "0.2%"),
            _addContainerWidget("코스닥", "-", "2767.95", "4.2%"),
            _addContainerWidget("다우니", "-", "1,113.58", "12.2%"),
            _addContainerWidget("코스피", "+", "2,225.67", "1.2%"),
          ],
          options: CarouselOptions(
            height: 104,
            autoPlay: true,
            autoPlayInterval: Duration(seconds: 2),
            aspectRatio: 0.2,
            viewportFraction: 0.15,
            clipBehavior: Clip.none,
            enableInfiniteScroll: true,
          ),
        )
      ],
    );
  }

 

 

사용하기 위해서 CarouselSlider 안에 원하는 카드의 items 를 적어 준다. 그리고 캐러셀의 하이라이트 옵션을 적어 준다. 

옵션의 종류로는 하기와 같다. 필요한 걸 써먹으면 될 것 같당 

this.height: 페이지 뷰의 높이를 설정합니다.

this.aspectRatio: 페이지 뷰의 가로-세로 비율을 설정합니다. 기본값은 16:9로 설정되어 있습니다.

this.viewportFraction: 화면에 표시되는 페이지의 가로 공간을 설정합니다. 1.0은 화면 전체를 의미하며, 0.8은 화면의 80%를 의미합니다.

this.initialPage: 초기에 표시할 페이지의 인덱스를 설정합니다.

this.enableInfiniteScroll: 무한 스크롤을 활성화 또는 비활성화합니다.

this.animateToClosest: 사용자가 페이지 끝까지 스크롤하면 가장 가까운 페이지로 자동으로 스크롤되도록 설정합니다.

this.reverse: 페이지 뷰의 스크롤 방향을 반대로 설정합니다. 기본값은 false로, 좌에서 우로 스크롤합니다.

this.autoPlay: 자동 슬라이드 쇼를 활성화 또는 비활성화합니다.

this.autoPlayInterval: 자동 슬라이드 쇼의 각 페이지 간 간격을 설정합니다.

this.autoPlayAnimationDuration: 자동 슬라이드 쇼의 애니메이션 지속 시간을 설정합니다.

this.autoPlayCurve: 자동 슬라이드 쇼의 애니메이션 곡선을 설정합니다.

this.enlargeCenterPage: 가운데 페이지를 확대하는 애니메이션을 활성화 또는 비활성화합니다.

this.onPageChanged: 페이지가 변경될 때 호출할 콜백 함수를 설정합니다.

this.onScrolled: 페이지가 스크롤될 때 호출할 콜백 함수를 설정합니다.

this.scrollPhysics: 페이지 뷰의 스크롤 물리학을 설정합니다.

this.pageSnapping: 페이지를 정확한 위치로 스냅하는지 여부를 설정합니다.

this.scrollDirection: 페이지 뷰의 스크롤 방향을 설정합니다. 기본값은 가로 방향입니다.

this.pauseAutoPlayOnTouch: 사용자 터치 시 자동 슬라이드 쇼를 일시 중지할지 여부를 설정합니다.

this.pauseAutoPlayOnManualNavigate: 사용자가 수동으로 페이지를 네비게이트할 때 자동 슬라이드 쇼를 일시 중지할지 여부를 설정합니다.

this.pauseAutoPlayInFiniteScroll: 무한 스크롤 시 자동 슬라이드 쇼를 일시 중지할지 여부를 설정합니다.

this.pageViewKey: 페이지 뷰 위젯에 대한 고유한 키를 설정합니다.

this.enlargeStrategy: 가운데 페이지 확대 애니메이션 전략을 설정합니다.

this.enlargeFactor: 가운데 페이지 확대 애니메이션에서 사용되는 확대 계수를 설정합니다.

this.disableCenter: 가운데 페이지 확대 애니메이션을 비활성화할지 여부를 설정합니다.

this.padEnds: 마지막 페이지 끝에 여백을 추가할지 여부를 설정합니다.

this.clipBehavior: 페이지 뷰의 자식 위젯을 클립하는 방식을 설정합니다. 기본값은 Clip.hardEdge입니다.