Flutter ListTileの使い方｜一覧の1行を作る基本

ListTileは、一覧の1行を簡単に作るためのWidgetです。

この記事の結論

ListViewやCardと組み合わせると、設定画面、記事一覧、メニューを素早く作れます。

最小のListTile

titleだけで1行を作れます。

const ListTile(
  title: Text("タイトル"),
)

アイコンや補足を追加する

leading、subtitle、trailingを使います。

const ListTile(
  leading: Icon(Icons.person),
  title: Text("ユーザー"),
  subtitle: Text("プロフィールを見る"),
  trailing: Icon(Icons.chevron_right),
)

タップ処理を書く

onTapで詳細画面へ遷移できます。

ListTile(
  title: const Text("詳細"),
  onTap: () {
    // Navigator.pushなどを書く
  },
)

実装後に確認すること

• 画面上で余白や入力が意図通りか確認したか
• 小さい画面で崩れないか確認したか
• 状態管理や画面遷移の責務を混ぜすぎていないか
• 関連する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 ListTileはFlutter UIを作るうえでよく使う基本です。最小コードで動きを確認し、関連Widgetと使い分けながら画面を組み立てましょう。