[Flutter]Card(カード)をカルーセル(carousel)表示するには？

どうも、ちょげ(@chogetarou)です。

Cardをカルーセル表示する方法を紹介します。

方法
使用例

方法

Cardをカルーセル表示するには、「carousel_slider」パッケージを使います。

まず、「pubspec.yaml」でパッケージの導入をします。

dependencies:
  carousel_slider: ^4.0.0

そして、該当ファイルでパッケージのインポートをします。

import 'package:carousel_slider/carousel_slider.dart';

次に、カルーセル表示する場所にCarouselSliderウェジェットを配置します。

CarouselSliderの引数「items」にカルーセル表示するCardのリスト、引数「options」にCarouselOptionsを指定します。

CarouselSlider(
  items: [
    //カルーセル表示するカード
    Card(),
    Card(),
    Card(),
    Card(),
   ・・・
  ],
  options: CarouselOptions(),
),

最後に、CarouselOptionsの引数でカルーセルの設定をします。

CarouselSlider(
  items: [
    Card(),
    Card(),
    Card(),
    Card(),
    ・・・
  ],
  options: CarouselOptions(
    initialPage: 0, //最初のページ
    enableInfiniteScroll: true, //無限スクロール
    autoPlay: true, //自動スクロール
    autoPlayInterval: Duration(seconds: 1), //スクロールのインターバル
    autoPlayAnimationDuration: Duration(milliseconds: 800), //スクロールの時間
    autoPlayCurve: Curves.fastOutSlowIn, //スクロールの仕方
    enlargeCenterPage: true, //真ん中を拡大表示
    ~~~省略~~~
  ),
),

CarouselOptionsの引数は、必須ではないので必要なものを指定してください。

これでCardをカルーセル表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: CarouselSlider(
            items: [
              Card(
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.blue,
                ),
              ),
              Card(
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.green,
                ),
              ),
              Card(
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.yellow,
                ),
              ),
              Card(
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.pink,
                ),
              ),
            ],
            options: CarouselOptions(
              initialPage: 0,
              enableInfiniteScroll: true,
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 1),
              autoPlayAnimationDuration: Duration(milliseconds: 800),
              autoPlayCurve: Curves.fastOutSlowIn,
              enlargeCenterPage: true,
            ),
          ),
        ),
      ),
    );
  }