アプリ開発時Google検索フォームのように、入力したキーワードを元に候補キーワードを表示させたいことがある。
このようなケースではAutocomplete
を用いると、「候補キーワード一覧を表示する入力フォーム」を簡単に実装することができる。
本エントリでは以下の流れでAutocomplete
の使い方を説明をする。
Autocomplete使用パターン
パターン別にコードと動作画面を示す。 使用しているプロパティについては「各プロパティの説明」で後述する。
説明のため候補キーワードが格納されたリストを_optionList
とする。
入力された文字列を含む候補キーワード一覧を表示する
選択した値を他のウィジェットで表示する
表示する候補キーワードを加工する
表示する候補キーワードに[ 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",