Flutter inject css before the page loaded with InAppWebView plugin

Question

I injected css into an InAppWebView component in Flutter, what hides content on a page but the content appears for a bit. I tried contentBlockers in options to block the css selector and injecting css in the events of onLoadStart, onLoadStop, onWebViewCreated and onProgressChanged but I couldn't solve the flickering issue.

How can I inject the css before the page appears on the screen without content flickering?

score 1 · Answer 1 · answered Jul 13 '23 at 05:12

You could inject the CSS in the onPageCommit callback.

Here's a sample:

InAppWebView(
        initialUrlRequest: URLRequest(
          url: Uri.parse("https://google.com"),
        ),
        onPageCommitVisible: (controller, url) {
          controller.evaluateJavascript(source: """
              var style = document.createElement('style');
              style.innerHTML = "img{ display: none; }";
              document.head.appendChild(style);
          """);
        },
      )

This hides the img element from "https://google.com".

Flutter inject css before the page loaded with InAppWebView plugin

1 Answers1