flutter:I can't load image through plugin webview_flutter - flutter

I wanna load HTML string through plugin webview_flutter, I try it like those:
But I couldn't load an image in my HTML string, meanwhile, I made WebView as a child for SizedBox, its height and width were adapted to device screen. Even though, it still exceeded device's width. I check the official demo, but it was futile
return WebView(
initialUrl: '',
onWebViewCreated: (controller) async {
String content = base64Encode(Utf8Encoder().convert(html));
controller.loadUrl('data:text/html;base64,$content');
},
);

Related

webView flutter loads white screen sometimes

I am working on app where I need to show certificate in pdf format inside WebView from specific URL. I am using webview_flutter plugin for webview.
Please consider the below mentioned code:
WebView(
debuggingEnabled: true,
initialUrl: Uri.encodeFull('https://docs.google.com/gview?embedded=true&url=${strUrl}'),
javascriptMode: JavascriptMode.unrestricted,
onProgress: (int progress) {
print('WebView is loading (progress : $progress%)');
},
onWebViewCreated: (webViewController) {
_controller.complete(webViewController);
webViewController.clearCache();
final cookieManager = CookieManager();
cookieManager.clearCookies();
},
),
Now on the progress log if the webview loads certificate properly then the progress shows like 10, 15, 30, 50, 80, 100. But in the case of white screen on no data loading progress went like 10, to directly 100. Logs are not working properly.
I couldn't use other libs or plugin, Is there any solution for same?
Progress in HTTP isn't an absolute so you cannot always expect a "smooth" progress. Sometimes data chunks will be received in buffers that are outside your control so this behavior isn't surprising.

Flutter WebView Location

I am creating a WebView of this website
https://nearxt.com/
which asks for location when opened but when i use this link to create a webview in flutter
then it can not take location
i have also defined location in the application but webview cant recieve location
SafeArea(
child: WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: flutterUrl,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
),
),
This is unsupported in flutter. Even if you try to ask for location access using permission handler the app will deny it and still if you manually give the location permission to the app from your phone it still won't catch the real time location. Suggestion is to use plain old java for it you can find a lot of help around the internet about webview in java with location access it works perfect.
Use flutter_inappwebview to get users location
InAppWebView(
initialUrlRequest:
URLRequest(url: Uri.parse('your link here')),
androidOnGeolocationPermissionsShowPrompt:
(InAppWebViewController controller, String origin) async {
return GeolocationPermissionShowPromptResponse(
origin: origin,
allow: true,
retain: true
);
},
)

Flutter Web View blank screen on Release Mode

I have an issue where the Flutter WebView is rendering blank on the release version of my Android App on the Playstore.
Users are complaining that a page is not loading, but this page was loading very fine in debug mode.
Here is what I am doing. I am loading a local html file from my assets folder as shown in the code below:
import 'package:webview_flutter/webview_flutter.dart';
class _InvoicePageState extends ResumableState<InvoicePage>
with SingleTickerProviderStateMixin {
WebViewController? _webViewController;
#override
initState() {
super.initState();
}
void loadPage()async{
String html = await rootBundle.loadString('assets/html/invoice.html');
_webViewController?.loadUrl(Uri.dataFromString(html ,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
//Then in my build Method I have this
....
WebView(
onWebViewCreated:
(WebViewController webViewController) {
_webViewController = webViewController;
loadPage();
},
),
What could be wrong, why is it loading in debug mode but not loading in release mode?
My users are already dropping really bad reviews.
Please help.
Thank you.
The library's official example has InAppWebView embedded inside Stack which is further embedded inside Expanded. That is causing the issue. Try removing the Stack and Expanded or if you really want Stack, then first embed InAppWebView inside Expanded and then remove the parent Expanded.

flutter_inappwebview - How to update URL?

I would like to know how I can update my URL with the flutter_inappwebview package.
Here is my code:
InAppWebView(
initialData: InAppWebViewInitialData(
data: videoName,
),
The videoName variable is updated using setState. However, InAppWebView does not display the new URL.
How can I update videoName using setState?
You have 2 page :1) videopage 2)webviewpage
video page so :
From the video page pass the url with parameter in webviewpage .
Example:
In Video View Page :
Navigator.of(context).push(MaterialPageRoute -> (builder)=> WevViewPage(url);
In web view Page :
WebViewPage extents stateless ...
String url;
WebViewPage(this.url);
//here is the constructor
now show
InAppWebView(
initialData: InAppWebViewInitialData(
data: url,
),

Is there any way to parse html created with javascript in flutter?

I would like to use metadata_fetch package to get the OGP.
The implementation of this package uses the html (parse) package. And it worked for most of the web pages.
However, there are some web pages, like this one, that cannot be fetched. I think this was because the html was generated by javascript. Is there any way to parse such a page as well?
You should be able to create a webview_flutter and inject some sort of Javascript that would walk the DOM for you and serialize it for return, which of course would happen after the page javascript has already built up the DOM. I haven't done that, but it might be a fun project.
EDIT: it might be as simple as capturing the string response of document.firstElementChild.outerHTML.
For the benefit of others, here's a source I made based on an idea from #Randal Schwartz.
const String url_unext = 'https://video.unext.jp/title/SID0050925';
WebViewController _controller;
Stack(
children: [
WebView(
onWebViewCreated: (controller) {
_controller = controller;
},
javascriptMode: JavascriptMode.unrestricted,
initialUrl: url_unext,
onPageFinished: (_) async {
html = await _controller.evaluateJavascript("window.document.firstElementChild.outerHTML;");
// Use Metadata_fetch to parse
final data = getOpenGraphDataFromResponse(html);
print(data);
},
),
// else widget here
Container(),
],
),
However, I am concerned about running a malicious script. If there is a better way, please let me know. I'm looking into the possibility of using oembed.
Once again, thank you very much, #Randal Schwartz.