Embedding a Flutter web app into Liveview

Questions & Help Questions
, ,
5

This is the code that I wrote in app.js:

import "../vendor/flutter_web/flutter.js"

let Hooks = {}

Hooks.Video = {
    mounted(){
        console.log("Hook Mounted!", this.el);

        window.addEventListener("phx:page-loading-start", function (ev) {
            // Embed flutter into div#flutter_target
            let target = document.querySelector("#flutter_target");
            _flutter.loader.loadEntrypoint({
              onEntrypointLoaded: async function (engineInitializer) {
                let appRunner = await engineInitializer.initializeEngine({
                  hostElement: target,
                });
                await appRunner.runApp();
              },
            });
          });
    }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
    params: {_csrf_token: csrfToken},
    hooks: Hooks
})

And in the console, I receive the message:
“Hook Mounted!”

<div id="flutter_target" phx-hook="Video"></div>