How to detect user has stopped typing in TextField?

Question

I am using a TextField under which onChanged function

I am calling my code but the issue right now is the code gets execute everytime a new word is either entered or deleted.

what I am looking for is how to recognize when a user has stopped typing.

means adding some delay or something like that.

I have tried adding delay also using Future.delayed function but that function also gets executed n number of times.

TextField(
   controller: textController,
   onChanged: (val) {
            if (textController.text.length > 3) {
              Future.delayed(Duration(milliseconds: 450), () {
                 //code here
              });
            }
            setState(() {});
          },
 )

I have seen some examples related to it, but not used it till now. Do you have some example you can share related to this use case? — Vicky Salunkhe, Jun 30 '19 at 09:18
see https://pub.dev/packages/stream_transform, and use [debounce](https://pub.dev/packages/stream_transform#debounce-debouncebuffer) stream transformer - the docs say: *"Prevents a source stream from emitting too frequently by dropping or collecting values that occur within a given duration."* — pskink, Jun 30 '19 at 09:21
thankyou @pskink do you know where can I find an example for that package. I guess there is too less document available. — Vicky Salunkhe, Jun 30 '19 at 09:23
https://api.dartlang.org/stable/2.4.0/dart-async/Stream/transform.html — pskink, Jun 30 '19 at 09:25
Hi @pskink can you post some code example on how to use it with TextField, I am right now clueless on how to use it. — Vicky Salunkhe, Jun 30 '19 at 09:40
see https://dart.dev/articles/libraries/creating-streams#using-a-streamcontroller - inside `onChanged` simply call `StreamController.add` method — pskink, Jun 30 '19 at 09:53
as simple as: `StreamController controller = StreamController();` then inside `initState` method: `controller.stream.transform(debounce(Duration(seconds: 1))).listen((s) => print('you typed: [$s]'));` and use it in your widget: `TextField(onChanged: controller.add),` — pskink, Jun 30 '19 at 10:21
@pskink Hi mate, over last few months, I have seen you providing excellent solutions but only in comment, why don't you write them down as an answer, you would have easily gained +10k reputation. — CopsOnRoad, Jun 30 '19 at 12:04

Hamid Waezi · Answer 1 · 2022-10-03T04:35:57.223

I find something so lighter in this link

it define this class

class Debouncer {
  final int milliseconds;

  Timer? _timer;

  Debouncer({this.milliseconds=500});

  run(VoidCallback action) {
    if (null != _timer) {
      _timer!.cancel();
    }
    _timer = Timer(Duration(milliseconds: milliseconds), action);
  }
}

this sample will help you more

TextField(
     decoration: new InputDecoration(hintText: 'Search'),
     onChanged: (string) {
       _debouncer.run(() {
       print(string);
       //perform search here
       });
     },
   ),

Vicky Salunkhe · Accepted Answer · 2019-06-30T10:58:40.943

2

Thanks to @pskink

I was able to achieve the functionality I was looking for.

import stream_transform package in your pubspec.yaml

stream_transform: ^0.0.19

import 'package:stream_transform/stream_transform.dart';

StreamController<String> streamController = StreamController();

@override
void initState() {
  streamController.stream
    .transform(debounce(Duration(milliseconds: 400)))
    .listen((s) => _validateValues());

  super.initState();
}

//function I am using to perform some logic
_validateValues() {
  if (textController.text.length > 3) {
     // code here
  }else{
     // some other code here
  }
}

TextField code

TextField(
   controller: textController,
   onChanged: (val) {
        streamController.add(val);
     },
)

edited Jun 30 '19 at 10:58

answered Jun 30 '19 at 10:40

Vicky Salunkhe

9,869
6
42
59

instead of `textController.text.length > 3` use `Stream.where()` method (before calling `Stream.listen()`) – pskink Jun 30 '19 at 10:46
1

you mean like this `.where((String val) => userHandleController.text.length > 3 ? true : false)` – Vicky Salunkhe Jun 30 '19 at 10:57
but then how would I pass true or false to `_validateValues` function as I need to execute two code , in `if` and in `else` – Vicky Salunkhe Jun 30 '19 at 10:58
2

What is mean debounce function on here ? It is not defined. @VickySalunkhe – Alperen ARICI Jan 01 '21 at 12:05

RHS.Dev · Answer 3 · 2021-10-17T17:40:59.347

In my case I also required flutter async.

//pubspec.yaml
stream_transform: ^2.0.0

import 'dart:async';
import 'package:stream_transform/stream_transform.dart';

StreamController<String> streamController = StreamController();

// In init function
streamController.stream
    .debounce(Duration(seconds: 1))
    .listen((s) => { 
       // your code 
     });

// In build function
TextField(
   style: TextStyle(fontSize: 16),
   controller: messageController,
   onChanged: (val) {
     myMetaRef.child("isTyping").set(true);
     streamController.add(val);
     },
   )

Mohammad Khan Awan · Answer 4 · 2023-07-20T19:07:38.100

I know this is pretty late. In my case I needed to check the availability of an email during the sign up process and needed to show the relevant message to user when the user stopped typing the email in the textfield. You need to create a timer and reset it every time the user types something inside the textfield. Here's the code:

Timer? _checkTypingTimer;

startTimer() {
    _checkTypingTimer = Timer(const Duration(milliseconds: 600), () {//set your desired duration
      //perform your logic here
      //i was calling the method here which checks if the email is available or not
    });
  }

resetTimer() {
    _checkTypingTimer?.cancel();
    startTimer();
  }

Now call this resetTimer method inside the onChanged method of your textfield. And don't forget to import dart:async

Note: The answer given above with the medium link, the "debouncer one", may needlessly invoke your code several times

How to detect user has stopped typing in TextField?

4 Answers4

Linked