How to open a PDF from a remote URL in Flutter

Our Flutter PDF editor provides a wide range of features for working with PDF documents and images. However, one thing Nutrient Flutter SDK doesn’t currently support is the ability to load PDF documents from a remote URL. So in this blog post, you’ll learn how to download and display PDFs from a remote URL in your Flutter app.

The implementation

To get started, you’ll add the pspdfkit_flutter(opens in a new tab) package to your Flutter project. Then, you’ll add the http(opens in a new tab) package for downloading a PDF document over an HTTP connection, along with the path_provider(opens in a new tab) for accessing the local storage paths.

To do this, add the following dependencies to your pubspec.yaml file:

dependencies:
  ...
  pspdfkit_flutter: ^3.5.0
  http: ^0.13.5
  path_provider: ^2.0.13

These packages can also be installed using this command:

$ flutter pub add pspdfkit_flutter http path_provider

Next, run flutter pub get. Then, import the dependencies into your code as follows:

import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:pspdfkit_flutter/pspdfkit.dart';

Downloading and displaying

With the dependencies installed, you’re now ready to download and display a PDF document from a remote URL, as shown in the code below:

// The URL of the PDF you want to download.
   final pdfUrl = 'https://pspdfkit.com/downloads/pspdfkit-flutter-quickstart-guide.pdf';

   // Fetch the PDF from the URL.
   final pdfResponse = await http.get(pdfUrl);

   // Check the response status code. If it's not `200` (OK), throw an error.
   if (pdfResponse.statusCode != 200) {
   throw Exception('Failed to download PDF');
   }

  Directory tempDir = await getTemporaryDirectory();
   final dirExists = await tempDir.exists();

   if (!dirExists) {
     await tempDir.create();
   }

   String tempPath = tempDir.path;

   // Create a file to store the PDF.
   final pdfFile = File('$tempPath/my-pdf.pdf');

   // Write the PDF data to the file.
   await pdfFile.writeAsBytes(pdfResponse.bodyBytes);

   // Use the Nutrient `PdfViewer` to display the PDF document.
   final pdfDocument = await Pspdfkit.present(pdfFile.path);

In the code above, you first define the URL for the PDF you want to download. Then you use the http.get() method to fetch the PDF from that URL, and you check the response status code to make sure the download was successful.

If the download was successful, you create a new File object and use the writeAsBytes() method to save the PDF data to that file. Finally, you use Nutrient’s Pspdfkit.present() method to open the PDF file, which will be loaded in a native PdfViewer.

Conclusion

This post covered how to download and display PDFs from a remote URL in your Flutter app. Nutrient also offers Instant document synchronization, which allows real-time collaboration on PDF documents across multiple platforms.

To learn more about Nutrient Instant document synchronization and a wide range of other features, check out the official Nutrient Flutter SDK documentation. There, you’ll find detailed guides, an API reference, and code examples to help you get started with Nutrient Flutter SDK and build amazing PDF experiences in your Flutter apps.

FAQ