パンくずリスト Breadcrumb
「ホーム › 写真 › 2026年」のように今いる場所までの道すじを並べ、途中を押すとそこへ一気に戻れる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
ファイルやフォルダ、カテゴリの階層をたどる画面で、「今どこにいるか」と「どう戻るか」を同時に見せます。
Flutter に専用のウィジェットはないので、横向きの ListView に TextButton と「›」アイコンを交互に並べて作ります。
今いる場所(最後の項目)は押せない太字にして、それ以外を押すとそこまでの道すじに切り詰めます。
深くなって横にはみ出したら、ScrollController で右端(今いる場所)までスクロールさせると親切です。
こんなときに
- 3段以上の深い階層を行き来する(ファイル・カテゴリ・組織図)
避けたい場面
- 階層が浅い(戻るボタンだけで十分)
最小コード
ListView(
scrollDirection: Axis.horizontal,
children: [
for (final (i, name) in path.indexed) ...[
if (i > 0) const Icon(Icons.chevron_right, size: 18),
i == path.length - 1
? Center(child: Text(name, style: const TextStyle(fontWeight: FontWeight.bold)))
: TextButton(
onPressed: () => setState(() => path = path.sublist(0, i + 1)),
child: Text(name),
),
],
],
)使うウィジェット
ListView(horizontal)TextButtonIcon(chevron_right)
似ているもの・一緒に見たいもの
ナビゲーション
マスター/ディテールList-Detail Layout
一覧と詳細の組み合わせ。スマホでは「一覧 → 詳細」と画面を移り、タブレットでは左右に並べて同時に見せる。
スマホは画面を移る