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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Android setup

  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 "androidx.appcompat:appcompat:<version>"
}

Note:

  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, 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 Nutrient Android SDK 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 Nutrient UI. You can read more about this in the appearance styling guide.

iOS setup

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

open ios/Runner.xcworkspace

  1. Ensure the iOS deployment target is set to 16.0 or higher.

iOS deployment target

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

open ios/Podfile

  1. Update the platform to iOS 16, which is the minimum required version for Nutrient iOS SDK:

-# platform :ios, '9.0'
+ platform :ios, '16.0'

Note: The requires iOS 16 or higher.

Web setup

Nutrient Web SDK files are distributed as an archive that can be extracted manually.

  1. Download the framework. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.8.1.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 Nutrient library in your index.html file:

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

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Android setup

  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 "androidx.appcompat:appcompat:<version>"
}

Note:

  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, 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 Nutrient Android SDK 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 Nutrient UI. You can read more about this in the appearance styling guide.

iOS setup

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

open ios/Runner.xcworkspace

  1. Ensure the iOS deployment target is set to 16.0 or higher.

iOS deployment target

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

open ios/Podfile

  1. Update the platform to iOS 16, which is the minimum required version for Nutrient iOS SDK:

-# platform :ios, '9.0'
+ platform :ios, '16.0'

Note: The requires iOS 16 or higher.

Web setup

Nutrient Web SDK files are distributed as an archive that can be extracted manually.

  1. Download the framework. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.8.1.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 Nutrient library in your index.html file:

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

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.1.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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Android setup

  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 "androidx.appcompat:appcompat:<version>"
}

Note:

  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, 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 Nutrient Android SDK 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 Nutrient UI. You can read more about this in the appearance styling guide.

iOS setup

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

open ios/Runner.xcworkspace

  1. Ensure the iOS deployment target is set to 16.0 or higher.

iOS deployment target

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

open ios/Podfile

  1. Update the platform to iOS 16, which is the minimum required version for Nutrient iOS SDK:

-# platform :ios, '9.0'
+ platform :ios, '16.0'

Note: The requires iOS 16 or higher.

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Android setup

  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 "androidx.appcompat:appcompat:<version>"
}

Note:

  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, 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 Nutrient Android SDK 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 Nutrient UI. You can read more about this in the appearance styling guide.

iOS setup

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

open ios/Runner.xcworkspace

  1. Ensure the iOS deployment target is set to 16.0 or higher.

iOS deployment target

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

open ios/Podfile

  1. Update the platform to iOS 16, which is the minimum required version for Nutrient iOS SDK:

-# platform :ios, '9.0'
+ platform :ios, '16.0'

Note: The requires iOS 16 or higher.

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Android setup

  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 "androidx.appcompat:appcompat:<version>"
}

Note:

  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, 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 Nutrient Android SDK 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 Nutrient UI. You can read more about this in the appearance styling guide.

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Android setup

  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 "androidx.appcompat:appcompat:<version>"
}

Note:

  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, 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 Nutrient Android SDK 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 Nutrient UI. You can read more about this in the appearance styling guide.

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

iOS setup

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

open ios/Runner.xcworkspace

  1. Ensure the iOS deployment target is set to 16.0 or higher.

iOS deployment target

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

open ios/Podfile

  1. Update the platform to iOS 16, which is the minimum required version for Nutrient iOS SDK:

-# platform :ios, '9.0'
+ platform :ios, '16.0'

Note: The requires iOS 16 or higher.

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

iOS setup

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

open ios/Runner.xcworkspace

  1. Ensure the iOS deployment target is set to 16.0 or higher.

iOS deployment target

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

open ios/Podfile

  1. Update the platform to iOS 16, which is the minimum required version for Nutrient iOS SDK:

-# platform :ios, '9.0'
+ platform :ios, '16.0'

Note: The requires iOS 16 or higher.

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Web setup

Nutrient Web SDK files are distributed as an archive that can be extracted manually.

  1. Download the framework. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.8.1.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 Nutrient library in your index.html file:

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

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 Nutrient dependency

In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

flutter pub add pspdfkit_flutter

Web setup

Nutrient Web SDK files are distributed as an archive that can be extracted manually.

  1. Download the framework. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2024.8.1.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 Nutrient library in your index.html file:

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

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