How to create pdf and review in flutter - pdf

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

Answer 2

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'];
}