---
title: "Getting started with Flutter"
canonical_url: "https://www.nutrient.io/sdk/flutter/getting-started/"
md_url: "https://www.nutrient.io/sdk/flutter/getting-started.md"
last_updated: "2026-05-15T19:10:05.144Z"
description: "Integrate Nutrient Flutter SDK into your Android, iOS, or web project. Add PDF viewing, annotation, and editing functionality from a single codebase."
---

# Getting started with Flutter

This guide walks you through the steps needed to integrate the Nutrient Flutter SDK dependency into your Android, iOS, or web project. By the end, you’ll be able to load a PDF document in the default Nutrient user interface (UI).

> You can find our Flutter library on [pub.dev](https://pub.dev/packages/nutrient_flutter) and [GitHub](https://github.com/PSPDFKit/pspdfkit-flutter).

## Requirements

Install the following required packages depending on your platform (Android, iOS, or web):

- The [latest stable version of Flutter](https://flutter.dev/docs/get-started/install)

- The [latest stable version of Android Studio](https://developer.android.com/studio)

- The [Android NDK](https://developer.android.com/studio/projects/install-ndk)

- An [Android Virtual Device](https://developer.android.com/studio/run/managing-avds.html) or a hardware device

- The [latest stable version of Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12)

- The [latest stable version of CocoaPods](https://github.com/CocoaPods/CocoaPods/releases). If you don’t already have CocoaPods installed, follow the [CocoaPods installation guide](https://guides.cocoapods.org/using/getting-started.html#installation) to install CocoaPods on your Mac. Check your CocoaPods version by running `pod --version`.

- The [latest stable version of Chrome](https://www.google.com/chrome/)

## Creating a new project

If you already have a project that runs on Android, iOS, and web using the latest version of Flutter, skip to [installing the Nutrient dependency](#installing-the-nutrient-dependency). Otherwise, create a new one called `nutrient_demo` with the `flutter` CLI:

```bash

flutter create --org com.example.nutrient_demo nutrient_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:

```bash

flutter pub add nutrient_flutter

```

Depending on the platform (Android, iOS, or web) you want to run your project on, follow the setup instructions below.

### Android setup

1. Open the app’s Gradle build file, `android/app/build.gradle`:

   ```bash

   open android/app/build.gradle
   ```

2. Modify the compile SDK version and the minimum SDK version:

   ```diff

   android {
   -   compileSdkVersion flutter.compileSdkVersion
   +   compileSdkVersion 36...
       defaultConfig {
   -        minSdkVersion flutter.minSdkVersion
   +        minSdkVersion 24...
       }

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

   ```

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

   ```diff

   dependencies {...
   +   implementation "androidx.appcompat:appcompat:<version>"
   }
   ```

   > - Replace `<version>` with the latest version of the AppCompat library. You’ll find the latest version in the [Maven repository](https://mvnrepository.com/artifact/androidx.appcompat/appcompat).

   - If your project is using Android Gradle Plugin 7.*.*, refer to the [Android Gradle plugin troubleshooting](https://www.nutrient.io/guides/flutter/troubleshooting/using-android-gradle-plugin-7.md) guide for additional setup information.

4. Change the base `Activity` to extend `FlutterAppCompatActivity`:

   ```diff

   - 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:

   ```diff

    <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 custom `Activity` that extends `AppCompatActivity` from the AndroidX AppCompat library, and it’s necessary to use [Nutrient Android SDK](https://www.nutrient.io/guides/android.md) with Flutter.

5. Update the theme in `android/app/src/main/res/values/styles.xml` and `android/app/src/main/res/values-night/styles.xml` to use `PSPDFKit.Theme.default` as the parent:

   ```diff

   - <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](https://www.nutrient.io/guides/android/customizing-the-interface/appearance-styling.md) guide.

### iOS setup

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

   ```bash

   open ios/Runner.xcworkspace
   ```

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

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

   ```bash

   open ios/Podfile
   ```

4. Update the platform to iOS 16, which is the minimum required version for [Nutrient iOS SDK](https://www.nutrient.io/guides/ios.md):

   ```diff

   -# platform :ios, '9.0'

   + platform :ios, '16.0'
   ```

### Web setup

### CDN

The most direct and recommended way to get started is using our CDN to load [Nutrient Web SDK](https://www.nutrient.io/guides/web.md):

1. Add the following script to the `<head>` section of your `index.html` file:

   ```html

   <!DOCTYPE html>
   <html>
   <head>
     <!--... other head elements... -->

     <script src="https://cdn.cloud.nutrient.io/pspdfkit-web@1.15.0/nutrient-viewer.js"></script>
   </head>
   <body>
     <!--... body content... -->

   </body>
   </html>
   ```

2. Make sure to replace `<version>` with the version you want to use. You can find the latest version in the [Nutrient Web SDK changelog](https://www.nutrient.io/guides/web/changelog.md).

   > Using the CDN option is recommended for both development and production, as it ensures you’re always using a specific, consistent version of the SDK.

### Local installation

[Nutrient Web SDK](https://www.nutrient.io/guides/web.md) files are distributed as an archive that can be extracted manually.

1. [Download the framework](https://my.nutrient.io/download/web/latest). The download will start immediately and will save a `.tar.gz` archive like `PSPDFKit-Web-binary-1.15.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 `nutrient-viewer.js` file and a `nutrient-viewer-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](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md#response-has-unsupported-mime-type-error) guide.

5. Include the Nutrient library in your `index.html` file:

   ```html

   <script src="assets/nutrient-viewer.js"></script>
   ```

6. Set `useCDN` to `false` in your `PdfWebConfiguration` so the SDK loads assets from your local files instead of the CDN:

   ```dart

   NutrientView(
     documentPath: documentPath,
     configuration: PdfConfiguration(
       webConfiguration: PdfWebConfiguration(
         useCDN: false,
       ),
     ),
   )
   ```

   For more details, refer to the [asset loading](https://www.nutrient.io/guides/flutter/viewer/web.md#asset-loading%3A-cdn-vs.-self-hosted) guide.

## Displaying a PDF

### Existing project

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

1. Import the Nutrient package:

   ```dart

   import 'package:nutrient_flutter/nutrient_flutter.dart';
   ```

2. Show the PDF document inside your Flutter app as demonstrated below:

   ```dart

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

If you’re having trouble with integration, refer to the New project tab to check whether anything is missing from your setup.

### New project

1. Open the `lib/main.dart` file:

   ```bash

   open lib/main.dart
   ```

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

   ```dart

   import 'dart:io';
   import 'package:flutter/foundation.dart';
   import 'package:flutter/material.dart';
   import 'package:nutrient_flutter/nutrient_flutter.dart';

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

   void main() {
     WidgetsFlutterBinding.ensureInitialized();

     // Initialize Nutrient with the license key. Pass `null` to use the trial version.
     Nutrient.initialize(androidLicenseKey: null, iosLicenseKey: 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 Nutrient.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) {
                 /// NutrientView is a widget that displays a PDF document.
                 return NutrientView(
                   documentPath: snapshot.data!,
                 );
               } else if (snapshot.hasError) {
                 return Center(
                   child: Text('${snapshot.error}'),
                 );
               } else {
                 return const Center(
                   child: CircularProgressIndicator(),
                 );
               }
             }),
       );
     }
   }
   ```

   > Since Nutrient Flutter SDK version 3.9.0, it’s now required to initialize the 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](https://my.nutrient.io/trial/new) to remove the watermark:

   ```dart

     void main(){
       Nutrient.initialize();
       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](https://www.nutrient.io/guides/flutter/troubleshooting/pspdfkit-widget-appcompat-activity-issue.md) guide.

With your project now configured, proceed with the steps below to add a PDF document and run your application.

3. Add the PDF document you want to display in your project’s `assets` directory. You can use [this quickstart guide PDF](https://www.nutrient.io/downloads/pspdfkit-flutter-quickstart-guide.pdf) as an example.

4. Create a `PDFs` directory:

   ```bash

   mkdir PDFs
   ```

5. Copy the sample document into the newly created `PDFs` directory:

   ```bash

   cp ~/Downloads/Document.pdf PDFs/Document.pdf
   ```

6. Specify the `assets` directory in `pubspec.yaml`:

   ```diff

   # The following section is specific to Flutter.

   flutter:
   +  assets:
   +    - PDFs/...
   ```

7. Depending on your platform, [start your Android emulator](https://developer.android.com/studio/run/emulator#runningemulator) or [iOS simulator](https://developer.apple.com/library/archive/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator/GettingStartedwithiOSSimulator.html), or connect a device. If Chrome is installed on your computer, it’ll be launched automatically.

8. Run the app with:

   ```bash

   flutter run
   ```

## Next steps

To learn more about Flutter, refer to the following resources:

- [How I got started with Flutter](https://www.nutrient.io/blog/starting-with-flutter/)

- [Getting started with Nutrient Flutter](https://www.nutrient.io/blog/getting-started-with-pspdfkit-flutter/)

- [Opening a PDF in Flutter](https://www.nutrient.io/blog/opening-a-pdf-in-flutter/)

- [Download and display a PDF in Flutter](https://www.nutrient.io/blog/download-and-display-pdf-in-flutter-with-pspdfkit/)

- [How to customize our Flutter PDF SDK](https://www.nutrient.io/guides/flutter/customize.md)

- [Advances in hybrid technologies](https://www.nutrient.io/blog/advances-in-hybrid-technologies/)

- [How we maintain our public Flutter project using a private monorepo](https://www.nutrient.io/blog/maintaining-open-source-repo-from-monorepo/)

- [How to build a Flutter PDF viewer](https://www.nutrient.io/blog/how-to-build-a-flutter-pdf-viewer/)