Detect TextFormField stop typing in flutter - flutter

Question

I have TextFormField, and want do same actions when user stop typing in textfield. Now I am using onchange function, but I want detect when user stop typing.

Answer 1

If you want to achieve debounce on textfield for searching, then here you go.
final _searchQueryController = new TextEditingController();
Timer _debounce;
String query = "";
int _debouncetime = 500;
#override
void initState() {
_searchQueryController.addListener(_onSearchChanged);
super.initState();
}
#override
void dispose() {
_searchQueryController.removeListener(_onSearchChanged);
_searchQueryController.dispose();
super.dispose();
}
_onSearchChanged() {
if (_debounce?.isActive ?? false) _debounce.cancel();
_debounce = Timer(Duration(milliseconds: _debouncetime), () {
if (_searchQueryController.text != "") {
///here you perform your search
performSearch(_searchQueryController.text);
}
});
}
//your textfield
TextField(controller: _searchQueryController,
autofocus: true,
decoration: InputDecoration(
hintText: " Search...",
border: InputBorder.none,
),
style: TextStyle(fontSize: 14.0),
)

Answer 2

You can do it with flutter_hooks as follows:
class DebounceTextField extends HookWidget {
///
const DebounceTextField({
Key? key,
required this.padding,
required this.onAnswer,
required this.child,
this.initialText,
this.debounceTime,
}) : super(key: key);
///
final EdgeInsets padding;
///
final String? initialText;
///
final OnAnswer onAnswer;
///
final TextFormField child;
///
final int? debounceTime;
#override
Widget build(BuildContext context) {
final TextEditingController textController =
useTextEditingController(text: initialText);
useEffect(
() {
Timer? timer;
void listener() {
timer?.cancel();
timer = Timer(
Duration(milliseconds: debounceTime ?? 500),
() => onAnswer(textController.text),
);
}
textController.addListener(listener);
return () {
timer?.cancel();
textController.removeListener(listener);
};
},
<TextEditingController>[textController],
);
// child.controller = textController;
return Padding(
padding: padding,
child: TextFormField(
controller: textController,
validator: _shortAnswerValidator,
decoration: const InputDecoration(
hintText: "Cevabı buraya yazınız...",
),
),
);
}
}
We got the inspiration for this one here.