Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render image using HTML, CSS using flutter to create iOS-App?

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
like image 901
jazzbpn Avatar asked Aug 29 '19 04:08

jazzbpn


1 Answers

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

like image 187
Yousif khalid Avatar answered Sep 22 '22 09:09

Yousif khalid