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

検索バー Search Bar

角の丸い検索欄を押すと全画面の検索画面に広がり、文字を入れるたびに候補が絞られていく。

別名
サーチバー検索ボックス検索ビューサジェスト付き検索SearchAnchorSearch View
動き
押すと全画面に広がる入力で候補が絞られる
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

Material 3 の検索は、ふだんは丸い「検索バー」で、押すと「検索ビュー」に広がる2段構えです。

SearchAnchor.bar を使うと、この広がる動きと候補一覧の表示をまとめて作れます。

suggestionsBuilder は文字が変わるたびに呼ばれ、controller.text に入力中の文字が入っています。

候補を選んだら controller.closeView(選んだ文字) で閉じます。

こんなときに

  • アプリの中の物(駅・商品・メモなど)を名前で探させたい
  • 入力しながら候補を見せて、打つ手間を減らしたい

避けたい場面

  • 選択肢が10個程度しかない(一覧から選ばせたほうが早い)

最小コード

SearchAnchor.bar(
  barHintText: '駅名で検索',
  suggestionsBuilder: (context, controller) => [
    for (final s in stations)
      if (s.contains(controller.text))
        ListTile(
          title: Text(s),
          onTap: () => controller.closeView(s),
        ),
  ],
)

使うウィジェット

SearchAnchorSearchAnchor.barSearchBar

似ているもの・一緒に見たいもの

触ってみる ↗
ナビゲーション スクロールで縮む見出しCollapsing App Bar

最初は大きな画像と見出しが出ていて、上にスクロールすると縮んで普通の細い見出しになって上に残る。

スクロールで縮む