Flutter GridView.builderの使い方｜カードを格子状に並べる基本

GridView.builderは、格子状の一覧を効率よく作るWidgetです。

この記事の結論

画像一覧、商品一覧、メニューカードなど、同じ形のカードを並べる時に向いています。

最小コード

crossAxisCountで列数を指定します。

GridView.builder(
  itemCount: 20,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (context, index) {
    return Card(child: Center(child: Text("$index")));
  },
)

余白を指定する

crossAxisSpacingやmainAxisSpacingを使います。

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  crossAxisSpacing: 12,
  mainAxisSpacing: 12,
)

縦横比を調整する

childAspectRatioでカードの比率を変えます。

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: 3 / 2,
)

実装後に確認すること

• 画面上で余白や入力が意図通りか確認したか
• 小さい画面で崩れないか確認したか
• 状態管理や画面遷移の責務を混ぜすぎていないか
• 関連するWidgetとの使い分けを説明できるか

よくあるつまずき

• 便利なWidgetに役割を詰め込みすぎる
• 固定サイズや固定余白だけで作る
• 入力値の破棄やバリデーションを忘れる
• ListViewやGridViewをColumn内で高さ指定なしに置く

次に読む記事

• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
• Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い — FlutterのListViewを初心者向けに解説します。childrenで作る基本、ListView.builderとの違い、横スクロール、Column内での注意点を整理します。
• Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。

まとめ

Flutter GridView builderはFlutter UIを作るうえでよく使う基本です。最小コードで動きを確認し、関連Widgetと使い分けながら画面を組み立てましょう。