Customizing the Annotation Toolbar in Our Flutter Viewer
The annotation toolbar in PSPDFKit 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.
Custom Annotation Toolbar Grouping
Since PSPDFKit 3.9 for Flutter, 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. The example below shows how to set default properties for the ink and free text annotation tools:
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, ), }, );
Available Preset Configuration Options
The table below shows the configuration options available for each annotation type and platform.
Annotation Type | Configuration Options | Android | iOS |
---|---|---|---|
Ink | color , fillColor , alpha , thickness , blendMode |
✅ | ✅ |
Free Text | color , fillColor , alpha , fontSize , fontName , fillColor , alpha |
✅ | ✅ |
Shape | color , fillColor , alpha , thickness , borderStyle , borderEffect , blendMode |
✅ | ✅ |
Line | color , alpha , thickness , borderStyle , borderEffect , blendMode , lineEndStyle |
✅ | ✅ |
Markup | color , alpha , blendMode , thickness , |
✅ | ✅ |
Stamp | alpha , blendMode |
✅ | ✅ |
Note | color , alpha , iconName |
✅ | ✅ |
Redaction | color , fillColor , overlayText , repeatOverlayText , outlineColor |
✅ | ✅ |
Image | alpha , blendMode |
✅ | ✅ |
Measurements | color , alpha , thickness , blendMode , scale , precision |
✅ | ❌ |
Options Available for Specific Platforms
Option | Description | Android | iOS |
---|---|---|---|
blendMode |
The blend mode of the annotation. | ❌ | ✅ |
borderEffect |
The border effect of the annotation. | ❌ | ✅ |
maximumThickness |
Maximum annotation thickness. | ✅ | ❌ |
minimumThickness |
Minimum annotation thickness. | ✅ | ❌ |
maximumAlpha |
Maximum possible opacity of the annotation. | ✅ | ❌ |
minimumAlpha |
Minimum possible opacity of the annotation. | ✅ | ❌ |
minimumFontSize |
Minimum font size of the free text annotation. | ✅ | ❌ |
maximumFontSize |
Maximum font size of the free text annotation. | ✅ | ❌ |
availableFonts |
Available fonts for the free text annotation. | ✅ | ❌ |
showColorPicker |
Whether to show the color picker. | ✅ | ❌ |
forceDefaults |
Whether to show the opacity slider. | ✅ | ❌ |
availableProperties |
Available annotation properties to be displayed in the inspector. | ✅ | ❌ |