【flutter】カルーセルスライダーを使って、カルーセル機能を実装したい！

こんにちわ！
最近夕暮れが早くなったと感じるぐらい暗くなるのが早くなりましたよね、、、
そんなことを思いながら帰宅していると、どこのお店からもいい匂いがして、帰り道は特にお腹が空く今日この頃です、、、
さて、今回はカルーセルスライダーを使ってContainerを横にスクロールをする方法を紹介したいと思います。
最後まで読んでいただけたら嬉しいです！

1,カルーセルスライダーとは？

カーセルスライダー（Carousel Slider）とは、複数の要素を水平方向にスライドして表示するためのWidgetです。これによって、イメージギャラリーやプロダクトのスライドショーなど、複数の要素を効果的に表示するためのUIコンポーネントを作成できます。

2,カーセルスライダーを使用するためには？

↑こちらのサイトを参考に紹介していきます。

(1)パッケージを追加する

・コマンド実行の場合

flutter pub add carousel_slider

実行後、pubspec,yamlに

dependencies:
    carousel_slider: ^4.2.1

[エディタによっては保存時に実行されることもある。]

・pubspec,yamlに追加

dependencies:
    carousel_slider: ^4.2.1

　　　　　　　　　　　　　　　　　　　↓↓↓↓↓

flutter pub get

(2)使用するファイルにインポート

import 'package:carousel_slider/carousel_slider.dart';

3,Containerを作ろう！

CarouselSlider Widgetを使って横にスクロールできるようにしたいので、今回は6個のContainerを用意します。
今回はCarouselContainerboxというWidgetを作り、Containerの色を変数として表示させました。

 Column(
            children: [
              CarouselContainerbox(Colors.black),
              CarouselContainerbox(Colors.pink),
              CarouselContainerbox(Colors.brown),
              CarouselContainerbox(Colors.grey),
              CarouselContainerbox(Colors.green),
              CarouselContainerbox(Colors.orange),
            ],
          ),
        

4,CarouselSliderを使ってみよう!

上記のコードの中にあった「Column」の位置をCarouselSlider Widgetに変えます。
そしてCarouselOptionsを追加し、動きの設定をしてあげます。

CarouselSlider(
            items: [
              Card(child: CarouselContainerbox(Colors.black)),
              Card(child: CarouselContainerbox(Colors.pink)),
              Card(child: CarouselContainerbox(Colors.brown)),
              Card(child: CarouselContainerbox(Colors.grey)),
              Card(child: CarouselContainerbox(Colors.green)),
              Card(child: CarouselContainerbox(Colors.orange)),
            ],
            options: CarouselOptions(
              height: 300, //高さ
              initialPage: 0, //最初に表示されるページ
              autoPlay: true,　//自動でスライドしてくれるか
              viewportFraction: 0.6,　//各カードの表示される範囲の割合
              enableInfiniteScroll: true,　//最後のカードから最初のカードへの遷移
              autoPlayInterval: Duration(seconds: 1),//カードのインターバル
              autoPlayAnimationDuration: Duration(milliseconds: 800),
                                            //スライドが始まって終わるまでの時間
            ),
          ),

うまく実装されました！

終わりに

今回はカルーセルスライダーを使って、カルーセル機能を実装の紹介をしていきました。
少し長くなってしまいましたが、最後まで読んでいただきありがとうございました！
それではまた次の記事で！！！