How to create pdf and review in flutter How to create pdf and review in flutter dart dart

How to create pdf and review in flutter


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 pluginMultiPage(      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


import 'package:image_gallery_saver/image_gallery_saver.dart';import 'package:intl/intl.dart' as intl;import 'package:permission_handler/permission_handler.dart';import 'package:screenshot/screenshot.dart';import 'dart:typed_data';import 'package:syncfusion_flutter_pdf/pdf.dart';import 'package:path_provider/path_provider.dart';import 'package:open_file/open_file.dart'; // Will take screenshot of the widget and save in Unit8List and create pdf of //Unit8List    //paste this function where needed    openPDFofSS();    //Add controller     ScreenshotController screenshotController = ScreenshotController();    //define controller before in widget as    Screenshot(  controller: screenshotController,  child: Text("replace child with the widget you want to convert in pdf"),),        // paste these function           Future<void> openPDFofSS() async {        await screenshotController.capture().then((Uint8List image) {          //Capture Done          setState(() {            pdfLoading = true;            //save screenshot into Uint8List image            _imageFile = image;            //convert Unit8List image into PDF            _convertImageToPDF();            saveImage(_imageFile);          });        }).catchError((onError) {          print(onError);        });      }              Future<void> _convertImageToPDF() async {        //Create the PDF document        PdfDocument document = PdfDocument();        //Add the page        PdfPage page = document.pages.add();        //Load the image.        final PdfImage image = PdfBitmap(_imageFile);        //draw image to the first page        page.graphics.drawImage(            image, Rect.fromLTWH(-20, -20, page.size.width - 50, page.size.height));        //Save the docuemnt        List<int> bytes = document.save();        //Dispose the document.        document.dispose();        //Get external storage directory        Directory directory = await getApplicationDocumentsDirectory();        //Get directory path        String path = directory.path;        //Create an empty file to write PDF data        File file = File('$path/Output.pdf');            //Write PDF data        await file.writeAsBytes(bytes, flush: true);        print(path);        //Open the PDF document in mobile        OpenFile.open('$path/Output.pdf');        setState(() {          pdfLoading = false;        });      }      Future<String> saveImage(Uint8List image) async {        await [Permission.storage].request();        final result = await ImageGallerySaver.saveImage(image, name: 'autosmart');        return result['filePath'];      }