flutter でドロップダウンに検索を入れる方法

flutter でドロップダウンに検索を入れる方法

ライブラリ

• search_choicesを使うと楽にサクッと実装可能
  • https://pub.dev/packages/search_choices
• searchable_dropdown はメンテされてないようで flutter最新だと text_theme 依存でエラーが出た。
  • https://pub.dev/packages/searchable_dropdown

サンプル

• https://lcuis.github.io/search_choices/demo/#/

• https://github.com/lcuis/search_choices/blob/master/example/lib/main.dart

• 基本DropdownButtonをSearchChoicesに変えるだけ。

SearchChoices.single(
  items: items,
  value: value,
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
  isExpanded: true,
)

• itemsが文字列リストじゃない場合はsearchFnでカスタマイズしてやればOK.

searchFn: (String keyword, items) {
  List<int> ret = [];
  if (items != null && keyword.isNotEmpty) {
    keyword.split(" ").forEach((k) {
      int i = 0;
      items.forEach((item) {
        if (k.isNotEmpty &&(item.value.name.contains(k.toLowerCase()))) {
          ret.add(i);
        }
        i++;
      });
    });
  }
  if (keyword.isEmpty) {
    ret = Iterable<int>.generate(items.length).toList();
  }
  return (ret);
}