Flutterのリスト表示をマスター！初心者向けListView・GridViewの使い方完全ガイド
生徒
「Flutterで複数のデータをリストで表示したいんですが、どうやって作るんですか？」
先生
「FlutterではListViewやGridViewという便利なウィジェットを使って、簡単にリスト表示やグリッド表示ができますよ。」
生徒
「それってどういうふうに書くんですか？スクロールもできますか？」
先生
「もちろんです！スクロールも自動対応ですし、簡単なコードで実現できます。では、FlutterのListViewとGridViewの基本から一緒に学んでいきましょう！」
1. Flutterでリスト表示するには？
Flutter（フラッター）では、複数のウィジェットやデータを縦方向・横方向にスクロール表示する場合、主にListViewを使います。また、グリッド状に並べて表示したいときはGridViewを使います。どちらも非常に汎用性が高く、Flutter初心者でも使いやすいのが特徴です。
たとえば「ニュース記事の一覧」「画像一覧」「買い物リスト」「チャットメッセージ」など、あらゆる場面で利用されます。
2. ListViewの基本的な使い方
ListViewは、スクロール可能な縦方向リストを作成するウィジェットです。以下はListViewのシンプルな使用例です。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('ListViewの基本')),
body: ListView(
children: const [
ListTile(title: Text('りんご')),
ListTile(title: Text('みかん')),
ListTile(title: Text('ぶどう')),
ListTile(title: Text('バナナ')),
],
),
),
);
}
}
ListTileは、リスト表示によく使われるウィジェットで、タイトル・サブタイトル・アイコンなどを簡単に表示できます。
3. ListView.builderで大量データを効率的に表示
データが大量になるときには、ListView.builderを使うことでパフォーマンスを保ったまま効率的に表示できます。
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
leading: const Icon(Icons.star),
title: Text('アイテム $index'),
);
},
)
itemCountで表示する数を決め、itemBuilderでウィジェットを生成します。スクロール時に必要な分だけ描画されるため、処理がとても軽くなります。
Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。
Flutter実践開発をAmazonで見る※ Amazon広告リンク
4. GridViewでグリッド表示する方法
GridViewを使うと、アイテムを縦横に並べたグリッドレイアウトを簡単に作成できます。画像一覧やカード一覧に最適です。
body: GridView.count(
crossAxisCount: 2,
children: List.generate(6, (index) {
return Card(
margin: const EdgeInsets.all(8),
child: Center(child: Text('アイテム $index')),
);
}),
)
crossAxisCountは横に並べる列数を指定します。List.generateを使うことで繰り返しカードを生成しています。
5. GridView.builderを使った柔軟な表示
より柔軟な表示を行いたい場合はGridView.builderがおすすめです。こちらもListView.builder同様、必要なときにウィジェットを描画します。
body: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
),
itemCount: 9,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.all(4),
color: Colors.amber,
child: Center(child: Text('No.$index')),
);
},
)
SliverGridDelegateWithFixedCrossAxisCountでグリッドの設定ができます。これにより、アイテムの幅・高さ・間隔などを細かく制御できます。
6. ListView・GridViewでのスクロール挙動のカスタマイズ
ListViewやGridViewはスクロール挙動を自由にカスタマイズできます。例えば、横方向へのスクロールも以下のように簡単です。
ListView(
scrollDirection: Axis.horizontal,
children: const [
Card(child: SizedBox(width: 150, child: Center(child: Text('A')))),
Card(child: SizedBox(width: 150, child: Center(child: Text('B')))),
Card(child: SizedBox(width: 150, child: Center(child: Text('C')))),
],
)
scrollDirectionにAxis.horizontalを指定することで、横方向にスライド表示できます。画像スライダーなどに便利です。
7. ListViewとGridViewで使える便利な小技
- paddingプロパティで全体の余白を設定
- shrinkWrap: trueで親Widgetのサイズに合わせる
- physicsでスクロールの挙動を変更（バウンドや無効化など）
- separatorBuilderで区切り線を追加（
ListView.separated）
ListView.separated(
itemCount: 5,
separatorBuilder: (context, index) => const Divider(),
itemBuilder: (context, index) => ListTile(title: Text('項目 $index')),
)
デザイン性や使いやすさを向上させるために、こうしたプロパティを活用すると実用的なUIが作れます。
8. FlutterのListView・GridViewまとめ表示例
FlutterのListView・GridViewは、リスト表示やグリッド表示を直感的に行えるため、アプリ開発初心者でもすぐに取り組めます。特に、ListView.builderやGridView.builderは効率的な描画が可能で、大量データ表示にも最適です。
アニメーション付きの表示・画像の読み込み・タップ時の処理なども組み合わせていけば、さらに表現の幅が広がります。
この記事を読んだ人からの質問
