FlutterMobile

PDF with Flutter – Part 1

By 5 June 2020 June 8th, 2020 No Comments

PDF with Flutter – Part 1

Sharing is caring!

PDF with Flutter – Part 1

As we know, Google has provide the Flutter framework for X-platform application development, including for both mobile and web. I was working on the project where generating the PDF from given data is one of the vital tasks in that. Not only generating a pdf, but also viewing it is of same importance. So first, we will look into how to create PDF in flutter, then how can we view it in mobile and web.

Creating a PDF in Flutter

The package pdf let us create a PDF with ease. You can find the info related to package installation here.

The important thing to note here is widgets provided by the pdf package and the usual widgets from material package are conflicting:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid3187411C-E247-7345-8454-A1AC4A3E2C17.png

So when you have both material and pdf package imported, you need to use ‘as’ for one of the import directive. Then you can access it like shown in below screenshot:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid0B1AD57C-A857-1E43-9956-C07F2313B4C6.png

But having all the tens or hundreds of widgets accessed with ‘pdf.’ Is bad idea. So we go ahead and create our helper class to deal with PDF Generation.

PdfGenerator Class:

We prevent to import Material and Cupertino or any other package in this class that might be conflicting with the Pdf package.

It takes just 3 steps to generate pdf:

  1. Create a blank document.
/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid91B32322-BD46-1C4A-94DA-0322A6A1A72C.png
  1. Add page or pages to blank document. Use:

Page – for single page pdf

Multipage – if you want more than one page, good for dynamic data such as list.

Avoid use of ListView. Instead you just need to put widget directly inside Multipage build context.

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidE4CEF729-CBD4-4F4E-92ED-7E5CD711F1D4.png
  1. Save the doc and get your PDF as bytes array.
/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid0D790B74-B0C2-C240-AE45-B39C4529EBEE.png

Following code illustrate the sample use case of pdf generation:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid97A4CE88-016E-BD42-93F1-802AE4A053E2.png

Viewing a generated PDF in Mobile

We a file in mobile is easy with two packages: path_provider and open_file

We also use File class from dart:io package as mobile is concerned.

So we have 3 new imports:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid574DE9EA-BDFF-1746-8C43-B3B01211AFD3.png

 Now it takes just 4 lines of code to view pdf on mobile:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid9E034B54-9455-BD4A-8D5C-181FF4ADD605.png

 Call the Function:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid882E412E-2E32-C94D-BC3B-379FE89ABE37.png

Finally, call the PdfGenerator from any other route in your app to see the output:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid882E412E-2E32-C94D-BC3B-379FE89ABE37.png

Output:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid714D2A77-1734-8846-8A58-4A745614D69F.png

Viewing the generated pdf on web need to handle differently. Please have a look at part 2 of this article where I shared my experience for opening  a pdf bytes array on flutter web.

Leave a Reply

Get started with Bloom