Getting Started on Flutter

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Creating a New Project

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

flutter create --org com.example.pspdfkit_demo pspdfkit_demo

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open the project’s Gradle build file, android/build.gradle:

open android/build.gradle
  1. Modify the Kotlin version inside the buildscript section:

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.8.22'
        repositories {
            google()
            mavenCentral()
    }
...
}
  1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle
  1. Modify the compile SDK version and the minimum SDK version:

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

    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
    }
...
}
Information

For existing projects, you may need to upgrade the Android Gradle plugin to version 8.2.2 or higher. You can do this by opening the Android folder in Android Studio and following the prompts to upgrade the Gradle plugin. You can find out more about using the Android Gradle Upgrade Assistant here.

  1. Add the AppCompat AndroidX library to your android/app/build.gradle file:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}
  1. Change the base Activity to extend FlutterAppCompatActivity:

- import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

Alternatively you can update the AndroidManifest.xml file to use FlutterAppCompatActivity as the launcher activity:

<activity 
-       android:name=".MainActivity" 
+       android:name="io.flutter.embedding.android.FlutterAppCompatActivity" 
        android:launchMode="singleTop" 
        android:theme="@style/LaunchTheme" 
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 
        android:hardwareAccelerated="true" 
        android:windowSoftInputMode="adjustResize" 
        android:exported="true">
Information

FlutterAppCompatActivity isn’t an official part of the Flutter SDK. It’s a custom Activity that extends AppCompatActivity from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.

  1. Update the theme in android/app/src/main/res/values/styles.xml to use PSPDFKit.Theme.default as the parent:

- <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

This is to customize the theme of the PSPDFKit UI. You can read more about this in the appearance styling guide.

  1. Open Runner.xcworkspace from the ios folder in Xcode:

open ios/Runner.xcworkspace
  1. Make sure the iOS deployment target is set to 15.0 or higher.

iOS Deployment Target

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.2.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s web/assets folder or any other folder of your choice inside the web subfolder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  5. Include the PSPDFKit library in your index.html file:

<script src="assets/pspdfkit.js"></script>
  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

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

open ios/Podfile
  1. Update the platform to iOS 15 and add the PSPDFKit Podspec:

-# platform :ios, '9.0'
+ platform :ios, '15.0'
...
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'PSPDFKit', podspec:'https://my.pspdfkit.com/pspdfkit-ios/latest.podspec'
+  pod 'Instant', podspec: 'https://my.pspdfkit.com/instant/latest.podspec'

Displaying a PDF

  1. Open the lib/main.dart file:

open lib/main.dart
  1. Replace the contents of lib/main.dart with the following code snippet that loads a document from the assets path:

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pspdfkit_flutter/pspdfkit.dart';
import 'package:pspdfkit_flutter/pspdfkit_widget.dart';

const String documentPath = 'PDFs/Document.pdf';

void main() => runApp(const MaterialApp(
      home: MyApp(),
    ));

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

  Future<String> extractAsset(BuildContext context, String assetPath) async {
    if (kIsWeb) {
      return assetPath;
    }

    final bytes = await DefaultAssetBundle.of(context).load(assetPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await Pspdfkit.getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$assetPath';
    final file = File(tempDocumentPath);

    await file.create(recursive: true);
    file.writeAsBytesSync(list);
    return file.path;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<String>(
          future: extractAsset(context, documentPath),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// PspdfkitWidget is a widget that displays a PDF document.
              return PspdfkitWidget(
                documentPath: snapshot.data!,
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('${snapshot.error}'),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}

⚠️ Note: On Android, you’ll run into a clas cast exception for AppCompatActivity. To fix this, you’ll need to follow this troubleshooting guide.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your Android emulator or iOS simulator, or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open the project’s Gradle build file, android/build.gradle:

open android/build.gradle
  1. Modify the Kotlin version inside the buildscript section:

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.8.22'
        repositories {
            google()
            mavenCentral()
    }
...
}
  1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle
  1. Modify the compile SDK version and the minimum SDK version:

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

    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
    }
...
}
Information

