kmpdfkit_demo

ComPDFKit Flutter PDF Library

1 Overview

ComPDFKit for Flutter is a comprehensive SDK that allows you to quickly add PDF fuctions to any Flutter application, such as viewer, annotations, editing PDFs, forms and signatures.

More information can be found at https://www.compdf.com/

1.1 Key Features

Viewer component offers:

• Standard page display modes, including Scrolling, Double Page, Crop Mode, and Cover Mode.
• Navigation with thumbnails, outlines, and bookmarks.
• Text search & selection.
• Zoom in and out & Fit-page.
• Switch between different themes, including Dark Mode, Sepia Mode, Reseda Mode, and Custom Color Mode.
• Text reflow.

Annotations component offers:

• Create, edit, and remove annotations, including Note, Link, Free Text, Line, Square, Circle, Highlight, Underline, Squiggly, Strikeout, Stamp, Ink, and Sound.
• Support for annotation appearances.
• Import and export annotations to/from XFDF.
• Support for annotation flattening.
• Predefine annotations.

Forms component offers:

• Create, edit, and remove form fields, including Push Button, Check Box, Radio Button, Text Field, Combo Box, List Box, and Signature.
• Fill PDF Forms.
• Support for PDF form flattening.

Document Editor component offers:

• PDF manipulation, including Split pages, Extract pages, and Merge pages.
• Page edit, including Delete pages, Insert pages, Crop pages, Move pages, Rotate pages, Replace pages, and Exchange pages.
• Document information setting.
• Extract images.

Content Editor component offers:

• Programmatically add and remove text in PDFs and make it possible to edit PDFs like Word. Allow selecting text to copy, resize, change colors, text alignment, and the position of text boxes.
• Undo or redo any change.

1.2 License

ComPDFKit PDF SDK is a commercial SDK, which requires a license to grant developer permission to release their apps. Each license is only valid for one bundle ID or applicationId in development mode. Other flexible licensing options are also supported, please contact our marketing team to know more. However, any documents, sample code, or source code distribution from the released package of ComPDFKit to any third party is prohibited.

2 Get Started

It's easy to embed ComPDFKit into Flutter applications with a few lines of code. Let's take a few minutes to get started.

The following sections describe the optimal systems and environments to support, as well as quick integration steps

2.1 Requirements

Android

Please install the following required packages:

• The latest stable version of Flutter

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device

Operating Environment Requirements:

• A minSdkVersion of 19 or higher.
• A compileSdkVersion of 30 or higher.
• A targetSdkVersion of 30 or higher.
• Android ABI(s): x86, x86_64, armeabi-v7a, arm64-v8a.

iOS

Please install the following required packages:

• The latest stable version of Flutter

• The latest stable version of Xcode

• The latest stable version of CocoaPods. Follow the CocoaPods installation guide to install it.

Operating Environment Requirements:

• The iOS 10.0 or higher.
• The Xcode 12.0 or newer for Objective-C or Swift.

2.2 Creating a New Project

2.2.1 Android

1. Create a Flutter project called example with the flutter CLI:

flutter create --org com.compdfkit.flutter example

1. In the terminal app, change the location of the current working directory to your project:

cd example

1. open example/android/app/src/main/AndroidManifest.xml , add Storage Permission：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.compdfkit.flutter.example">
    
    <!-- Required to read and write documents from device storage -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    </application>
</manifest>

1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle

1. Modify the minimum SDK version, All this is done inside the android section:

 android {
     defaultConfig {
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 21
         ...
     }
 }

1. Add the ComPDFKit dependency in pubspec.yaml

 dependencies:
   flutter:
     sdk: flutter
+  compdfkit_flutter: ^1.11.0

1. From the terminal app, run the following command to get all the packages:

flutter pub get

1. Open lib/main.dart and replace the entire content with the following code. And fill in the license provided to you in the ComPDFKit.init method, this simple example will load a PDF document from the local device file system.

import 'dart:io';

import 'package:compdfkit_flutter/compdfkit.dart';
import 'package:compdfkit_flutter/cpdf_configuration.dart';

