Translating MDN Web APIs docs to Flutter:DOM Manipulation

If you’ve already read my previous article, you must be wondering if instead of adding the HTML yourself, you can do that programmatically. I attempt the rewrite of my Audio Player implementation through DOM Manipulation in this article.

Again, this is all just good-ol’ human effort.

We now know that Web APIs have an entry-point. DOM Manipulation API uses document to expose the launched HTML. The example of the package web also shows an example that uses the same keyword.

From here on I rely on the Dart compiler to just help me wherever possible.

The document.body exposes a lot of read-only properties. I spent some time on the children property before I realised it was read-only. But then, I found the method I needed- appendChild() .

I used the similar method of defining the audioMediaElement and the playButtonElement but this time, I cleaned my index.html and added all the required properties through my Dart code.

Since I already have a lot of my code written and working, I’ll break my init() and separate the functions by concern.

  void init() {
    _addChildrenToDOM();
    _setupAudioService();
    _setupEventListeners();
  }

  void _addChildrenToDOM() {
    audioMediaElement =
        HTMLAudioElement()
          ..className = "audio_player"
          ..src = "assets/audio/example_audio.mp3"
          ..volume = defaultVolumeValue;

    playButtonElement =
        HTMLButtonElement()
          ..className = "paused"
          ..title = "Play"
          ..textContent = "Play";

    document.body
      ?..appendChild(audioMediaElement)
      ..appendChild(playButtonElement);
  }

You’ve probably already figured out how the methods _setupAudioService() and _setupEventListeners() are defined.

From here it was easy, I just ran the project again and it worked!

I wonder if we need the Play button…

After all, the play button is not some element visible to the user and we can manage the player state otherwise anyway.

To do this, I just removed all the code associated with the playButtonElement and reduced the onButtonClick() to this:

  void onButtonClick() {
    if (playButtonState.valueOrNull == "paused") {
      audioContext.resume().toDart.then((_) {
        playButtonState.sink.add("playing");
        audioMediaElement.play();
      });
    } else if (playButtonState.valueOrNull == "playing") {
      audioContext.suspend().toDart.then((_) {
        playButtonState.sink.add("paused");
        audioMediaElement.pause();
      });
    }
  }

And guess what? It works!

Can I set it up to play automatically?

So I setup the init() like so:

  void init() {
    _addChildrenToDOM();
    _setupAudioService();
    _setupEventListeners();
    onButtonClick();
  }

And no, it doesn’t work.

It doesn’t print any errors in the console either but I suppose the security established through the Autoplay Policy can be the reason for it.

I wanna do more…

Let’s update the app title and margin at the same time.

We know margin is found inside the style attribute of body , and the DOM title (the text visible as the tab name) is the document title .

I added a button to add margin to the DOM and update the title with the measure of current margin. Here’s the updatedHomeController :

...
static const marginStep = 10;

void _updateTitle(String value) {
  document.title = "Margin set $value";
}

void addMargin() {
  final currentMargin = double.parse(
    document.body?.style.margin.replaceAll("px", "") ?? "0",
  );
  final newMargin = currentMargin + marginStep;
  _updateTitle(newMargin.toString());
  document.body?.style.margin = "${newMargin}px";
 }
...

And here’s the result:

Dynamic addition to margin

Looks clunky, but it works!

Here’s an example of how this is useful- this works for some of those web apps running inside webviews that require allowances for device notches to be able to display UI unhindered.

Another example- this is also the working principle of my PayU India Web plugin.

Similarly, there’s a lot of manipulation we can do.

That’s all for this article. I will cover more in the next few articles so please stay tuned in.