すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】Autocompleteで検索フォームに候補キーワードを表示させる

アプリ開発Google検索フォームのように、入力したキーワードを元に候補キーワードを表示させたいことがある。

Googleの検索フォーム

このようなケースではAutocompleteを用いると、「候補キーワード一覧を表示する入力フォーム」を簡単に実装することができる。

api.flutter.dev

本エントリでは以下の流れでAutocompleteの使い方を説明をする。


Autocomplete使用パターン

パターン別にコードと動作画面を示す。 使用しているプロパティについては「各プロパティの説明」で後述する。

説明のため候補キーワードが格納されたリストを_optionListとする。

入力された文字列を含む候補キーワード一覧を表示する

Autocomplete使用例

選択した値を他のウィジェットで表示する

選択した値を他のウィジェットで表示

表示する候補キーワードを加工する

表示する候補キーワードに[ added text ]を付け足して表示する。 選択するとフォームには[ added text ]も含めた文字列が表示される。

表示する候補キーワードを加工


各プロパティの説明

optionsBuilder

表示する候補キーワードを決定する処理を指定する。

入力された文字列はコールバック関数の引数にTextEditingValue型で渡される。

ここからtextプロパティで取得することができる。

そしてこのコールバック関数の戻り値が候補キーワード一覧として表示される。

上記のコードではoptionBuilderに以下を指定している。

optionsBuilder: (textEditingValue) => _optionList.where((option) => option.contains(textEditingValue.text)),

入力された文字列が含まれたoption(=_optionListに格納された文字列)の集合を .contains()で抽出し、コールバック関数の戻り値として返してフォームの下に一覧として表示している。

onSelected

表示された候補キーワードを選択した際の処理を指定する。

渡す値はコールバック関数。引数に選択した文字列が渡される。

「選択した値を他のウィジェットで表示する」パターンのコードでは以下のように記述している。

onSelected: (selectedOption) {
                setState(() {
                  _selectedKeyword = selectedOption;
                });
              },

displayStringForOption

候補キーワードの表示形式を指定する。

引数に候補キーワードが渡されるコールバック関数を指定する。 コールバック関数の戻り値が実際に表示される文字列となる。

「表示する候補キーワードを加工する」パターンでは文字列の先頭に[ added text ]をくっつけている。

displayStringForOption: (option) => "[ added text ] $option",