Getting started on Flutter

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/settings.gradle

  1. Update the pluginManagement block in the android/settings.gradle file as follows:

pluginManagement {
    ...
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.3.37")
+       }
+    }
}

// Upgrade Kotlin version.
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

This step involves enabling R8 for code shrinking (not required for AGP 8.* and above) and upgrading the Kotlin version.

  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'
    }
...
}

  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.6.1"
}

  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.8.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'

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';

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

void main() {
  
  // Initialize PSPDFKit with the license key. Pass `null` to use the trial version.
  Pspdfkit.setLicenseKey(null);

  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(),
              );
            }
          }),
    );
  }
}

Since PSPDFKit for Flutter 3.9.0, it’s now required to initialize the PSPDFKit SDK before it can be used by setting a license key. If you don’t have one yet, you can set it to null. This will show a watermark on the document. You can get a trial license to remove the watermark:

void main(){
    Pspdfkit.setLicenseKey('YOUR_LICENSE_KEY or null');
    runApp(const MyApp());
  }
Information

On Android, you’ll run into a class 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.

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/settings.gradle

  1. Update the pluginManagement block in the android/settings.gradle file as follows:

pluginManagement {
    ...
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.3.37")
+       }
+    }
}

// Upgrade Kotlin version.
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

This step involves enabling R8 for code shrinking (not required for AGP 8.* and above) and upgrading the Kotlin version.

  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'
    }
...
}

  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.6.1"
}

  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.8.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'

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.

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.8.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>

Running 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.

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/settings.gradle

  1. Update the pluginManagement block in the android/settings.gradle file as follows:

pluginManagement {
    ...
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.3.37")
+       }
+    }
}

// Upgrade Kotlin version.
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

This step involves enabling R8 for code shrinking (not required for AGP 8.* and above) and upgrading the Kotlin version.

  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'
    }
...
}

  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.6.1"
}

  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'

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';

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

void main() {
  
  // Initialize PSPDFKit with the license key. Pass `null` to use the trial version.
  Pspdfkit.setLicenseKey(null);

  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(),
              );
            }
          }),
    );
  }
}

Since PSPDFKit for Flutter 3.9.0, it’s now required to initialize the PSPDFKit SDK before it can be used by setting a license key. If you don’t have one yet, you can set it to null. This will show a watermark on the document. You can get a trial license to remove the watermark:

void main(){
    Pspdfkit.setLicenseKey('YOUR_LICENSE_KEY or null');
    runApp(const MyApp());
  }
Information

On Android, you’ll run into a class 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.

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/settings.gradle

  1. Update the pluginManagement block in the android/settings.gradle file as follows:

pluginManagement {
    ...
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.3.37")
+       }
+    }
}

// Upgrade Kotlin version.
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

This step involves enabling R8 for code shrinking (not required for AGP 8.* and above) and upgrading the Kotlin version.

  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'
    }
...
}

  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.6.1"
}

  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'

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.

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

Running 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.

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/settings.gradle

  1. Update the pluginManagement block in the android/settings.gradle file as follows:

pluginManagement {
    ...
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.3.37")
+       }
+    }
}

// Upgrade Kotlin version.
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

This step involves enabling R8 for code shrinking (not required for AGP 8.* and above) and upgrading the Kotlin version.

  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'
    }
...
}

  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.6.1"
}

  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';

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

void main() {
  
  // Initialize PSPDFKit with the license key. Pass `null` to use the trial version.
  Pspdfkit.setLicenseKey(null);

  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(),
              );
            }
          }),
    );
  }
}

Since PSPDFKit for Flutter 3.9.0, it’s now required to initialize the PSPDFKit SDK before it can be used by setting a license key. If you don’t have one yet, you can set it to null. This will show a watermark on the document. You can get a trial license to remove the watermark:

void main(){
    Pspdfkit.setLicenseKey('YOUR_LICENSE_KEY or null');
    runApp(const MyApp());
  }
Information

On Android, you’ll run into a class 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.

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/settings.gradle

  1. Update the pluginManagement block in the android/settings.gradle file as follows:

pluginManagement {
    ...
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.3.37")
+       }
+    }
}

// Upgrade Kotlin version.
plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "7.3.0" apply false
-   id "org.jetbrains.kotlin.android" version "1.7.10" apply false
+   id "org.jetbrains.kotlin.android" version "1.8.22" apply false
}

This step involves enabling R8 for code shrinking (not required for AGP 8.* and above) and upgrading the Kotlin version.

  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'
    }
...
}

  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.6.1"
}

  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.

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

Running 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.

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'

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';

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

void main() {
  
  // Initialize PSPDFKit with the license key. Pass `null` to use the trial version.
  Pspdfkit.setLicenseKey(null);

  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(),
              );
            }
          }),
    );
  }
}

Since PSPDFKit for Flutter 3.9.0, it’s now required to initialize the PSPDFKit SDK before it can be used by setting a license key. If you don’t have one yet, you can set it to null. This will show a watermark on the document. You can get a trial license to remove the watermark:

void main(){
    Pspdfkit.setLicenseKey('YOUR_LICENSE_KEY or null');
    runApp(const MyApp());
  }
Information

On Android, you’ll run into a class 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.

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'

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.

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

Running 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.

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.8.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';

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

void main() {
  
  // Initialize PSPDFKit with the license key. Pass `null` to use the trial version.
  Pspdfkit.setLicenseKey(null);

  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(),
              );
            }
          }),
    );
  }
}

Since PSPDFKit for Flutter 3.9.0, it’s now required to initialize the PSPDFKit SDK before it can be used by setting a license key. If you don’t have one yet, you can set it to null. This will show a watermark on the document. You can get a trial license to remove the watermark:

void main(){
    Pspdfkit.setLicenseKey('YOUR_LICENSE_KEY or null');
    runApp(const MyApp());
  }
Information

On Android, you’ll run into a class 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.

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.8.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.

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.8.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>

Running 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.