How to detect user has stopped typing in TextField?

user_9236994 0
Viewed 5059

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(() {});
          },
 )
dart flutter textfield delay
3 Answers

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

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

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

),

user_43360940
Related