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/settings.gradle
-
Update the
pluginManagement
block in theandroid/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.
-
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' } ... }
-
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"
}
-
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.6.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'
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'; 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()); }
On Android, you’ll run into a class 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: