Templates in Flutter PDF

18 Nov 20186 minutes to read

A PDF template is a drawing surface, where contents can be added. All the elements that can be added to a PdfPage is supported in PdfTemplate as well. The template in turn can be drawn over the page or can be positioned at any part of the page.

Creating a new PDF template

The PdfTemplate class can be used to create a new PDF template. You can add contents to the template using graphics property of the PdfTemplate object.

The following code example explains how to add contents to the PdfTemplate and render into the new PDF page.

  • DART
  • //Create a new PDF document.
    PdfDocument document = PdfDocument();
    
    //Create a PDF Template.
    PdfTemplate template = PdfTemplate(100, 50);
    
    //Draw a rectangle on the template graphics
    template.graphics!.drawRectangle(
        brush: PdfBrushes.burlyWood, bounds: Rect.fromLTWH(0, 0, 100, 50));
    
    //Draw a string using the graphics of the template.
    template.graphics!.drawString(
        'Hello World', PdfStandardFont(PdfFontFamily.helvetica, 14),
        brush: PdfBrushes.black, bounds: Rect.fromLTWH(5, 5, 0, 0));
    
    //Add a new page and draw the template on the page graphics of the document.
    document.pages.add().graphics.drawPdfTemplate(template, Offset(0, 0));
    
    //Save and dispose the PDF document
    File('Output.pdf').writeAsBytes(await document.save());
    document.dispose();

    Creating templates from existing PDF document

    Essential PDF supports template creation using the CreateTemplate method, enabling users to extract content from an existing PDF page and seamlessly incorporate it into a new PDF document.

    The below code illustrates how to create the template from an existing page and draw it in a new PDF document.

  • DART
  • //Load the PDF document.
        PdfDocument loadedDocument =
          PdfDocument(inputBytes: File('Input.pdf').readAsBytesSync());
        //Get the first page from the document.
        PdfPage loadedPage = loadedDocument.pages[0];
        //Create a PDF Template.
        PdfTemplate template = loadedPage.createTemplate();
        //Create a new PDF document.
        PdfDocument document = PdfDocument();
        //Add the page.
        PdfPage page = document.pages.add();
        //Create the graphics.
        PdfGraphics graphics = page.graphics;
        //Draw the template.
        graphics.drawPdfTemplate(template, Offset(0, 0));
        //Save and dispose of the PDF document.
        File('Output.pdf').writeAsBytes(await document.save());
        document.dispose();

    Working with PdfPageTemplateElement

    The PdfPageTemplateElement is a template element that can be added to any part of the PDF page such as header, footer, and more.

    The following code example explains how to add the page template elements to a PDF document.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Add a page to the PDF document
    PdfPage page = document.pages.add();
    
    Rect bounds = Rect.fromLTWH(0, 0, page.getClientSize().width, 50);
    PdfFont font = PdfStandardFont(PdfFontFamily.helvetica, 7);
    
    //Create a header and draw the image
    PdfPageTemplateElement header = PdfPageTemplateElement(bounds);
    
    //Get image data
    File imageFile = File('image.jpg');
    Uint8List imagebytes = await imageFile.readAsBytes();
    String imageData = base64.encode(imagebytes);
    
    //Draw the image in the header
    header.graphics.drawImage(
        PdfBitmap.fromBase64String(imageData),
        Rect.fromLTWH(0, 0, 100, 50));
    
    //Add the header at the top
    document.template.top = header;
    
    //Create a Page template that can be used as footer
    PdfPageTemplateElement footer = PdfPageTemplateElement(bounds);
    
    //Add the fields in composite fields
    PdfCompositeField compositeField = PdfCompositeField(
        font: font,
        brush: PdfBrushes.black,
        text: "Page {0} of {1}",
        fields: <PdfAutomaticField>[
          PdfPageNumberField(font: font, brush: PdfBrushes.black),
          PdfPageCountField(font: font, brush: PdfBrushes.black)
        ]);
    compositeField.bounds = footer.bounds;
    
    //Draw the composite field in footer
    compositeField.draw(footer.graphics, Offset(470, 40));
    
    //Add the footer template at the bottom
    document.template.bottom = footer;
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Adding stamp to the PDF document

    The Syncfusion Flutter PDF allows you add stamp to the PDF document using PDF templates.

    The following code example explains how to draw text as a stamp to the PDF document.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Add a page to the PDF document
    PdfPage page = document.pages.add();
    
    //Create template and draw text in template graphics
    final PdfPageTemplateElement custom =
        PdfPageTemplateElement(Offset(0, 0) & page.getClientSize(), page);
    custom.dock = PdfDockStyle.fill;
    PdfGraphicsState state = custom.graphics.save();
    custom.graphics.rotateTransform(-40);
    custom.graphics.drawString(
        'STAMP PDF DOCUMENT', PdfStandardFont(PdfFontFamily.helvetica, 20),
        pen: PdfPens.red,
        brush: PdfBrushes.red,
        bounds: Rect.fromLTWH(-150, 450, 400, 400));
    custom.graphics.restore(state);
    
    //Add template as a stamp to the PDF document
    document.template.stamps.add(custom);
    
    //Draw rectangle to the page graphics
    page.graphics.drawRectangle(
        pen: PdfPen(PdfColor(0, 0, 0), width: 5),
        brush: PdfBrushes.lightGray,
        bounds: Offset(0, 0) & page.getClientSize());
    
    //Save the document
    final List<int> bytes = await document.save();
    
    //Dispose the document
    document.dispose();