How to create shape annotations in a PDF document using Syncfusion Flutter PDF Library?

The Syncfusion® Flutter PDF library allows you to create, read and edit PDF documents programmatically without Adobe Dependencies. Using this library, you can add shape annotation in PDF document using Flutter.

Steps to add shape annotation in a PDF document programmatically:

1. Create a new Flutter application project.

1. Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page).
2. Click View -> Command Palette.

3. Type Flutter and choose Flutter: New Project.

4. Enter the project name and press the Enter button.
5. Now choose the location of the project.

2. Add the following code in your pubspec.yaml file to install the syncfusion® flutter pdf package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get a comment or Get packages option from the Visual Studio Code.

   dependencies: 
     syncfusion_flutter_pdf: ^20.3.49
   

1. Import the following package in your main.dart file.

3. Add the following code in the lib/main.dart file to create a simple button.

   @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               TextButton(
               child: Text(
                 'Add shape annotation to PDF document',
                 style: TextStyle(color: Colors.white),
               ),
               style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.resolveWith(
                       (states) => Colors.blue)),
               onPressed: _createShapeAnnotations,
             )
             ],
           ),
         ),
       );
     }
    
   

4. Add the following code to the _createShapeAnnotations function to create shape annotation in an existing PDF document programmatically.

   Future<void> _createShapeAnnotations() async{
    
     //Load an existing PDF document. 
       final PdfDocument document =
         PdfDocument(inputBytes: await _readDocumentData('sample.pdf'));
    
     //Get the page.
     final PdfPage page = document.pages[0];
    
     //Create a line annotation.
     final PdfLineAnnotation lineAnnotation = PdfLineAnnotation(
         [60, 710, 187, 710], 'Introduction',
         color: PdfColor(0, 0, 255),
         author: 'John Milton',
         border: PdfAnnotationBorder(2),
         lineCaption: false,
         setAppearance: true,
         lineIntent: PdfLineIntent.lineDimension);
    
     //Add the line annotation to the page.
     page.annotations.add(lineAnnotation);
    
     //Create an ellipse annotation.
     final PdfEllipseAnnotation ellipseAnnotation = PdfEllipseAnnotation(
         Rect.fromLTRB(475, 771, 549, 815), 'Page Number',
         author: 'John Milton',
         border: PdfAnnotationBorder(2),
         color: PdfColor(255, 0, 0),
         setAppearance: true);
    
     //Add the ellipse annotation to the page.
     page.annotations.add(ellipseAnnotation);
    
     //Create a rectangle annotation.
     final PdfRectangleAnnotation rectangleAnnotation = PdfRectangleAnnotation(
         Rect.fromLTRB(57, 250, 565, 349), 'Usage',
         color: PdfColor(255, 170, 0),
         border: PdfAnnotationBorder(2),
         author: 'John Milton',
         setAppearance: true);
    
     //Add the rectangle annotation to the page.
     page.annotations.add(rectangleAnnotation);
    
     //Create a polygon annotation.
     final PdfPolygonAnnotation polygonAnnotation = PdfPolygonAnnotation(
         [129, 356, 486, 356, 532, 333, 486, 310, 129, 310, 83, 333, 129, 356],
         'Chapter 1 Conceptual Overview',
         color: PdfColor(255, 0, 0),
         border: PdfAnnotationBorder(2),
         author: 'John Milton',
         setAppearance: true);
    
     //Add the polygon annotation to the page.
     page.annotations.add(polygonAnnotation);
    
     //Save the document.
       List<int> bytes = await document.save();
       // Dispose the document.
       document.dispose();
    
       //Save the file and launch/download.
       SaveFile.saveAndLaunchFile(bytes, 'output.pdf');
     }
    
   

5. Use the following code to load an existing PDF document in the Flutter project.

1. Add the following code in your pubspec.yaml file.

   flutter:
     # To add assets to your application, add an assets section, like this:
     assets:
       - assets/pdf/
   

2. Import the following package in your main.dart file.

   import 'package:flutter/services.dart';
   

3. Add the following code in the lib/main.dart file to read the existing PDF document.

   Future<List<int>> _readDocumentData(String name) async {
     final ByteData data = await rootBundle.load('assets/pdf/$name');
     return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
   }
   

6. Follow the below steps to launch the generated PDF file on desktop, mobile, and web.

Web:

1. Create a new dart file named save_file_web.dart under the lib folder and import the following packages in save_file_web.dart file.

   import 'dart:convert';
   import 'dart:html';
   

2. Include the following code snippet in save_file_web.dart file to open the PDF document in Web.

   class SaveFile {
     static Future<void> saveAndLaunchFile(
         List<int> bytes, String fileName) async {
       AnchorElement(
           href:
               'data:application/octet-stream;charset=utf-16le;base64,${base64.encode(bytes)}')
         ..setAttribute('download', fileName)
         ..click();
     }
   }
    
   

Desktop and Mobile:

3. Add the following dependencies in your pubspec.yaml file.

   open_file: ^3.2.1
   path_provider: ^2.0.11 #Open source library to launch the PDF file in mobile devices
   

4. Create a new dart file named save_file_mobile_and_desktop.dart under the lib folder and import the following packages in save_file_mobile_and_desktop.dart file.

   import 'dart:io';
   import 'package:open_file/open_file.dart';
   import 'package:path_provider/path_provider.dart';
   

5. Include the following code snippet in save_file_mobile_and_desktop.dart to open the PDF document in Desktop and Mobile.

   class SaveFile {
     static Future<void> saveAndLaunchFile(
         List<int> bytes, String fileName) async {
       //Get external storage directory
       Directory directory = await getApplicationSupportDirectory();
       //Get directory path
       String path = directory.path;
       //Create an empty file to write PDF data
       File file = File('$path/$fileName');
       //Write PDF data
       await file.writeAsBytes(bytes, flush: true);
       //Open the PDF document in mobile
       OpenFile.open('$path/$fileName');
     }
   }
    
   

7. Run the sample using the flutter run command. This will create shape annotation in the document. After the application launches, you will get the PDF document as follows.

A complete working sample can be downloaded from ShapeAnnotationsSample.zip.

Take a moment to peruse the documentation, where you can find other options like document link annotation, text web link annotation, and more. Also, the features like headers and footers, bookmarks, tables, hyperlink, pages in the PDF documents, and more with code examples.