Images in Flutter PDF

5 May 20212 minutes to read

Images are supported through the PdfImage class, which is an abstract base class that provides functionality for PdfBitmap class.

Inserting an image in PDF document

The following raster images are supported in Flutter PDF:

  • JPEG
  • PNG

You can load image data in PdfBitmap object to draw the images using the drawImage method of the PdfGraphics class. The image data can be initialized as list of bytes or base64 string format.

The following code snippet shows how to draw an image to the PDF document.

  • dart
    • //Create a new PDF document
PdfDocument document = PdfDocument();

//Adds a page to the document
PdfPage page = document.pages.add();

//Draw the image
page.graphics.drawImage(
    PdfBitmap(File('image.jpg').readAsBytesSync()),
    Rect.fromLTWH(
        0, 0, page.getClientSize().width, page.getClientSize().height));

//Saves the document
File('Output.pdf').writeAsBytes(document.save());

//Disposes the document
document.dispose();

    Applying transparency and rotation to the image

    You can add transparency and rotation to the image using the setTransparency and rotateTransform methods of PdfGraphics respectively. This is explained in the following code snippet.

  • dart
    • //Create a new PDF document
PdfDocument document = PdfDocument();

//Adds a page to the document
PdfPage page = document.pages.add();

//Save the current graphics state
PdfGraphicsState state = page.graphics.save();

//Translate the coordinate system to the  required position
page.graphics.translateTransform(20, 100);

//Apply transparency
page.graphics.setTransparency(0.5);

//Rotate the coordinate system
page.graphics.rotateTransform(-45);

//Draw image
page.graphics.drawImage(
    PdfBitmap(File('image.jpg').readAsBytesSync()),
    Rect.fromLTWH(
        0, 0, page.getClientSize().width, page.getClientSize().height));

//Restore the graphics state
page.graphics.restore(state);

//Saves the document
File('Output.pdf').writeAsBytes(document.save());

//Disposes the document
document.dispose();