How to draw pdf content in flutter canvas

Question

I'm using Flutter with pdf package. In the readme it says use printing to show pdf in app.

However, I want to draw in front of the pdf content(taking notes/make annotations). So I guess I have to draw pdf content in my CustomPaint widget to get more control to it.

I searched around and didn't found any useful experience. Please let me know it my approach is correct/reasonable and if there's any better approach.

Thanks!

Solution

I think the part of the README you're talking about is this one :

Use the printing package https://pub.dev/packages/printing for full flutter print and share operation.

This printing package is meant for printing to a real printer. The pdf package you're using is only meant for creating a pdf in a flutter application, not for displaying it as a widget.

What you want to achieve is to display a pdf and annote on top of it. Your approach is a correct one:

• Use a CustomPainter
• Add a PDF widget as its child
• Paint your annotations on the foreground painter.

To display a pdf as a widget you'll need another package like advance_pdf_viewer.

Painting on the foreground painter is important because as stated in the CustomPaint class documentation:

When asked to paint, CustomPaint first asks its painter to paint on the current canvas, then it paints its child, and then, after painting its child, it asks its foregroundPainter to paint.

The code should look like :

PDFDocument doc = await PDFDocument.fromAsset('assets/test.pdf');

return CustomPaint(
  child: PDFViewer(doc: document)),
  foregroundPainter: AnnotationsPainter(),
);