Flutter pdf 多張圖片

Question

我正在嘗試將多個圖像（來自資產或緩存）加載到 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());
}

如果我可以從資產中加載一張圖像並從緩存中加載一張圖像，那將是理想的。 但目前沒有任何效果。 任何意見，將不勝感激。

Answer 1

DavBfr給出了答案。 “這是 async/await 的問題。”

多個圖像 #425] 1

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

 

Answer 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),)