igrasso

igrasso

Embedding a Flutter web app into Liveview

Hello everyone, I’m a totally new to phoenix, LiveView and in general frontend/backend development. But I think that starting with Phoenix LiveView is already a good step :slight_smile:.

Just to make things a bit more spicy, I need to take a self contained flutter web app and display it with LiveView. I’m following the guideline flutter_embedding. After reading enough about JS and how to work with LiveView I decided to create a hook. I moved all the generate flutter web files in the js/vendor/flutter_web folder. The hook is mounting correctly but I have no idea how to proceed. I’m not able to display anything in my flutter_targer div.
I’m sure that I’m missing something trivial but my inexperience with the web world is not helping me. Can somebody please point me in the correct direction?

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

Most Liked

ndrean

ndrean

Did you try without the “phx:page-loading-start” listener?

In case you want dynamic import, check this

Where Next?

Popular in Questions Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
JulienCorb
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: <h1>Create Post</h1> <%= ...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Other popular topics Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 47930 226
New

We're in Beta

About us Mission Statement