https://github.com/esentis/multiple_search_selection
A highly customizable multiple selection widget with fuzzy search functionality.
https://github.com/esentis/multiple_search_selection
flutter flutter-multiple-search flutter-multiple-search-selection flutter-multiple-selection flutter-widget fuzzy-matching fuzzy-search multiple-select multiple-select-dropdown
Last synced: 3 months ago
JSON representation
A highly customizable multiple selection widget with fuzzy search functionality.
- Host: GitHub
- URL: https://github.com/esentis/multiple_search_selection
- Owner: esentis
- License: bsd-3-clause
- Created: 2022-03-18T13:32:15.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2025-03-10T21:08:01.000Z (4 months ago)
- Last Synced: 2025-03-29T00:14:26.831Z (3 months ago)
- Topics: flutter, flutter-multiple-search, flutter-multiple-search-selection, flutter-multiple-selection, flutter-widget, fuzzy-matching, fuzzy-search, multiple-select, multiple-select-dropdown
- Language: Dart
- Homepage: https://pub.dev/packages/multiple_search_selection
- Size: 3.06 MB
- Stars: 16
- Watchers: 1
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Show some love by dropping a ⭐ at GitHub
#### A highly customizable multiple selection widget with fuzzy search functionality
```dart
// Use this controller to adjust the behaviour of the widget
// 1. getAllItems
// 2. getPickedItems
// 3. searchItems
// 4. clearSearchField
// 5. clearAllPickedItems
// 6. selectAllItems
// 7. minCharsToShowItems
// 8. allowDuplicateSelection
// 9. isSelectable
MultipleSearchController controller = MultipleSearchController();
MultipleSearchSelection(
// The TextField that is used to search items.
//
// You can use this to customize the search field.
// The `onChanged` of the `searchField` is used internally to search items,
// so you can use the `onSearchChanged` callback to get the search query.
searchField: TextField(
decoration: InputDecoration(
hintText: 'Search countries',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
),
),
),
onSearchChanged: (text) {
print('Text is $text');
},
items: countries, // List
fieldToCheck: (c) {
return c.name; // String
},
itemBuilder: (country,index,isPicked) {
return Padding(
padding: const EdgeInsets.all(6.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 12,
),
child: Text(country.name),
),
),
);
},
pickedItemBuilder: (country) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey[400]!),
),
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(country.name),
),
);
},
onTapShowedItem: () {},
onPickedChange: (items) {},
onItemAdded: (item) {},
onItemRemoved: (item) {},
sortShowedItems: true,
sortPickedItems: true,
fuzzySearch: FuzzySearch.jaro,
itemsVisibility: ShowedItemsVisibility.alwaysOn,
title: Text(
'Countries',
style: kStyleDefault.copyWith(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
showSelectAllButton: true,
maximumShowItemsHeight: 200,
)
```
### MultipleSearchSelection\.creatable
`MultipleSearchSelection.creatable` constructor can now create new item when search result does not return any results. It takes a new required parameter, `createOptions` e.g :
```dart
// [T] here is [Country]
createOptions: CreateOptions(
// You need to create and return the item you want to add since [T] is not always [String].
create: (text) {
return Country(name: text, iso: text);
},
// A callback when the item is succesfully created.
onCreated: (c) => print('Country ${c.name} created'),
// Create item Widget that appears instead of no results.
createBuilder: (text) => Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Create "$text"'),
),
),
// Whether you want to pick the newly created item or just add it to your list. Defaults to false.
pickCreated: true,
),
```
### Showed items visibility
`itemsVisibility` behaviour for the `default` & `creatable` constructors
| ShowedItemsVisibility.alwaysOn | ShowedItemsVisibility.onType | ShowedItemsVisibility.toggle |
| --------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
|  |  |  |
## Issues / Features
Found a bug or want a new feature? Open an issue in the [Github repository](https://github.com/esentis/multiple_search_selection) of the project.