Flutter pdf 多张图片答案

【问题标题】：Flutter pdf multiple imagesFlutter pdf 多张图片
【发布时间】：2020-12-26 13:02:37
【问题描述】：

我正在尝试将多个图像（来自资产或缓存）加载到 pdf 中，但它不起作用。没有错误，pdf 已创建，但以某种方式损坏并且不想打开。如果只有一张图像，或者所有图像都是相同的图像，则一切都是 100%。我做错了什么？

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(backgroundColor: Colors.red, title: Text('Images')),
            body: Center(child: HomeScreen())));
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ListView(
        children: <Widget>[
          RaisedButton(
            color: Colors.red,
            onPressed: () async {
              writeOnPdf();
              await savePdf();
            },
            child: Text('Create Pdf'),
          ),
        ],
      ),
    ));
  }
}

final pdf = pw.Document();

writeOnPdf() async {
  var assetImage = PdfImage.file(
    pdf.document,
    bytes: (await rootBundle.load('assets/aa.png')).buffer.asUint8List(),
  );

  var otherImage = PdfImage.file(
    pdf.document,
    bytes: (await rootBundle.load('assets/out.png')).buffer.asUint8List(),
  );

  pdf.addPage(pw.MultiPage(
      pageFormat: PdfPageFormat.a4,
      margin: pw.EdgeInsets.all(32),
      build: (pw.Context context) {
        return <pw.Widget>[
          pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
              children: <pw.Widget>[
                pw.ClipRect(
                  child: pw.Container(
                    width: 550,
                    height: 250,
                    child: pw.Image(assetImage),
                  ),
                ),
              ]),
          pw.ClipRect(
            child: pw.Container(
              width: 100,
              height: 100,
              child: pw.Image(otherImage),
            ),
          )
        ];
      }));
}

final bool isHTML = false;

Future savePdf() async {
  Directory tempDir = await getTemporaryDirectory();
  String tempPath = tempDir.path;
  File file = File('$tempPath/1234.pdf');
  file.writeAsBytesSync(pdf.save());
  print(tempDir.listSync());
}

如果我可以从资产中加载一张图像并从缓存中加载一张图像，那将是理想的选择。但目前没有任何效果。任何建议将不胜感激。

【问题讨论】：

标签： image flutter pdf

【解决方案1】：

DavBfr 给出了答案。 “这是 async/await 的问题。”

多张图片 #425]1

              RaisedButton(
            color: Colors.red,
            onPressed: () async {
              final pdf = await writeOnPdf();
              await savePdf(pdf);
            },
            child: const Text('Create Pdf'),
          ),

【讨论】：

【解决方案2】：

尝试这样。它的方式并不流畅，但它适用于同一个 pdf 页面中的多个图像。

  final ByteData bytes1 = await rootBundle.load('assets/images/logo.png');
  final Uint8List img1 = bytes1.buffer.asUint8List();

  final ByteData bytes2 = await rootBundle.load('assets/images/1.jpg');
  final Uint8List img2 = bytes2.buffer.asUint8List();

  final ByteData bytes3 = await rootBundle.load('assets/images/2.png');
  final Uint8List img3 = bytes3.buffer.asUint8List();

  pw.Image imgty(Uint8List img) {
    return pw.Image(
        pw.MemoryImage(
          img,
        ),
        fit: pw.BoxFit.contain);
  }

并在 pdf 页面中使用它们

 Container(
        height: 111,
        width: 111,
        child: imgty(img1),)

【讨论】：