flutter_typeahead
flutter_typeahead copied to clipboard
Multi-suggestions?
Hi team--
Thanks a lot for the job so far.
I am trying to implement in my app something similar to tagging people on Facebook/Twitter, etc. Flutter_typeAhead works great for one (I am using the classic '@' to kick off the backend service), but it stops there. Is there a way to:
- keep the cursor active once a suggestion has been chosen
- allow for another search (with space/colon/semi-colon separator to distinguish the pattern to search for eventually)
- not necessarily pertinent to typeAhead, but is there a way to format the same TextField differently? The goal will be to distinguish the suggestions to other texts the users might input (again, think Twitter, you can @ to tag someone and write a text close to it).
Gracias!
I was able to achieve this, but after some your library updates, suggestionsCallback do not call more than once anymore, any ideas?
Only one suggestionsCallback is running at a time now. Some users had expensive DB calls, were concurrent calls were hitting the server too hard. If the user changes the text, the suggestionsCallback will be queued and called again once the current one is finished. But to address the original questions,
-
Does setting
keepSuggestionsOnSuggestionSelected
to true work? This will keep the suggestions box open and may help with your multi-selection problem. You can use asuggestionsBoxController
to manually close the suggestions or it will auto-close when the keyboard closes. -
I believe you can do this in
suggestionsCallback
already? Just check the beginning of the string and return the correct list of results using if statements. -
You might be able to this in
itemBuilder
. Use if statements and check the suggestion in the callback. Return a differently formatted widget according to the suggestion. If beginning contains @ return this widget, else return this other widget.
Just for anyone else in the future that might want to create multiple selectable with the type ahead plugin.
-
keepSuggestionsOnSuggestionSelected
works and will keep the dropdown open even if the user clicks on a suggestion. - when you returning a list in
suggestionsCallback
map it to have aselected
variable. - create a list that will persist the build, for example.
List<String> selectedItems
- in the
itemBuilder
I created aValueNotifier
that would check if the suggestions have been selected by the user - the
itemBuilder
also returns aValueListenableBuilder
that will liten to the notfier created in the step above. The builder itself will need to returnCheckboxListTile
ValueNotifier<bool> notifier = ValueNotifier<bool>(
selectedItems.contains(name),
);
return ValueListenableBuilder(
valueListenable: notifier,
builder:
(BuildContext context, dynamic value, Widget? child) {
return CheckboxListTile(
title: Text(name),
value: notifier.value,
onChanged: (value) {
setState(() {
notifier.value = value!;
});
if (selectedItems.contains(name)) {
selectedItems.remove(name);
} else {
selectedItems.add(name);
}
},
controlAffinity: ListTileControlAffinity.trailing,
);
},
);