TextField on change, call api - how to throttle this? TextField on change, call api - how to throttle this? dart dart

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}));