個人開発者が勉強がてらまとめているだけのサイトです

パンくずリスト Breadcrumb

「ホーム › 写真 › 2026年」のように今いる場所までの道すじを並べ、途中を押すとそこへ一気に戻れる。

別名
パンくず階層表示パス表示現在地表示BreadcrumbsPath Bar
動き
深くなると伸びる途中を押して戻る横にスクロール
作り方
自作 標準ウィジェットの組み合わせで自分で作ります

本物の 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

一覧と詳細の組み合わせ。スマホでは「一覧 → 詳細」と画面を移り、タブレットでは左右に並べて同時に見せる。

スマホは画面を移る