PDF creation with Flutter

When your are building a mobile app you may be need to create a detail view that doesn’t fit your device size. In such cases you can use a pdf to view your details. Let’s see how to generate a pdf view with your data in flutter.

We can use packages that created by the flutter community to make things easier.

To Get started install following packages in latest versions. These are the versions that I used.

pdf: ^1.3.24
flutter_full_pdf_viewer: ^1.0.6
path_provider: ^1.5.1

Using flutter_full_pdf_viewer create a PdfViewerPage for a given path as follows.

Next you can create your pdf content. ‘package:pdf/widgets.dart’ will provide a set of widgets to create the content of the pdf. As well as paragraphs and tables with static contents, you can also generate a pdf for the data from an api request. All the widgets from pdf/widgets are not same as material widgets. You can dig in to these widgets to see what these widgets can do and what are the differences.

If it’s only one page you can use like this.

pdf.addPage(Page(
      pageFormat: PdfPageFormat.a4,
      build: (Context context) {
        return Center(
          child: Text("PDF Demo"),
        ); // Center
      }));

To save and open the pdf add the following code line inside the reportView. And also import material.dart to use the Navigator. If you install above packages after you run the project, you need to re run the project, as the packages won’t work properly for the hot reload or hot restart.

Call the PDF view for a on click function and see the view. Apply content changes and UI changes to the view.

You will get this view!!!

You can find the full code from following link.

https://github.com/manee92/FlutterDemo/tree/master/lib/screens/pdf_creation