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.
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.
PSPDFKit does not collect any data during your evaluation of the SDK.
Requirements
Install the following required packages:
-
The Android NDK
-
An Android Virtual Device or a hardware device
-
An existing Flutter project that runs on Android using the latest version of Flutter
-
The latest stable version of CocoaPods. If you don’t already have CocoaPods installed, follow the CocoaPods installation guide to install CocoaPods on your Mac.
-
An existing Flutter project that runs on iOS using the latest version of Flutter
-
An existing Flutter project that runs on the web using the latest version of Flutter
-
An existing Flutter project that runs on both Android and iOS using the latest version of Flutter
Creating a New Project
-
Create a Flutter project called
pspdfkit_demo
with theflutter
CLI:
flutter create --org com.example.pspdfkit_demo pspdfkit_demo
Installing the PSPDFKit Dependency
-
In the terminal app, change the location of the current working directory to your project:
cd <project-root>
-
Open the project’s Gradle build file,
android/build.gradle
:
open android/build.gradle
-
Modify the Kotlin version inside the
buildscript
section:
buildscript { - ext.kotlin_version = '1.3.50' + ext.kotlin_version = '1.8.22' repositories { google() mavenCentral() } ... }
-
Open the app’s Gradle build file,
android/app/build.gradle
:
open android/app/build.gradle
-
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' } ... }
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.
-
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'
}
-
Change the base
Activity
to extendFlutterAppCompatActivity
:
- 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">
FlutterAppCompatActivity
isn’t an official part of the Flutter SDK. It’s a customActivity
that extendsAppCompatActivity
from the AndroidX AppCompat library, and it’s necessary to use PSPDFKit for Android with Flutter.
-
Update the theme in
android/app/src/main/res/values/styles.xml
to usePSPDFKit.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.
-
Open
Runner.xcworkspace
from theios
folder in Xcode:
open ios/Runner.xcworkspace
-
Make sure the iOS deployment target is set to 15.0 or higher.
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
-
Download the framework here. The download will start immediately and will save a
.tar.gz
archive likePSPDFKit-Web-binary-2024.2.0.tar.gz
to your computer. -
Once the download is complete, extract the archive and copy the entire contents of its
dist
folder to your project’sweb/assets
folder or any other folder of your choice inside the web subfolder. -
Make sure your
assets
folder contains thepspdfkit.js
file and apspdfkit-lib
directory with the library assets. -
Make sure your server has the
Content-Type: application/wasm
MIME typeset. Read more about this in the troubleshooting section. -
Include the PSPDFKit library in your
index.html
file:
<script src="assets/pspdfkit.js"></script>
-
Open
pubspec.yaml
:
open pubspec.yaml
-
Add the PSPDFKit dependency in
pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
+ pspdfkit_flutter:
-
From the terminal app, run the following command to get all the packages:
flutter pub get
-
Then run the command below to upgrade the dependencies:
flutter pub upgrade
-
Open your project’s Podfile in a text editor:
open ios/Podfile
-
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
-
Open the
lib/main.dart
file:
open lib/main.dart
-
Replace the contents of
lib/main.dart
with the following code snippet that loads a document from theassets
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.
-
Add the PDF document you want to display in your project’s
assets
directory. You can use this Quickstart Guide PDF as an example. -
Create a
PDFs
directory:
mkdir PDFs
-
Copy the sample document into the newly created
PDFs
directory:
cp ~/Downloads/Document.pdf PDFs/Document.pdf
-
Specify the
assets
directory inpubspec.yaml
:
# The following section is specific to Flutter.
flutter:
+ assets:
+ - PDFs/
...
-
Start your Android emulator or iOS simulator, or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.
-
Run the app with:
flutter run
Next Steps
To learn more about Flutter, make sure to check out the following blog posts: