MENU
暮らしを少し便利にするアプリとサービスを作っています
  1. ホーム
  2. Flutter
  3. コンボボックスってなに?入力もできるドロップダウンの便利さ

コンボボックスってなに?入力もできるドロップダウンの便利さ

Flutter

Flutterアプリを開発していたら「コンボボックス」というUIに出会いました。

今日はこの便利な仕組みについて、初心者目線でまとめてみます。

目次

コンボボックスとは?

コンボボックスとは、ひとことで言うと「手入力もできて、選択肢から選ぶこともできる入力欄」のことです。
「コンボ(combo)」は「組み合わせ」という意味の英語。テキスト入力欄(TextField)とドロップダウン(選択肢の一覧)を組み合わせたUIなので、コンボボックスと呼ばれています。
普段、Webサイトでよく見る例:

検索ボックスで文字を入力すると、過去の検索履歴がプルダウンで出てくる
フォームで都道府県を選ぶときに、「東京」と打つと「東京都」が候補に出る
メールアドレスを入力するときに、過去に使ったアドレスが補完される

これら全部、コンボボックスです。

どんなことができるのか?


私が今日学んだのは、コンボボックスがユーザー体験を劇的に良くするということ。
たとえば、「取引先名」を毎回入力するアプリを考えてみます。

普通のテキスト入力欄の場合

取引先: [ ] ← 毎回キーボードでタイプ


毎回「Amazon」「楽天」「Adobe」と手入力。タイピングミス・表記揺れが発生します。「Amazon」「アマゾン」「amazon」とバラバラに記録されて、後から検索できない、なんてことに。


普通のドロップダウンの場合

取引先: [▼ 選んでください] ← 選択肢から選ぶだけ


タイピングミスはないけど、選択肢にない取引先には対応できない。新しい取引先を追加するには、設定画面で事前に登録する必要があって面倒。

コンボボックスの場合

取引先: [Amazon ] [▼]
↓ クリック
┌──────────┐
│ 履歴 │
│ Amazon 15回│ ← 過去に使ったもの
│ 楽天 8回│
│ ───── │
│ 内蔵候補 │
│ Amazon │ ← 最初から用意
│ 楽天 │
│ Adobe │
└──────────┘
  • よく使うものは1クリックで選択
  • リストにないものは手入力でOK
  • 手入力したものは自動で履歴に追加されて、次回からは候補に出る
  • 「使うほど賢くなる」体験

これが、コンボボックスのすごいところです。

Flutterでの実装方法


Flutter には、コンボボックスにぴったりの仕組みがいくつか用意されています。

方法1: TextField + PopupMenuButton


私が今日採用したのはこの方法です。シンプルで分かりやすい構成。

dartRow(
children: [
Expanded(
child: TextField(
controller: _vendorController,
// 手入力部分
),
),
PopupMenuButton(
icon: const Icon(Icons.arrow_drop_down_circle_outlined),
onSelected: (String value) {
// 選択された値をテキストフィールドに反映
_vendorController.text = value;
},
itemBuilder: (BuildContext context) {
return _candidates.map((vendor) {
return PopupMenuItem(
value: vendor,
child: Text(vendor),
);
}).toList();
},
),
],
)


ポイント:

  • TextField で手入力を受け付ける
  • PopupMenuButton がドロップダウンの役割
  • ▼ボタンをクリックするとリストがポップアップ
  • 選択するとテキストフィールドに反映

方法2: Autocomplete ウィジェット


Flutterには「Autocomplete」という、入力するとリアルタイムで候補が絞り込まれる高機能なウィジェットもあります。Googleの検索ボックスのような動きが実現できます。


履歴の自動学習(shared_preferences で永続化)
コンボボックスをさらに賢くするには、ユーザーが使った履歴を保存します。Flutterでは shared_preferences というパッケージを使うと、アプリを再起動しても履歴が残ります。


/ 履歴を保存
await prefs.setString('vendor_history', json.encode(history));
// 履歴を読み込み
final saved = prefs.getString('vendor_history');


これで、ユーザーは「使えば使うほど自分専用に育っていくアプリ」を体験できます。

まとめ


今日学んだのは、UIの設計判断ひとつで、ユーザーが「これは便利!」と感じる体験を作れるということ。

手入力だけ → ミスが多い、面倒
選択肢だけ → 柔軟性がない
コンボボックス → 両方の良いところを組み合わせ

「設定画面を作って事前に登録してもらう」よりも、「使っていくうちに勝手に賢くなる」設計の方が、ユーザーは離脱しません。
シンプルだけど奥が深い、コンボボックスのお話でした。

Flutter
目次