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

ドロップダウンメニュー Dropdown Menu

入力欄のような箱を押すと、選べる候補の一覧が下に開く。文字を入れて絞り込むこともできる。

別名
プルダウンセレクトボックスコンボボックス選択リストSelectCombo Box
動き
下に開く文字で絞り込み
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの?

Web のフォームでいう「プルダウン」「セレクトボックス」です。

Material 3 の DropdownMenu は、enableFilter: true で入力した文字による絞り込みができ、

候補が多いとき(都道府県など)にも使えます。

古い DropdownButton もまだ使えますが、新しく作るなら DropdownMenu がおすすめです。

こんなときに

  • フォームの中で、決まった候補から1つ選ばせたい
  • 候補が多く、検索して選ばせたい

避けたい場面

  • 候補が2〜3個しかない(ラジオボタンや SegmentedButton のほうが一目で分かる)

最小コード

DropdownMenu<String>(
  label: const Text('都道府県'),
  enableFilter: true,
  requestFocusOnTap: true,
  onSelected: (value) => setState(() => picked = value),
  dropdownMenuEntries: [
    for (final p in prefectures) DropdownMenuEntry(value: p, label: p),
  ],
)

使うウィジェット

DropdownMenuDropdownMenuEntryDropdownButton

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

触ってみる ↗
ダイアログ・シート モーダルボトムシートModal Bottom Sheet

画面の下から板がせり上がってきて、選択肢や小さなフォームを出す。外側を押すか下に引くと閉じる。

下から出てくる