web-dev-qa-db-fra.com

Comment rendre une image en HTML, CSS en utilisant flutter pour créer iOS-App?

Je suis essayant de créer le PDF en utilisant HTML, CSS en flutter. Donc, dans certains cas, je dois rendre l'image de l'actif en utilisant html et css.

Il est rendu en cas de Android en utilisant l'emplacement du fichier d'actif comme (file: /// Android_asset/...) mentionné dans le code ci-dessous:

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

Comment obtenir le chemin du fichier d'actif comme (fichier: /// Android_asset/flutter_assets/...) dans 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
htmliosimageflutterassets
6
jazzbpn

L'implémentation actuelle, les classes FLTWebViewController et FLTWebViewFactory dans le plugin de visualisation Web n'ont pas accès au registraire, j'ai donc changé leur méthode initWithMessenger en initWithRegistrar. Nous avons maintenant la réponse au chargement du fichier d'actif dans la vue Web iOS:

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

comme demande de tirage: https://github.com/flutter/plugins/pull/1247/files

Exemple :

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

Créez ensuite un dossier de ressources à la racine du projet Flutter:

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

Créer le WebView Le code Dart ci-dessous crée le WebView et rend le fichier assets/htmlfile.html local.

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

Chargement des actifs locaux dans WebView dans Flutter

2
Yousif khalid