Add, Remove, Edit Annotations in Flutter PDF Viewer (Syncfusion)

5 Jun 20246 minutes to read

This section will go through the various functions available in the SfPdfViewer for adding, removing, and editing annotations in a PDF document.

Add annotations to a PDF document

This section will go through how to add annotations to a PDF document programmatically.

Add annotations programmatically

You can programmatically add a new annotation to the PDF document by creating an annotation instance and providing it as a parameter to the addAnnotation method of the PdfViewerController class. The following example shows how to create an instance of a highlight annotation and add it to the PDF document. Similarly, you can create and add other types of annotation.

DART

void addHighlightAnnotation() {
  // Get the selected text lines.
  List<PdfTextLine>? textLines =
      _pdfViewerKey.currentState?.getSelectedTextLines();
  if (textLines != null && textLines.isNotEmpty) {
    // Create the highlight annotation.
    final HighlightAnnotation highlightAnnotation = HighlightAnnotation(
      textBoundsCollection: textLines,
    );
    // Add the annotation to the PDF document.
    _pdfViewerController.addAnnotation(highlightAnnotation);
  }
}

Annotation added callback

The callback provided to the onAnnotationAdded property is triggered when an annotation is successfully added to the PDF document. The following example shows how to use this callback.

DART

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        onAnnotationAdded: (Annotation annotation) {
          print('${annotation.runtimeType} is added successfully');
        },
      ),
    ),
  );
}

Remove annotations from the PDF document

This section will go through different methods of removing annotations from a PDF document.

Remove a specific annotation programmatically

You can programmatically remove an annotation from the document by providing the specific annotation instance as the parameter to the removeAnnotation method of PdfViewerController. The following example shows how to remove the first annotation in the annotation collection from a PDF document.

DART

void removeFirstAnnotation() {
  // Get the list of annotations in the PDF document.
  List<Annotation> annotations = _pdfViewerController.getAnnotations();
  if (annotations.isNotEmpty) {
    // Get the first annotation from the PDF document.
    Annotation firstAnnotation = annotations.first;
    // Remove the first annotation from the PDF document.
    _pdfViewerController.removeAnnotation(firstAnnotation);
  }
}

Remove all the annotations

You can programmatically remove all the annotations from a document by calling the removeAllAnnotations method. The optional pageNumber parameter can be used to clear the form field data on a specific page. By default, the pageNumber parameter is 0. Refer to the following code example.

DART

void removeAllAnnotations() {
  // Remove all the annotations from the PDF document.
  _pdfViewerController.removeAllAnnotations();
}

void removeAllAnnotationsInFirstPage() {
  // Remove all the annotations in the first page of the PDF document.
  _pdfViewerController.removeAllAnnotations(pageNumber: 1);
}

Annotation removed callback

The callback provided to the onAnnotationRemoved property is triggered when an annotation is removed successfully from the PDF document. The following example shows how to use this callback.

DART

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        onAnnotationRemoved: (Annotation annotation) {
          print('${annotation.runtimeType} is removed successfully');
        },
      ),
    ),
  );
}

Edit annotations

This section will go through different methods of editing annotations in a PDF document programmatically.

Edit a specific annotation

You can edit the properties of an annotation from the document programmatically by accessing the specific annotation instance from the Annotation collection. The following example shows how to edit the first annotation in the annotation collection. Similarly, you can modify the other properties also.

DART

void editAnnotation() {
  // Get the list of annotations in the PDF document.
  List<Annotation> annotations = _pdfViewerController.getAnnotations();

  if (annotations.isNotEmpty) {
    // Get the first annotation from the PDF document.
    Annotation firstAnnotation = annotations.first;
    // Edit the first annotation in the PDF document.
    firstAnnotation.color = Colors.red; // Change the color of the annotation.
    firstAnnotation.opacity = 0.5; // Change the opacity of the annotation.
  }
}

Annotation edited callback

The callback provided to the onAnnotationEdited property is triggered when an annotation is edited in the PDF document. The following code sample explains how to use this callback.

DART

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        onAnnotationEdited: (Annotation annotation) {
          // Instance of the edited annotation.
          Annotation editedAnnotation = annotation;
        },
      ),
    ),
  );
}