Customizing the annotation toolbar in our Flutter viewer

The annotation toolbar in Nutrient is designed to be flexible and highly configurable. This guide details how to customize the annotation toolbar.

Presentation

You can show or hide the annotation toolbar using the annotation button in the main toolbar.

Android	iOS

Custom annotation toolbar grouping

Since Nutrient Flutter SDK version 3.9, you can customize the annotation toolbar grouping through PdfConfiguration on iOS and Android. You can add, remove, or reorder the annotation tools in the toolbar. The example below shows how to customize the annotation toolbar grouping:

PdfConfiguration(
    annotationToolsGrouping: [
      AnnotationToolbarItem.square,
      AnnotationToolbarItem.line,
      AnnotationToolbarItem.eraser,
      AnnotationToolsGroup(
          type: AnnotationToolbarItem.markup,
          items: [
            AnnotationToolbarItem.strikeout,
            AnnotationToolbarItem.highlight,
            AnnotationToolbarItem.underline
          ]),
    ],
);

On Web, the annotation tools are part of the main toolbar; grouping for the main toolbar can be customized from the main toolbar. For more information, refer to our customizing the main toolbar guide.

Using custom buttons

To add a custom button to the annotation toolbar, refer to our video tutorial and blog post about how to bridge native iOS code to Flutter.

Annotation preset customization

You can customize the default properties of annotation tools using the PspdfkitViewController.setAnnotationConfigurations method. This allows you to define how each annotation type will appear when created:

pspdfkitViewController.setAnnotationConfigurations(
  {
    AnnotationTool.inkPen: InkAnnotationConfiguration(
      color: Colors.red,
      thickness: 10,
      fillColor: Colors.white,
      alpha: 0.5,
    ),
    AnnotationTool.freeText: FreeTextAnnotationConfiguration(
      color: Colors.red,
      fontSize: 40,
      fillColor: Colors.white,
      alpha: 0.5,
    ),
    AnnotationTool.highlight: MarkupAnnotationConfiguration(
      color: Colors.yellow.withOpacity(0.4),
    ),
    AnnotationTool.stamp: StampAnnotationConfiguration(
              availableStampItems: ['Approved', 'Draft', 'Final'],
    ),
  },
);

Available configuration types

Nutrient provides specialized configuration classes for each annotation type:

• InkAnnotationConfiguration — Pen, highlighter, Magic Ink, eraser, signature

• LineAnnotationConfiguration — Line, arrow, polyline, distance measurement

• FreeTextAnnotationConfiguration — Free text, callout

• ShapeAnnotationConfiguration — Square, circle, polygon, area measurement

• MarkupAnnotationConfiguration — Highlight, underline, strikeout, squiggly

• StampAnnotationConfiguration — Stamp and image annotations

• ReductionAnnotationConfigurations — Redaction tools

• NoteAnnotationConfiguration — Note annotations