import 'package:flutter/material.dart';

const String DOCUMENT_PATH = 'pdfs/PDF_Document.pdf';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _init();
  }

  void _init() async {
    ComPDFKit.init('your compdfkit key');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SafeArea(
              child: Center(
        child: ElevatedButton(
            onPressed: () async {
              showDocument(context);
            },
            child: const Text(
              'Open Document',
              style: TextStyle(color: Colors.white),
            )),
      ))),
    );
  }

  void showDocument(BuildContext context) async {
    final bytes = await DefaultAssetBundle.of(context).load(DOCUMENT_PATH);
    final list = bytes.buffer.asUint8List();
    final tempDir = await ComPDFKit.getTemporaryDirectory();
    var pdfsDir = Directory('${tempDir.path}/pdfs');
    pdfsDir.createSync(recursive: true);

    final tempDocumentPath = '${tempDir.path}/$DOCUMENT_PATH';
    final file = File(tempDocumentPath);
    if (!file.existsSync()) {
      file.create(recursive: true);
      file.writeAsBytesSync(list);
    }
    var configuration = CPDFConfiguration();
    // How to disable functionality:
    // setting the default display mode when opening
    //      configuration.modeConfig = const ModeConfig(initialViewMode: CPreviewMode.annotations);
    // top toolbar configuration:
    // android:
    //      configuration.toolbarConfig = const ToolbarConfig(androidAvailableActions: [
    //           ToolbarAction.thumbnail, ToolbarAction.bota, 
    //           ToolbarAction.search, ToolbarAction.menu
    //      ],
    //      availableMenus: [
    //        ToolbarMenuAction.viewSettings, ToolbarMenuAction.documentInfo, ToolbarMenuAction.security,
    //      ]);
    // iOS:
    //      configuration.toolbarConfig = const ToolbarConfig(iosLeftBarAvailableActions: [
    //          ToolbarAction.back, ToolbarAction.thumbnail
    //      ],
    //      iosRightBarAvailableActions: [
    //        ToolbarAction.bota, ToolbarAction.search, ToolbarAction.menu
    //      ],
    //      availableMenus: [
    //        ToolbarMenuAction.viewSettings, ToolbarMenuAction.documentInfo, ToolbarMenuAction.security,
    //      ]);
    // readerview configuration
    //      configuration.readerViewConfig = const ReaderViewConfig(linkHighlight: true, formFieldHighlight: true);
    ComPDFKit.openDocument(tempDocumentPath,
        password: '', configuration: configuration);
  }
}

1. Add the PDF documents you want to display in the project

• create a pdf directory

  mkdir pdfs

• Copy your example document into the newly created pdfs directory and name it PDF_Document.pdf

1. Specify the assets directory in pubspec.yaml

 flutter:
+  assets:
+    - pdfs/

1. Start your Android emulator, or connect a device.

2. Run the app with:

flutter run

2.2.2 iOS

1. Create a Flutter project called example with the flutter CLI:

flutter create --org com.compdfkit.flutter example

1. In the terminal app, change the location of the current working directory to your project:

cd example

1. Add the ComPDFKit dependency in pubspec.yaml

 dependencies:
   flutter:
     sdk: flutter
+  compdfkit_flutter: ^1.11.0

1. From the terminal app, run the following command to get all the packages:

flutter pub get

1. Open your project’s Podfile in a text editor:

open ios/Podfile

1. Update the platform to iOS 11 and add the ComPDFKit Podspec:

