How to update dom element in certain interval of time in dart?

Question

I want to create a text typing effect in simple web application. It's my first time using dart for web application. I did something like this.

var chars = "Hello World".split('');
    var textstream = Stream<String>.fromIterable(chars);

    var idx = 0;
    textstream.listen((data) {
      Future.delayed(Duration(milliseconds: idx * 200), () {
        var element = querySelector('#hero-keyword');
        element.appendText(data);
        idx++;
      });
    });

And my html has this

<p id="hero-keyword"></p>

But, I want each letter printed in the interval of 200ms. But what I got is, all letters show up at the same time.

Answer 1

Your idx variable is only being updated when the delayed future completes, which will happen on the first pass of the event loop after the specified delay.

fromIterable, however, will process its values all at once, in sequence. Taken together, the net effect is that all of your delays are being set to 0, and then, after a slight delay, all of your characters will be emitted, and idx will be incremented.

You can try the following pattern, instead, adjusted to your use case:

void main() {
  var text = "Hello world";
  Stream
    .periodic(Duration(milliseconds: 200), (count) {
      print(text[count]);
    })
   .take(text.length)
   .drain();
}