How do I trigger a function when using HtmlElementView Widget?

user_6089054 0
Viewed 404

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 ?

dart flutter iframe html javascript
1 Answers

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

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

  2. 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.

user_65170600
Related