Search code examples
androidflutterandroid-webviewflutterwebviewpluginwebview-flutter

Flutter android Webview from HTMLString stays blank until interaction then shows content

i have the Problem that the webview in android stays blank (black or white depending on android theme) until some interaction, be it touching the screen, rotating the device or using the volume buttons. To reproduce one could create a sample flutter, app add the webview_flutter (version 4.9.0), copy the WebViewComponent and open it on some button click with.

The new Page will open but blank when you then touch the screen it will show the HTML Content. Tested on an real device android 14.

Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => const WebViewPage(
                    content: "Some HTML Body",
                    title: "Cool Title",
                  )),
        );

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key, required this.content, this.title});
  final String content;
  final String? title;

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  var webViewController = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted);
  @override
  void initState() {
    super.initState();
    // this also does not work
    //webViewController.loadRequest(Uri.dataFromString("your html", mimeType: 'text/html', encoding: utf8));
    webViewController..loadHtmlString('''<!DOCTYPE html>
        <html lang='de-DE'>
          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=0.2" />
            <style>
               div span, div p {
                  font-size: 2vw !important;
               }
            </style>
          </head>
          <body style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal;">
            ${widget.content}
            <script>
              console.log("js log")
            </script>
          </body>
        </html>''')..platform.setOnConsoleMessage(onconsoleleLog);
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
            title: Text(
          (widget.title != null ? widget.title! : 'Inhalt'),
          maxLines: 1,
        )),
        body: WebViewWidget(
          controller: webViewController,
        ));
  }


  void onconsoleleLog(JavaScriptConsoleMessage consoleMessage) {
    print("BROWSER LOG: ${consoleMessage.message}");  
  }
}

kind regards

Solution

  • I found something that works. It seems to be something with the rendering. setting displayWithHybridComposition to true does not have that issue for me. Still clueless why the default does not work tho.

        PlatformWebViewWidgetCreationParams params;

    if (WebViewPlatform.instance is AndroidWebViewPlatform) {

      params = AndroidWebViewWidgetCreationParams(

          controller: webViewController.platform,

          displayWithHybridComposition: true);

    } else {

      params = PlatformWebViewWidgetCreationParams(

          controller: webViewController.platform);

    }


    var webViewWidget =

        WebViewWidget.fromPlatformCreationParams(params: params);