Image not showing in Flutter on pdf creation

Question

I have a problem where image from asset is not rendered in the screen when generating a pdf.

I have pdf and printing package install. The printing package is used to load image from my image folder.

Here is my code

final pdf = pw.Document(deflate: zlib.encode);

writeOnPdf() async {

const imageProvider = const AssetImage('images/sig1.png');

final PdfImage sig1 = await pdfImageFromImageProvider(pdf: pdf.document, image: imageProvider);

pdf.addPage(pw.Page(
  pageFormat: PdfPageFormat.a4,
  build: (pw.Context context) {
    return pw.Column(
      children: [
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
          children: [
            pw.Text("Dexandra Inventory", style: pw.TextStyle(fontSize: 28.0)),
            pw.Text("RECEIPT#1", style: pw.TextStyle(fontSize: 28.0))
          ]
        ),
        pw.SizedBox(
          height: 30.0
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.start,
          children: [
            pw.Text("Luqman +60186661360", style: pw.TextStyle(fontSize: 18.0)),
          ]
        ),
        pw.SizedBox(
            height: 30.0
        ),
        pw.Header(
          level: 0,
          child: pw.Text("1 Item (Qty:2)", style: pw.TextStyle(fontSize: 22.0))
        ),
        pw.SizedBox(
            height: 30.0
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.spaceEvenly,
          children: [
            pw.Text("2x", style: pw.TextStyle(fontSize: 16.0)),
            pw.Text("Air Feshener", style: pw.TextStyle(fontSize: 16.0)),
            pw.Text("RM 10.00", style: pw.TextStyle(fontSize: 16.0, color: PdfColors.grey)),
            pw.SizedBox(width: 40.0),
            pw.Text("RM 20.00", style: pw.TextStyle(fontSize: 16.0, fontBold: pw.Font.courierBold())),
          ]
        ),
        pw.SizedBox(
            height: 40.0
        ),
        pw.Row(
            mainAxisAlignment: pw.MainAxisAlignment.end,
            children: [
              pw.Column(
                children: [
                  pw.Text("Total: RM 20.00", style: pw.TextStyle(fontSize: 20.0, fontBold: pw.Font.courierBold())),
                  pw.SizedBox(
                      height: 15.0
                  ),
                  pw.Text("Cash: RM 20.00", style: pw.TextStyle(fontSize: 16.0)),
                ]
              ),
            ]
        ),
        pw.Header(
            level: 0,
            child: pw.Text("")
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.center,
          children: [
            pw.Text("March 30, 2020 4:41 PM", style: pw.TextStyle(fontSize: 16.0, color: PdfColors.grey)),
          ]
        ),
        pw.Row(
          mainAxisAlignment: pw.MainAxisAlignment.spaceAround,
          children: [
            pw.Image(sig1),
          ]
        )
      ]
    ); // Center
}));
}

Everything works fine until the last widget, which is the Image. It is not displayed in the PDF page.

pubspec.yml

assets:
- images/

And this is what appears in the terminal, when I click a button to generate pdf. Not sure if it has anything related to the image not being rendered.

I/flutter (13171): Helvetica has no Unicode support see https://github.com/DavBfr/dart_pdf/wiki/Fonts-Management
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
I/chatty  (13171): uid=10341(com.example.dexandrainventory) identical 2 lines
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
E/AccessibilityBridge(13171): VirtualView node must not be the root node.
I/chatty  (13171): uid=10341(com.example.dexandrainventory) identical 5 lines

Answer 1

final profileImage = pw.MemoryImage((await rootBundle.load('assetsimage')).buffer.asUint8List(),);

Finally, use it

pw.Image(profileImage),

Answer 2

If you want to display base64 image, need to use MemoryImage along with base64Decode which helps you decode the image and display in the pdf.

Printing.layoutPdf(
  onLayout: (pageFormat) async {
    final doc = pw.Document();
    var imageProvider = MemoryImage(base64Decode("your image"));
    final PdfImage image = await pdfImageFromImageProvider(
        pdf: doc.document, image: imageProvider);

    doc.addPage(pw.Page(build: (pw.Context context) {
      return pw.Center(
        child: pw.Image(image),
      );
    }));

    return doc.save();
  },
);

Answer 3

declare the variable 'pdf' inside the function.

Like this:

writeOnPdf() async { final pdf = pw.Document(deflate: zlib.encode);