How to create pdf and review in flutter

Question

I'm trying to create pdf and review it.

I applied pdf plugin for creating the pdf , path_provider plugin for save the pdf to the device's storage and flutter_full_pdf_viewer plugin for view the pdf.

I have followed create-a-pdf-in-flutter. But getting errors in the code if I try to import with import 'package:pdf/widgets.dart'; , material element isn't working import 'package:flutter/material.dart'; .

What am I doing wrong?

Code:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:pdf/pdf.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdfdemo/pages/pdf_viewer.dart';
//import 'package:pdf/widgets.dart'

Variable:

final pdf = Document();

Creating pdf file page:

return Scaffold(
      appBar: AppBar(title: Text("PDF CREATE"),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.save),
          onPressed: () => savePdfFile(),
        )
      ],),
      body: pdf.addPage(Page(
      pageFormat: PdfPageFormat.a4,
      build: (BuildContext context) {
        return Center(
          child: Text("Hello Flutter"),
        );
      })),
    );

Saving pdf file to the device's location:

savePdfFile()async{
    final dir = await getExternalStorageDirectory();
    print("Directoryyyyyyyyy:${dir.path}");
    final String path = "${dir.path}/example.pdf";
    final file = File(path);
    await file.writeAsBytes(pdf.save());
     Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => PgfViewerPage(path: path))
    );
  }

Answer 1

The Problem in your code is that you are using the material library and the PDF library at the same time. The Widgets that are provided by the PDF plugin dont work in the regular Scaffold from flutter. You build your PDF with them like they are showing in the example. To get the PDF file you need to generate it first and then pass it to the screen where you wanna display it.

Try it like this, it worked for me

        Future<File> createPDF(){
         final Document pdf = Document();
            pdf.addPage(
                //Your PDF design here with the widget system of the plugin
MultiPage(
      pageFormat:
          PdfPageFormat.letter.copyWith(marginBottom: 1.5 * PdfPageFormat.cm),
      crossAxisAlignment: CrossAxisAlignment.start,
      theme: Theme(
        tableHeader: TextStyle(fontSize: 8.0),
        tableCell: TextStyle(fontSize: 8.0),
      ),
      header: (Context context) {
        if (context.pageNumber == 1) {
          return null;
        }
        return Container(
            alignment: Alignment.centerRight,
            margin: const EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
            padding: const EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
            decoration: const BoxDecoration(
                border:
                    BoxBorder(bottom: true, width: 0.5, color: PdfColors.grey)),
            child: Text('VCR',
                style: Theme.of(context)
                    .defaultTextStyle
                    .copyWith(color: PdfColors.grey)));
      },
    );


        output = await getTemporaryDirectory();
          final file = File('${output.path}/example.pdf');
          file.writeAsBytesSync(pdf.save());
        return file;
        }

After you created the PDF display it in a scaffold like this:

import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';


    class PDFScreen extends StatelessWidget {
      final String pathPDF;
      PDFScreen({this.pathPDF});

      @override
      Widget build(BuildContext context) {
        return PDFViewerScaffold(
            appBar: AppBar(
              title: Text("Document"),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {},
                ),
              ],
            ),
            path: pathPDF);
      }
    }

the pathPDf you get from the first function if you call file.absolute.path

IMPORTANT: the function and the PDFScreen must be in separate files!! Where you implement the function for generating the PDF you MUST NOT import 'package:flutter/material.dart';

hope this helps