Cannot scroll the screen when mouse hovers over HtmlElementView

user_10995898 0
Viewed 185

I'm trying to put ads on my website using iFrame and HtmlElementView component in Flutter Web. The whole ad code is inside an external file. The problem is when I hover mouse over the ad element and try to scroll up or down it doesn't work, the ad intercepts an action. I tried to use https://pub.dev/packages/pointer_interceptor but for this issue it doesn't work.

Code of method displaying single ad:

      double width, double height, String htmlPageName, String viewType) {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        viewType,
        (int viewID) => IFrameElement()
          ..src = htmlPageName
          ..style.border = 'none');

    return PointerInterceptor(
      child: Container(
        height: height,
        width: width,
        child: HtmlElementView(
          viewType: viewType,
        ),
      ),
    );
  }

And an example of its usage

buildContent() => Padding(
        padding: EdgeInsets.all(32),
        child: Container(
          child: PointerInterceptor(
            child: SingleChildScrollView(
              primary: false,
              child: Column(
                children: [
                  buildSomething(),
                  SizedBox(
                    height: 16,
                  ),
                  buildSomething(),
                  SizedBox(
                    height: 16,
                  ),
                  AdsManager.displayHtmlBannerFromExternalFile(320, 300,
                      "banner_ads_300_250.html", "banner300x250"),
                  SizedBox(
                    height: 4,
                  ),
                  buildSomething(),
                ],
              ),
            ),
          ),
        ),
      );

There's a html code for the ad(banner_ads_300_250.html)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="adm-container-5494"></div>
<script data-cfasync="false" async type="text/javascript" src="//examplead.com/app/display/items.php?5494&2322&300&250&4&0&0"></script>
</body>
</html>

What do I do wrong? Looking forward to your answers.

flutter-web flutter iframe
1 Answers

You need put the pointer intercepter on a transparent widget you put on top of the html:

Stack(
                    children: [
                      SizedBox(
                        width: _iFrameWidth,
                        height: _iFrameHeight + 30,
                        child: _iframeWidget,
                      ),
                      PointerInterceptor(
                        intercepting: _isInterceptingPointers,
                        debug: true,
                        child: Material(
                          color: Colors.transparent,
                          child: SizedBox(
                            width: _iFrameWidth,
                            height: _iFrameHeight - 10,
                          ),
                        ),
                      ),
user_58970260
Related