Add PDF functionality with Flutter

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you’ll be able to render a PDF document in the user interface (UI).

Test without installing
View examples

Installing the Nutrient dependency

You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s a good way to get started. For more control and flexibility, use the local installation option.

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

    <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>

    Make sure to update the version number (@1.1.0) to the latest supported version of Nutrient Web SDK for optimal performance and features.

  2. You’re now ready to use Nutrient Web SDK and reference window.NutrientViewer in the client-side code.

Rendering a PDF

  1. Create a PDFs directory in assets. Rename the PDF document you want to display in your application to document.pdf, and place it in the PDFs directory. You can use this demo document as an example.

  2. Specify the assets directory in pubspec.yaml:

    # The following section is specific to Flutter.
    flutter:
    +  assets:
    +    - PDFs/
    ...

  3. Import the PSPDFKit package:

    import 'package:pspdfkit_flutter/pspdfkit_flutter.dart';

  4. Display a PDF document inside your Flutter app:

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

  5. Run the app:

    Terminal window
    flutter run

Troubleshooting

Facing issues?