For existing projects, you may need to upgrade the Android Gradle plugin to version 8.2.2 or higher. You can do this by opening the Android folder in Android Studio and following the prompts to upgrade the Gradle plugin. You can find out more about using the Android Gradle Upgrade Assistant here.

  1. Add the AppCompat AndroidX library to your android/app/build.gradle file:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}
  1. Change the base Activity to extend FlutterAppCompatActivity:

- import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

Alternatively you can update the AndroidManifest.xml file to use FlutterAppCompatActivity as the launcher activity:

<activity 
-       android:name=".MainActivity" 
+       android:name="io.flutter.embedding.android.FlutterAppCompatActivity" 
        android:launchMode="singleTop" 
        android:theme="@style/LaunchTheme" 
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 
        android:hardwareAccelerated="true" 
        android:windowSoftInputMode="adjustResize" 
        android:exported="true">
Information

FlutterAppCompatActivity isn’t an official part of the Flutter SDK. It’s a custom Activity that extends AppCompatActivity from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.

  1. Update the theme in android/app/src/main/res/values/styles.xml to use PSPDFKit.Theme.default as the parent:

- <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

This is to customize the theme of the PSPDFKit UI. You can read more about this in the appearance styling guide.

  1. Open Runner.xcworkspace from the ios folder in Xcode:

open ios/Runner.xcworkspace
  1. Make sure the iOS deployment target is set to 15.0 or higher.

iOS Deployment Target

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.2.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s web/assets folder or any other folder of your choice inside the web subfolder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  5. Include the PSPDFKit library in your index.html file:

<script src="assets/pspdfkit.js"></script>
  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

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

open ios/Podfile
  1. Update the platform to iOS 15 and add the PSPDFKit Podspec:

-# platform :ios, '9.0'
+ platform :ios, '15.0'
...
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'PSPDFKit', podspec:'https://my.pspdfkit.com/pspdfkit-ios/latest.podspec'
+  pod 'Instant', podspec: 'https://my.pspdfkit.com/instant/latest.podspec'

Displaying a PDF

Integrating into an existing project consists of initializing the PSPDFKit SDK and presenting it with a document.

  1. Import the PSPDFKit package:

import 'package:pspdfkit_flutter/pspdfkit_widget.dart';
  1. Showing a PDF document inside your Flutter app is as simple as this:

Scaffold(
	  body: PspdfkitWidget(
		documentPath: 'file:///path/to/Document.pdf',
	  ),
	);

If you’re having trouble with integration, go through the New Project guide to see if there’s anything missing in your setup.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your Android emulator or iOS simulator, or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Cloning the Flutter Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-flutter.git
  1. Enter the example project directory:

cd pspdfkit-flutter/example

Adding PSPDFKit for Web

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.2.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s web/assets folder or any other folder of your choice inside the web subfolder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  5. Include the PSPDFKit library in your index.html file:

<script src="assets/pspdfkit.js"></script>

Run the Catalog App

  1. Start your Android emulator or iOS simulator, or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.

  2. Launch the Catalog application:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Creating a New Project

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

flutter create --org com.example.pspdfkit_demo pspdfkit_demo

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open the project’s Gradle build file, android/build.gradle:

open android/build.gradle
  1. Modify the Kotlin version inside the buildscript section:

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.8.22'
        repositories {
            google()
            mavenCentral()
    }
...
}
  1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle
  1. Modify the compile SDK version and the minimum SDK version:

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

    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
    }
...
}
Information

For existing projects, you may need to upgrade the Android Gradle plugin to version 8.2.2 or higher. You can do this by opening the Android folder in Android Studio and following the prompts to upgrade the Gradle plugin. You can find out more about using the Android Gradle Upgrade Assistant here.

  1. Add the AppCompat AndroidX library to your android/app/build.gradle file:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}
  1. Change the base Activity to extend FlutterAppCompatActivity:

