TextField on change, call api - how to throttle this?
Use a Timer
.
If a key is pressed before one second cancel the old timer and reschedule with a new Timer, otherwise make the API call:
import 'dart:async';class _MyHomePageState extends State<MyHomePage> { String textValue; Timer timeHandle; void textChanged(String val) { textValue = val; if (timeHandle != null) { timeHandle.cancel(); } timeHandle = Timer(Duration(seconds: 1), () { print("Calling now the API: $textValue"); }); } @override void dispose() { super.dispose(); timeHandle.cancel(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( padding: EdgeInsets.all(20), alignment: Alignment.center, child: TextField( onChanged: textChanged, decoration: InputDecoration( border: InputBorder.none, hintText: 'Please enter a search term')), ), ], ), ), ); }}
You need to make use of a class named CancelableOperation
from the async package.
You can declare it in your stateful widget, outside the build()
method:
CancelableOperation cancelableOperation;
And use it like so within your onChanged
callback:
cancelableOperation?.cancel();cancelableOperation = CancelableOperation.fromFuture(Future.delayed(Duration(seconds: 1), () { // API call here}));