How do I trigger a function when using HtmlElementView Widget?

javascript html flutter dart iframe

281

I just found the workaround for this one. So basically, we can take advantage of window.localStorage where it can be accessed from both flutter and html, and add listener in flutter for any change in window.localStorage

Add listener inside the flutter

final Storage webLocalStorage = window.localStorage;

htmlListener(){ String buttonClicked = webLocalStorage["buttonClicked"]; if(buttonClicked=="yes"){ //do whatever }else{ Future.delayed(Duration(milliseconds: 100), (){ htmlListener(); }); } }
Do some change to the webstorage in the HTML

var webLocalStorage = window.localStorage; webLocalStorage["buttonClicked"] = "yes";

And you can do the same vice versa, that is listen from html, change in flutter.

281

Author by

Damian

Updated on December 22, 2022

Comments

Damian over 1 year

I am trying to call a function (widget.onTap()) in the following code

GestureDetector(
  onTap: () {
    widget.onTap()
  },
  child: Container(
     height: 1.9 * widget.height,
     width: 1.2 * widget.width,
        child: HtmlElementView(viewType: 'liquid-button', key: UniqueKey(),),
     ),
  )

I have registered my "liquid-button" as such

ui.platformViewRegistry.registerViewFactory('liquid-button', (int viewId) {
var element = html.IFrameElement()
        ..style.border = 'none'
        ..srcdoc = """
        <!DOCTYPE html>
          <head>
          </head>
          <body>
            <svg class="liquid-button"
          ...
         """
   return element;
});

The problem is I cannot capture anything from the user no matter what I try. The GestureDetector doesn't work, neither do the buttons. I am able to trigger some code in JS, but I need to handle it in Dart. Is this possible ?