- import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

Alternatively you can update the AndroidManifest.xml file to use FlutterAppCompatActivity as the launcher activity:

<activity 
-       android:name=".MainActivity" 
+       android:name="io.flutter.embedding.android.FlutterAppCompatActivity" 
        android:launchMode="singleTop" 
        android:theme="@style/LaunchTheme" 
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 
        android:hardwareAccelerated="true" 
        android:windowSoftInputMode="adjustResize" 
        android:exported="true">
Information

FlutterAppCompatActivity isn’t an official part of the Flutter SDK. It’s a custom Activity that extends AppCompatActivity from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.

  1. Update the theme in android/app/src/main/res/values/styles.xml to use PSPDFKit.Theme.default as the parent:

- <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

This is to customize the theme of the PSPDFKit UI. You can read more about this in the appearance styling guide.

  1. Open Runner.xcworkspace from the ios folder in Xcode:

open ios/Runner.xcworkspace
  1. Make sure the iOS deployment target is set to 15.0 or higher.

iOS Deployment Target

  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

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

open ios/Podfile
  1. Update the platform to iOS 15 and add the PSPDFKit Podspec:

-# platform :ios, '9.0'
+ platform :ios, '15.0'
...
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'PSPDFKit', podspec:'https://my.pspdfkit.com/pspdfkit-ios/latest.podspec'
+  pod 'Instant', podspec: 'https://my.pspdfkit.com/instant/latest.podspec'

Displaying a PDF

  1. Open the lib/main.dart file:

open lib/main.dart
  1. Replace the contents of lib/main.dart with the following code snippet that loads a document from the assets path:

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pspdfkit_flutter/pspdfkit.dart';
import 'package:pspdfkit_flutter/pspdfkit_widget.dart';

const String documentPath = 'PDFs/Document.pdf';

void main() => runApp(const MaterialApp(
      home: MyApp(),
    ));

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

  Future<String> extractAsset(BuildContext context, String assetPath) async {
    if (kIsWeb) {
      return assetPath;
    }

    final bytes = await DefaultAssetBundle.of(context).load(assetPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await Pspdfkit.getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$assetPath';
    final file = File(tempDocumentPath);

    await file.create(recursive: true);
    file.writeAsBytesSync(list);
    return file.path;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<String>(
          future: extractAsset(context, documentPath),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// PspdfkitWidget is a widget that displays a PDF document.
              return PspdfkitWidget(
                documentPath: snapshot.data!,
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('${snapshot.error}'),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}

⚠️ Note: On Android, you’ll run into a clas cast exception for AppCompatActivity. To fix this, you’ll need to follow this troubleshooting guide.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your Android emulator or iOS simulator, or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open the project’s Gradle build file, android/build.gradle:

open android/build.gradle
  1. Modify the Kotlin version inside the buildscript section:

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.8.22'
        repositories {
            google()
            mavenCentral()
    }
...
}
  1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle
  1. Modify the compile SDK version and the minimum SDK version:

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

    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
    }
...
}
Information

For existing projects, you may need to upgrade the Android Gradle plugin to version 8.2.2 or higher. You can do this by opening the Android folder in Android Studio and following the prompts to upgrade the Gradle plugin. You can find out more about using the Android Gradle Upgrade Assistant here.

  1. Add the AppCompat AndroidX library to your android/app/build.gradle file:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}
  1. Change the base Activity to extend FlutterAppCompatActivity:

- import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

Alternatively you can update the AndroidManifest.xml file to use FlutterAppCompatActivity as the launcher activity:

<activity 
-       android:name=".MainActivity" 
+       android:name="io.flutter.embedding.android.FlutterAppCompatActivity" 
        android:launchMode="singleTop" 
        android:theme="@style/LaunchTheme" 
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 
        android:hardwareAccelerated="true" 
        android:windowSoftInputMode="adjustResize" 
        android:exported="true">
