CODEWITHSUNDEEP
flutter
Ash Khachatryan
Ash Khachatryan

Reputation: 455

Detect TextFormField stop typing in flutter

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.

Upvotes: 4

Views: 5578

Answers (2)

SalahAdDin
SalahAdDin

Reputation: 2270

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.

Upvotes: 1

Suman Maharjan
Suman Maharjan

Reputation: 1122

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),
                  )

Upvotes: 9

Related Questions