web-dev-qa-db-ja.com

HTMLを使用して画像をレンダリングし、iOSアプリを作成するためにフラッターを使用してCSSをレンダリングする方法

私はPDF HTMLを使用して、CSSをフラッターで作成しようとしていますなので、場合によっては、htmlとcssを使用してアセット画像をレンダリングする必要があります。

以下のコードで言及されているAndroid（file：/// Android_asset/...）のようなアセットファイルの場所を使用して）の場合にレンダリングされます。

makeProfileImage() {
  return '<img src="file:///Android_asset/flutter_assets/assets/image_name.jpg">';
}

iOSで（file：/// Android_asset/flutter_assets/...）のようにアセットファイルのパスを取得する方法

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
htmliosimageflutterassets
6
jazzbpn

現在の実装であるwebviewプラグインのFLTWebViewControllerおよびFLTWebViewFactoryクラスはレジストラーにアクセスできないため、それらのinitWithMessengerメソッドをinitWithRegistrarに変更しました。これで、iOS WebViewにアセットファイルをロードするための答えが得られました。

NSString* key = [_registrar lookupKeyForAsset:url];
NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];
[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];

プルリクエストとして： https://github.com/flutter/plugins/pull/1247/files

例：

<html>
 <head>
 </head>
 <body>
    <img src="image_name.jpg">
 </body>
</html>

次に、Flutterプロジェクトのルートにアセットフォルダーを作成します。

assets:
  - assets/image_name.jpg
  - assets/htmlfile.html

WebViewを作成する以下のDartコードはWebViewを作成し、ローカルのassets/htmlfile.htmlファイルをレンダリングします。

  return WebView(
          initialUrl: 'assets/htmlfile.html',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        );

FlutterのWebViewにローカルアセットを読み込んでいます

2
Yousif khalid