How to process user input as it writes in Dart

Issue

I’m trying to build a web app with Dart and HTML. I have a HTML input field
which receives type text. I would like to process the text the user inputs as it inputs each letter, not only when it hits ENTER or something like that.

I currently came up with this solution in Dart but it only prints the user input when it hits ENTER which is not what I’m looking for as said.

import 'dart:html';

    void main() {
      TextInputElement text = querySelector("#input-text");
      text.autocomplete = "asas";
      text.onChange.listen((data) {
        parent.appendHtml('<p>${text.value}</p>');
      });
    }

I looked up some topics like Futures, Streams and Broadcast streams but it doesn’t look like what I need still.
If someone could help it would be great!

Solution

Onchange will only work that way because it listens to submit events.
What you can do instead is listen to input field .onKeyUp event.

Everytime inside the input field if you type and the moment you release your key this event will be registered and listeners will be invoked

https://dartpad.dartlang.org/02e27326c073de360f14bb9a9726f1c9

You can see this example on dart the moment you type something it get’s printed.

Here onKeyDown on onKeyPress can also be used but the thing is if the user keeps the key pressed it will register all of those events creating n number events

Answered By – Nadeem Siddique

Answer Checked By – Katrina (FlutterFixes Volunteer)