Information

FlutterAppCompatActivity isn’t an official part of the Flutter SDK. It’s a custom Activity that extends AppCompatActivity from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.

  1. Update the theme in android/app/src/main/res/values/styles.xml to use PSPDFKit.Theme.default as the parent:

- <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

This is to customize the theme of the PSPDFKit UI. You can read more about this in the appearance styling guide.

  1. Open Runner.xcworkspace from the ios folder in Xcode:

open ios/Runner.xcworkspace
  1. Make sure the iOS deployment target is set to 15.0 or higher.

iOS Deployment Target

  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

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

open ios/Podfile
  1. Update the platform to iOS 15 and add the PSPDFKit Podspec:

-# platform :ios, '9.0'
+ platform :ios, '15.0'
...
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'PSPDFKit', podspec:'https://my.pspdfkit.com/pspdfkit-ios/latest.podspec'
+  pod 'Instant', podspec: 'https://my.pspdfkit.com/instant/latest.podspec'

Displaying a PDF

Integrating into an existing project consists of initializing the PSPDFKit SDK and presenting it with a document.

  1. Import the PSPDFKit package:

import 'package:pspdfkit_flutter/pspdfkit_widget.dart';
  1. Showing a PDF document inside your Flutter app is as simple as this:

Scaffold(
	  body: PspdfkitWidget(
		documentPath: 'file:///path/to/Document.pdf',
	  ),
	);

If you’re having trouble with integration, go through the New Project guide to see if there’s anything missing in your setup.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your Android emulator or iOS simulator, or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Cloning the Flutter Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-flutter.git
  1. Enter the example project directory:

cd pspdfkit-flutter/example

Run the Catalog App

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

  2. Launch the Catalog application:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Creating a New Project

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

flutter create --org com.example.pspdfkit_demo pspdfkit_demo

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open the project’s Gradle build file, android/build.gradle:

open android/build.gradle
  1. Modify the Kotlin version inside the buildscript section:

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.8.22'
        repositories {
            google()
            mavenCentral()
    }
...
}
  1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle
  1. Modify the compile SDK version and the minimum SDK version:

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

    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
    }
...
}
Information

For existing projects, you may need to upgrade the Android Gradle plugin to version 8.2.2 or higher. You can do this by opening the Android folder in Android Studio and following the prompts to upgrade the Gradle plugin. You can find out more about using the Android Gradle Upgrade Assistant here.

  1. Add the AppCompat AndroidX library to your android/app/build.gradle file:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}
  1. Change the base Activity to extend FlutterAppCompatActivity:

- import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

Alternatively you can update the AndroidManifest.xml file to use FlutterAppCompatActivity as the launcher activity:

<activity 
-       android:name=".MainActivity" 
+       android:name="io.flutter.embedding.android.FlutterAppCompatActivity" 
        android:launchMode="singleTop" 
        android:theme="@style/LaunchTheme" 
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 
        android:hardwareAccelerated="true" 
        android:windowSoftInputMode="adjustResize" 
        android:exported="true">
Information

FlutterAppCompatActivity isn’t an official part of the Flutter SDK. It’s a custom Activity that extends AppCompatActivity from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.

  1. Update the theme in android/app/src/main/res/values/styles.xml to use PSPDFKit.Theme.default as the parent:

- <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

This is to customize the theme of the PSPDFKit UI. You can read more about this in the appearance styling guide.

  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

flutter pub upgrade

Displaying a PDF

  1. Open the lib/main.dart file:

open lib/main.dart
  1. Replace the contents of lib/main.dart with the following code snippet that loads a document from the assets path:

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pspdfkit_flutter/pspdfkit.dart';
import 'package:pspdfkit_flutter/pspdfkit_widget.dart';

const String documentPath = 'PDFs/Document.pdf';

