How to render image using HTML, CSS using flutter to create iOS-App?
The current implementation, the FLTWebViewController and FLTWebViewFactory class in webview plugin don’t have access to registrar, so I changed their initWithMessenger method to initWithRegistrar. Now we have the answer to loading asset file in iOS webview:
NSString* key = [_registrar lookupKeyForAsset:url];
NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];
[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];
as pull request: https://github.com/flutter/plugins/pull/1247/files
Example :
<html>
<head>
</head>
<body>
<img src="image_name.jpg">
</body>
</html>
Then create a assets folder in the root of the Flutter project :
assets:
- assets/image_name.jpg
- assets/htmlfile.html
Create the WebView The dart code below creates the WebView and renders the local assets/htmlfile.html file.
return WebView(
initialUrl: 'assets/htmlfile.html',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
);
Loading Local Assets in WebView in Flutter
jazzbpn
With 6+ years of experience, I have developed many iOS/android applications in different context, professional and oldest passion for computer programming began very early in my life. I've learned the social environment is as important as logic aspects of the developing approach then I appreciate very much to get in touch with positive and eager colleagues that involve me in new and exciting challenges. This is why I still want to get involved in new opportunities to improve my skillness.
Updated on December 13, 2022Comments
-
jazzbpn over 1 year
I am trying to create the PDF using HTML, CSS in flutter. So, In some cases I have to render the asset image using html and css.
It is rendering in case of android by using the asset file location like (file:///android_asset/...) mentioned in the code below:
makeProfileImage() { return '<img src="file:///android_asset/flutter_assets/assets/image_name.jpg">'; }How to get asset file path like (file:///android_asset/flutter_assets/...) in iOS?
Future<void> printPdf() async { print('Print ...'); await Printing.layoutPdf(onLayout: (PdfPageFormat format) async { return await Printing.convertHtml( format: PdfPageFormat.a4 .applyMargin(left: 0, top: 0, right: 0, bottom: 0), html: '<html><head>' + getRatingbarCss() + '<style>.checked {color: red;}</style>' + '</head><body style="margin:0;padding:0" bgcolor="white">' + makeProfileImage() + '<h2 style="color:black;">Star Rating</h2><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star"/><span class="fa fa-star"/></body></html>'); }); }pubspec.yaml
dev_dependencies: flutter_test: sdk: flutter pdf: ^1.3.17 printing: ^2.0.0 flutter_full_pdf_viewer: ^1.0.4