検索バー Search Bar
角の丸い検索欄を押すと全画面の検索画面に広がり、文字を入れるたびに候補が絞られていく。
本物の 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