- platform :ios, '9.0'
+ platform :ios, '11.0' 
 ...
 target 'Runner' do
   use_frameworks!
   use_modular_headers!`

   flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'ComPDFKit_Tools', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit_tools/1.11.0.podspec'
+  pod 'ComPDFKit', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/1.11.0.podspec'

 end

1. Go to the example/ios folder and run the pod install command:

pod install

1. Open lib/main.dart and replace the entire content with the following code. And fill in the license provided to you in the ComPDFKit.init method, this simple example will load a PDF document from the local device file system.

import 'dart:io';

import 'package:compdfkit_flutter/compdfkit.dart';
import 'package:compdfkit_flutter/cpdf_configuration.dart';

import 'package:flutter/material.dart';

const String DOCUMENT_PATH = 'pdfs/PDF_Document.pdf';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _init();
  }

  void _init() async {
    // Please replace it with your ComPDFKit license
    ComPDFKit.init('your compdfkit key');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SafeArea(
              child: Center(
        child: ElevatedButton(
            onPressed: () async {
              showDocument(context);
            },
            child: const Text(
              'Open Document',
              style: TextStyle(color: Colors.white),
            )),
      ))),
    );
  }

  void showDocument(BuildContext context) async {
    final bytes = await DefaultAssetBundle.of(context).load(DOCUMENT_PATH);
    final list = bytes.buffer.asUint8List();
    final tempDir = await ComPDFKit.getTemporaryDirectory();
    var pdfsDir = Directory('${tempDir.path}/pdfs');
    pdfsDir.createSync(recursive: true);

    final tempDocumentPath = '${tempDir.path}/$DOCUMENT_PATH';
    final file = File(tempDocumentPath);
    if (!file.existsSync()) {
      file.create(recursive: true);
      file.writeAsBytesSync(list);
    }
    var configuration = CPDFConfiguration();
    // How to disable functionality:
    // setting the default display mode when opening
    //      configuration.modeConfig = const ModeConfig(initialViewMode: CPreviewMode.annotations);
    // top toolbar configuration:
    // android:
    //      configuration.toolbarConfig = const ToolbarConfig(androidAvailableActions: [
    //           ToolbarAction.thumbnail, ToolbarAction.bota, 
    //           ToolbarAction.search, ToolbarAction.menu
    //      ],
    //      availableMenus: [
    //        ToolbarMenuAction.viewSettings, ToolbarMenuAction.documentInfo, ToolbarMenuAction.security,
    //      ]);
    // iOS:
    //      configuration.toolbarConfig = const ToolbarConfig(iosLeftBarAvailableActions: [
    //          ToolbarAction.back, ToolbarAction.thumbnail
    //      ],
    //      iosRightBarAvailableActions: [
    //        ToolbarAction.bota, ToolbarAction.search, ToolbarAction.menu
    //      ],
    //      availableMenus: [
    //        ToolbarMenuAction.viewSettings, ToolbarMenuAction.documentInfo, ToolbarMenuAction.security,
    //      ]);
    // readerview configuration:
    //      configuration.readerViewConfig = const ReaderViewConfig(linkHighlight: true, formFieldHighlight: 		true);
    ComPDFKit.openDocument(tempDocumentPath,
        password: '', configuration: configuration);
  }
}

1. Add the PDF documents you want to display in the project

• create a pdf directory

  mkdir pdfs

• Copy your example document into the newly created pdfs directory and name it PDF_Document.pdf

1. Specify the assets directory in pubspec.yaml

 flutter:
+  assets:
+    - pdfs/

1. To protect user privacy,

To protect user privacy, before accessing the sensitive privacy data, you need to find the "*Info*" configuration in your iOS 10.0 or higher iOS project and configure the relevant privacy terms as shown in the following picture.

<key>NSCameraUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

1. Start your Android emulator, or connect a device.

flutter emulators --launch apple_ios_simulator

1. Run the app with:

flutter run

3 Support

3.1 Reporting Problems

Thank you for your interest in ComPDFKit, the only easy-to-use but powerful development solution to integrate high quality PDF rendering capabilities to your applications. If you encounter any technical questions or bug issues when using ComPDFKit Flutter PDF Library, please submit the problem report to the ComPDFKit team. More information as follows would help us to solve your problem:

• ComPDFKit PDF SDK product and version.
• Your operating system and IDE version.
• Detailed descriptions of the problem.
• Any other related information, such as an error screenshot.

3.2 Contact Information

Home Link:

https://www.compdf.com

Support & General Contact:

Email: support@compdf.com

Thanks, The ComPDFKit Team