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
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);