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

Question

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

Place your asset folder inside your Flutter project. Won't that help? — sagar suri
– sagar suri, Commented Aug 29, 2019 at 6:29
Yeah, I have image under asset folder and is already defined in pubspec.yaml — jazzbpn
– jazzbpn, Commented Aug 29, 2019 at 6:56
I don't think this is a flutter problem. because its about accessing assets from a web view if I understand this right. — Thomas
– Thomas, Commented Sep 17, 2019 at 11:53
There is a problem only with iOS because we can access the asset images in android. But in iOS I do not know how to access the asset image path in order to render image via HTML, CSS. — jazzbpn
– jazzbpn, Commented Sep 18, 2019 at 4:18
You can check the answer from here stackoverflow.com/questions/56787422/… — Zakir
– Zakir, Commented Mar 31, 2020 at 8:51

Yousif khalid · Accepted Answer · 2019-09-18 08:58:25Z

3

+25

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

edited Sep 18, 2019 at 8:58

answered Sep 18, 2019 at 8:01

Yousif khalid

6,5553 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jazzbpn Over a year ago

how to use this code in flutter? NSString* key = [_registrar lookupKeyForAsset:url]; NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil]; [_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];

Yousif khalid Over a year ago

@jazzbpn it is waiting to approve pull github.com/flutter/plugins/pull/1247/files you can edit 4 files at flutter plugin or wait to approve

jazzbpn Over a year ago

Okay, I'm waiting.

jazzbpn Over a year ago

Which four files do we have to edit and of which plugin? I do not find FLTWebViewController and FLTWebViewFactory classes in webview plugin. So, where are these files?

Yousif khalid Over a year ago

At path packages/webview_flutter/ios/Classes/FlutterWebView.h

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related