I created this very simple class extending SearchDelegate to use it as search bar:
class DataSearch extends SearchDelegate<String>{
@override
List<Widget>? buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {query = '';},
icon: const Icon(Icons.clear))
];
}
@override
Widget? buildLeading(BuildContext context) {
return IconButton(
onPressed: (){close(context, '');},
icon: AnimatedIcon(
progress: transitionAnimation,
icon: AnimatedIcons.menu_arrow
));
}
@override
Widget buildResults(BuildContext context) {
//TODO show some results based on the selection
return Scaffold();
}
@override
Widget buildSuggestions(BuildContext context) {
final namesList = [];
final suggestionList = query.isEmpty ? [] : namesList;
return ListView.builder(
itemBuilder: (context, index) => ListTile(
title: RichText(
text: TextSpan(
text: suggestionList[index].substring(0, query.length),
style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: const TextStyle(color: Colors.grey))
]),
),
),
itemCount: suggestionList.length,
);
}
}
and it works but to make it a bit better I'd like to make a new query to my database everytime the user inserts/removes a letter to the text input (similarly to the the onChanged attribute of the TextField) but I can't find a way to do it. What can I do?
Solution 1: THEODORE
You can drop the method anywhere inside the buildSuggestions Widget;