Implementing Search in Flutter — Delay Search while typing
Often we use a search bar in our app to perform autocomplete-style searches via network calls. In such a case, it is not feasible to perform a network request with every character that the user types/changes; that would result in wasted network calls. it is better to search once the user pauses or stops typing. This can be achieved using a Debouncer, which uses a timer to delay the search request until it stops receiving text changes for half a second, or any duration that you set.
Add this class Debouncer, anywhere in your project.
class Debouncer {
final int milliseconds;
VoidCallback action;
Timer _timer;
Debouncer({this.milliseconds});
run(VoidCallback action) {
if (null != _timer) {
_timer.cancel();
}
_timer = Timer(Duration(milliseconds: milliseconds), action);
}
}
And back in the screen where we are performing the search.
Create an instance of the Debouncer class. You can modify the duration.
final _debouncer = Debouncer(milliseconds: 500);
Finally, in the search bar onChanged event, use the debouncer and perform the search action.
onChanged: (string) {
_debouncer.run(() {
print(string);
//perform search here
}
);
Example of the search bar using TextField:
Row(
children: <Widget>[
Icon(Icons.search),
SizedBox(width: 8),
Flexible(
child: TextField(
decoration: new InputDecoration(hintText: 'Search'),
onChanged: (string) {
_debouncer.run(() {
print(string);
//perform search here
});
},
),
),
],
)
…
Originally published at Fabcoding.