【Flutter Widget解説】CarouselView：動的なスクロールリストを美しく実装しよう
Flutter公式YouTube「Widget of the Week」は、Flutterに登場する重要なWidgetを短時間で紹介する人気シリーズです。
この記事ではその中から、「CarouselView」について要点を抜粋し、自分の言葉で解説します。
コード例や実用Tipsを交えて、Flutter初心者〜中級者に向けてわかりやすくまとめました。
💡 CarouselViewとは？
CarouselViewは、スクロール可能なWidgetリストを作成するためのFlutterコンポーネントです。
各アイテムのサイズは、レイアウトの種類に応じて動的に変化させることが可能です。
⚙️ 基本の使い方
CarouselViewを使うには、以下のような手順を踏みます。
-
CarouselControllerを作成
→ 初期表示アイテムのインデックスを指定可能 -
CarouselViewウィジェットを設置
→ 必要なパラメータ：-
controller（先ほど作成） -
children（表示するWidgetのリスト） -
itemExtent（各アイテムの横幅または縦幅）
-
🧪 基本コード例
//基本的な使い方
final controller = CarouselController(initialItem: 0);
CarouselView(
controller: controller,
itemExtent: 200.0,
children: [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
],
)
//スクロール位置を 150 ピクセルにアニメーション付きで移動する命令です。
controller.animateTo(
150,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
//、CarouselView に対して以下のようなレイアウト構造を使い、**itemExtent（カードのサイズ）とshrinkExtent（表示サイズ）**を分けて指定
CarouselView(
controller: controller,
children: children,
itemExtent: 300.0,
shrinkExtent: 200.0,
),
//すべてのプロパティ
CarouselView(
controller: controller, // カスタムまたは ScrollController：スクロール制御に使用
children: children, // 表示するカードや画像などのリスト
itemExtent: 300.0, // 各アイテム（カード）の横幅
shrinkExtent: 200.0, // CarouselView 全体の高さ（itemExtentより小さくすることでカードを部分的に見せられる）
onItemTap: (index) => print("Tapped: $index"), // アイテムがタップされたときのコールバック（モバイル対応）
autoScroll: true, // true にすると一定時間ごとに自動スクロールする
scrollDuration: Duration(milliseconds: 400), // animateTo 実行時のスクロールアニメーションの時間
scrollCurve: Curves.easeOut, // スクロールアニメーションの動き方（なめらかさ）
padding: EdgeInsets.symmetric(horizontal: 16), // Carousel 全体の左右に余白を追加（画面端からのマージン）
spacing: 12, // 各アイテムの間に入るスペース
reverse: false, // true にするとスクロール方向が逆になる（右→左）
scrollPhysics: BouncingScrollPhysics(), // スクロールの挙動を定義。iOSのようなバウンス効果が出る
)
✅ まとめ：CarouselViewの魅力
・動的でリッチなリストUIが簡単に構築できる
・itemExtentとshrinkExtentを使ってカードの見せ方を調整可能
・スクロール制御や自動化も簡単に実装可能
・写真一覧、カードUI、紹介スライダーなど多用途に活用できる
本記事はFlutter公式動画を参考に、筆者が構成・要約・解説を行ったオリジナルコンテンツです。