void main() => runApp(const MaterialApp(
      home: MyApp(),
    ));

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

  Future<String> extractAsset(BuildContext context, String assetPath) async {
    if (kIsWeb) {
      return assetPath;
    }

    final bytes = await DefaultAssetBundle.of(context).load(assetPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await Pspdfkit.getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$assetPath';
    final file = File(tempDocumentPath);

    await file.create(recursive: true);
    file.writeAsBytesSync(list);
    return file.path;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<String>(
          future: extractAsset(context, documentPath),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// PspdfkitWidget is a widget that displays a PDF document.
              return PspdfkitWidget(
                documentPath: snapshot.data!,
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('${snapshot.error}'),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}

⚠️ Note: On Android, you’ll run into a clas cast exception for AppCompatActivity. To fix this, you’ll need to follow this troubleshooting guide.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your Android emulator or connect a device.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open the project’s Gradle build file, android/build.gradle:

open android/build.gradle
  1. Modify the Kotlin version inside the buildscript section:

buildscript {
-   ext.kotlin_version = '1.3.50'
+   ext.kotlin_version = '1.8.22'
        repositories {
            google()
            mavenCentral()
    }
...
}
  1. Open the app’s Gradle build file, android/app/build.gradle:

open android/app/build.gradle
  1. Modify the compile SDK version and the minimum SDK version:

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

    compileOptions {
-       sourceCompatibility JavaVersion.VERSION_1_8
-       targetCompatibility JavaVersion.VERSION_1_8
+       sourceCompatibility JavaVersion.VERSION_17
+       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
    }
...
}
Information

For existing projects, you may need to upgrade the Android Gradle plugin to version 8.2.2 or higher. You can do this by opening the Android folder in Android Studio and following the prompts to upgrade the Gradle plugin. You can find out more about using the Android Gradle Upgrade Assistant here.

  1. Add the AppCompat AndroidX library to your android/app/build.gradle file:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+   implementation 'androidx.appcompat:appcompat:1.4.0'
}
  1. Change the base Activity to extend FlutterAppCompatActivity:

- import io.flutter.embedding.android.FlutterActivity;
+ import io.flutter.embedding.android.FlutterAppCompatActivity;

- public class MainActivity extends FlutterActivity {
+ public class MainActivity extends FlutterAppCompatActivity {
}

Alternatively you can update the AndroidManifest.xml file to use FlutterAppCompatActivity as the launcher activity:

<activity 
-       android:name=".MainActivity" 
+       android:name="io.flutter.embedding.android.FlutterAppCompatActivity" 
        android:launchMode="singleTop" 
        android:theme="@style/LaunchTheme" 
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 
        android:hardwareAccelerated="true" 
        android:windowSoftInputMode="adjustResize" 
        android:exported="true">
Information

FlutterAppCompatActivity isn’t an official part of the Flutter SDK. It’s a custom Activity that extends AppCompatActivity from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.

  1. Update the theme in android/app/src/main/res/values/styles.xml to use PSPDFKit.Theme.default as the parent:

- <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="NormalTheme" parent="PSPDFKit.Theme.Default">

This is to customize the theme of the PSPDFKit UI. You can read more about this in the appearance styling guide.

  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

flutter pub upgrade

Displaying a PDF

Integrating into an existing project consists of initializing the PSPDFKit SDK and presenting it with a document.

  1. Import the PSPDFKit package:

import 'package:pspdfkit_flutter/pspdfkit_widget.dart';
  1. Showing a PDF document inside your Flutter app is as simple as this:

Scaffold(
	  body: PspdfkitWidget(
		documentPath: 'file:///path/to/Document.pdf',
	  ),
	);

If you’re having trouble with integration, go through the New Project guide to see if there’s anything missing in your setup.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your Android emulator or connect a device.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Cloning the Flutter Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-flutter.git
  1. Enter the example project directory:

cd pspdfkit-flutter/example

Run the Catalog App

  1. Start your Android emulator or connect a device.

  2. Launch the Catalog application:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Creating a New Project

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

flutter create --org com.example.pspdfkit_demo pspdfkit_demo

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open Runner.xcworkspace from the ios folder in Xcode:

open ios/Runner.xcworkspace
  1. Make sure the iOS deployment target is set to 15.0 or higher.

iOS Deployment Target

  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

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

open ios/Podfile
  1. Update the platform to iOS 15 and add the PSPDFKit Podspec:

-# platform :ios, '9.0'
+ platform :ios, '15.0'
...
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'PSPDFKit', podspec:'https://my.pspdfkit.com/pspdfkit-ios/latest.podspec'
+  pod 'Instant', podspec: 'https://my.pspdfkit.com/instant/latest.podspec'

Displaying a PDF

  1. Open the lib/main.dart file:

open lib/main.dart
  1. Replace the contents of lib/main.dart with the following code snippet that loads a document from the assets path:

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pspdfkit_flutter/pspdfkit.dart';
import 'package:pspdfkit_flutter/pspdfkit_widget.dart';

const String documentPath = 'PDFs/Document.pdf';

void main() => runApp(const MaterialApp(
      home: MyApp(),
    ));

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

  Future<String> extractAsset(BuildContext context, String assetPath) async {
    if (kIsWeb) {
      return assetPath;
    }

    final bytes = await DefaultAssetBundle.of(context).load(assetPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await Pspdfkit.getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$assetPath';
    final file = File(tempDocumentPath);

    await file.create(recursive: true);
    file.writeAsBytesSync(list);
    return file.path;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<String>(
          future: extractAsset(context, documentPath),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// PspdfkitWidget is a widget that displays a PDF document.
              return PspdfkitWidget(
                documentPath: snapshot.data!,
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('${snapshot.error}'),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}

⚠️ Note: On Android, you’ll run into a clas cast exception for AppCompatActivity. To fix this, you’ll need to follow this troubleshooting guide.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your iOS simulator.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Installing the PSPDFKit Dependency

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

cd <project-root>
  1. Open Runner.xcworkspace from the ios folder in Xcode:

open ios/Runner.xcworkspace
  1. Make sure the iOS deployment target is set to 15.0 or higher.

iOS Deployment Target

  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

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

open ios/Podfile
  1. Update the platform to iOS 15 and add the PSPDFKit Podspec:

-# platform :ios, '9.0'
+ platform :ios, '15.0'
...
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  pod 'PSPDFKit', podspec:'https://my.pspdfkit.com/pspdfkit-ios/latest.podspec'
+  pod 'Instant', podspec: 'https://my.pspdfkit.com/instant/latest.podspec'

Displaying a PDF

Integrating into an existing project consists of initializing the PSPDFKit SDK and presenting it with a document.

  1. Import the PSPDFKit package:

import 'package:pspdfkit_flutter/pspdfkit_widget.dart';
  1. Showing a PDF document inside your Flutter app is as simple as this:

Scaffold(
	  body: PspdfkitWidget(
		documentPath: 'file:///path/to/Document.pdf',
	  ),
	);

If you’re having trouble with integration, go through the New Project guide to see if there’s anything missing in your setup.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Start your iOS simulator.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Cloning the Flutter Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-flutter.git
  1. Enter the example project directory:

cd pspdfkit-flutter/example

Run the Catalog App

  1. Start your iOS simulator.

  2. Launch the Catalog application:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Creating a New Project

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

flutter create --org com.example.pspdfkit_demo pspdfkit_demo

Installing the PSPDFKit Dependency

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

cd <project-root>

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.2.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s web/assets folder or any other folder of your choice inside the web subfolder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  5. Include the PSPDFKit library in your index.html file:

<script src="assets/pspdfkit.js"></script>
  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

flutter pub upgrade

Displaying a PDF

  1. Open the lib/main.dart file:

open lib/main.dart
  1. Replace the contents of lib/main.dart with the following code snippet that loads a document from the assets path:

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pspdfkit_flutter/pspdfkit.dart';
import 'package:pspdfkit_flutter/pspdfkit_widget.dart';

const String documentPath = 'PDFs/Document.pdf';

void main() => runApp(const MaterialApp(
      home: MyApp(),
    ));

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

  Future<String> extractAsset(BuildContext context, String assetPath) async {
    if (kIsWeb) {
      return assetPath;
    }

    final bytes = await DefaultAssetBundle.of(context).load(assetPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await Pspdfkit.getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$assetPath';
    final file = File(tempDocumentPath);

    await file.create(recursive: true);
    file.writeAsBytesSync(list);
    return file.path;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<String>(
          future: extractAsset(context, documentPath),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// PspdfkitWidget is a widget that displays a PDF document.
              return PspdfkitWidget(
                documentPath: snapshot.data!,
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('${snapshot.error}'),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}

⚠️ Note: On Android, you’ll run into a clas cast exception for AppCompatActivity. To fix this, you’ll need to follow this troubleshooting guide.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Make sure Chrome is installed on your computer.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Installing the PSPDFKit Dependency

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

cd <project-root>

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.2.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s web/assets folder or any other folder of your choice inside the web subfolder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  5. Include the PSPDFKit library in your index.html file:

<script src="assets/pspdfkit.js"></script>
  1. Open pubspec.yaml:

open pubspec.yaml
  1. Add the PSPDFKit dependency in pubspec.yaml:

dependencies:
  flutter:
     sdk: flutter
+ pspdfkit_flutter:
  1. From the terminal app, run the following command to get all the packages:

flutter pub get
  1. Then run the command below to upgrade the dependencies:

flutter pub upgrade

Displaying a PDF

Integrating into an existing project consists of initializing the PSPDFKit SDK and presenting it with a document.

  1. Import the PSPDFKit package:

import 'package:pspdfkit_flutter/pspdfkit_widget.dart';
  1. Showing a PDF document inside your Flutter app is as simple as this:

Scaffold(
	  body: PspdfkitWidget(
		documentPath: 'file:///path/to/Document.pdf',
	  ),
	);

If you’re having trouble with integration, go through the New Project guide to see if there’s anything missing in your setup.

  1. Add the PDF document you want to display in your project’s assets directory. You can use this Quickstart Guide PDF as an example.

  2. Create a PDFs directory:

mkdir PDFs
  1. Copy the sample document into the newly created PDFs directory:

cp ~/Downloads/Document.pdf PDFs/Document.pdf
  1. Specify the assets directory in pubspec.yaml:

# The following section is specific to Flutter.
flutter:
+  assets:
+    - PDFs/
...
  1. Make sure Chrome is installed on your computer.

  2. Run the app with:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.

This guide will take you through the steps necessary to integrate PSPDFKit into a Flutter project. By the end, you’ll be able to load a PDF document in the default PSPDFKit UI.

Information

PSPDFKit for Flutter can be evaluated without a trial license key, but with certain limitations (such as a red watermark added to documents). To evaluate without limitations, get a trial key.

Get Trial Key

PSPDFKit does not collect any data during your evaluation of the SDK.

Requirements

Install the following required packages:

Cloning the Flutter Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-flutter.git
  1. Enter the example project directory:

cd pspdfkit-flutter/example

Adding PSPDFKit for Web

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.2.0.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s web/assets folder or any other folder of your choice inside the web subfolder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section.

  5. Include the PSPDFKit library in your index.html file:

<script src="assets/pspdfkit.js"></script>

Run the Catalog App

  1. Make sure Chrome is installed on your computer. It’ll be launched automatically.

  2. Launch the Catalog application:

flutter run

Next Steps

To learn more about Flutter, make sure to check out the following blog posts:

You can find our Flutter library on pub.dev and GitHub.