Menu
I am loading a local HTML file into a Widget using flutter_webview package in the following way:
FutureBuilder<String>(
future: LocalLoader().loadLocal(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// return Text("${snapshot.data}");
return WebView(
initialUrl: new Uri.dataFromString(snapshot.data, mimeType: 'text/html').toString(),
javascriptMode: JavascriptMode.unrestricted,
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
}
)
It loads the HTML just fine but if the tags point to other resources (such as a CSS file at the same location or other local images), they will not be displayed in the webview.
These assets (CSS and the images files) are added to the project at the location specified path from the HTML (relative local path) and also in the pubspec.
For example one of the HTML files contains this element:
<link rel=stylesheet href=styles/main.css>
When the HTML file loads in the webview, the CSS will not reflect its style for that page.
If I manually add/write the CSS in the HTML (using the <style> element to define it) it will work just fine.
Any suggestion on how I can make these HTMLs load their local resources? (even it it means changing the package or the way it was implemented)
Also posted here
304
There is a HTMLElementView widget which can help you embed Html in flutter web. This widget can take an Iframe and render it. If you don't prefer Iframe then you can embed simply a BodyElement from the dart:html library directly. An example of embedding Iframe is availabel here.
This package is designed with simplicity in mind. Originally created to allow basic rendering of HTML content into the Flutter widget tree, this project has expanded to include support for basic styling as well!
I've tried your code using my local .html, .css and image, this is what I've got:
It seems like there is an issue in the implementation of Flutter WebView, so I've filed this one in Github.
As a workaround, I think one of your options is to use a different plugin which is "flutter_inappwebview".
I've reused your code. The only difference is, I've change this part:
return WebView(
initialUrl: new Uri.dataFromString(snapshot.data, mimeType: 'text/html').toString(),
javascriptMode: JavascriptMode.unrestricted,
);
to this:
return SafeArea(
child: Container(
margin: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: InAppWebView(
// initialUrl: "https://youtube.com/",
initialFile: "assets/sample.html",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
)),
onWebViewCreated: (InAppWebViewController controller) {
_webViewController = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
onLoadStop:
(InAppWebViewController controller, String url) async {
setState(() {
this.url = url;
});
},
onProgressChanged:
(InAppWebViewController controller, int progress) {
setState(() {
this.progress = progress / 100;
});
},
),
),
);
Which resulted to this:
And here is my local .html and .css, just replace any image to "flutter_logo.png".
body{
background-color: aliceblue;
}
h1{
text-align: center;
font-style: bold;
color: blue;
}
p{
text-align: center;
font-style: italic;
color: cornflowerblue
}
img{
display: block;
margin-left: auto;
margin-right: auto;
height: 15%;
width: 15%;
}<!DOCTYPE html>
<meta charset="utf-8">
<title>Sample HTML</title>
<html>
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1>Flutter Webview</h1>
<p>This paragraph have styles.</p>
</body>
<img src="flutter_logo.png" alt="">
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
