PDF stands for Portable Document Format and is a popular format used when you need to save files that cannot be modified but still need to be easily shared and printed.
So for example let's say you have a document in hard copy and you want a PDF version of it. One way is to type the document letter by letter then convert the text or MS Word document to PDF online.
Another way is to simply screenshot the document with your camera then use the code we will show you here to convert the images to PDF. The choice is yours.
Use pdf plugin
pdf is a flutter package is divided into two parts:
- a low-level Pdf creation library that takes care of the pdf bits generation.
- a Widgets system similar to Flutter's, for easy high-level Pdf creation.
It can create a full multi-pages document with graphics, images, and text using TrueType fonts. With the ease of use you already know.
If you want to print you can use the printing package here.
Step 1: Install pdf
Declare this package in your pubspec.yaml as follows:
dependencies:
pdf: ^3.6.0Then sync.
Alternatively you can install it from the terminal using the following statement:
flutter pub add pdfStep 2: Write Code
Start by Importing the following packages in your code:
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;Then instantiate the Document as follows:
final pdf = pw.Document();Then add a page to the Document. Specify page format of the document, then build the content as well as it's position:
pdf.addPage(pw.Page(
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(
child: pw.Text("Hello World"),
); // Center
})); // PageIf you want to load an image from a file, start by instantiating a MemoryImage, then read the file contents:
final image = pw.MemoryImage(
File('test.webp').readAsBytesSync(),
);Then add the image as the content of our PDF document as follows:
pdf.addPage(pw.Page(build: (pw.Context context) {
return pw.Center(
child: pw.Image(image),
); // Center
})); // PageIf you want to use a ttf(TrueType Font):
final Uint8List fontData = File('open-sans.ttf').readAsBytesSync();
final ttf = pw.Font.ttf(fontData.buffer.asByteData());
pdf.addPage(pw.Page(
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(
child: pw.Text('Hello World', style: pw.TextStyle(font: ttf, fontSize: 40)),
); // Center
})); // PageTo save the PDF document as a file:
// On Flutter, use the [path_provider](https://pub.dev/packages/path_provider) library:
// final output = await getTemporaryDirectory();
// final file = File("${output.path}/example.pdf");
final file = File("example.pdf");
await file.writeAsBytes(await pdf.save());Examples
Simple Dart Example
Here's a simple Dart PDF example:
main.dart
import 'dart:io';
import 'package:pdf/widgets.dart' as pw;
Future<void> main() async {
final pdf = pw.Document();
pdf.addPage(
pw.Page(
build: (pw.Context context) => pw.Center(
child: pw.Text('Hello World!'),
),
),
);
final file = File('example.pdf');
await file.writeAsBytes(await pdf.save());
}Invoice Example
Here's an example of how to use this package to construct a PDF invoice:
invoice.dart
import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';
import '../data.dart';
Future<Uint8List> generateInvoice(
PdfPageFormat pageFormat, CustomData data) async {
final lorem = pw.LoremText();
final products = <Product>[
Product('19874', lorem.sentence(4), 3.99, 2),
Product('98452', lorem.sentence(6), 15, 2),
Product('28375', lorem.sentence(4), 6.95, 3),
Product('95673', lorem.sentence(3), 49.99, 4),
Product('23763', lorem.sentence(2), 560.03, 1),
Product('55209', lorem.sentence(5), 26, 1),
Product('09853', lorem.sentence(5), 26, 1),
Product('23463', lorem.sentence(5), 34, 1),
Product('56783', lorem.sentence(5), 7, 4),
Product('78256', lorem.sentence(5), 23, 1),
Product('23745', lorem.sentence(5), 94, 1),
Product('07834', lorem.sentence(5), 12, 1),
Product('23547', lorem.sentence(5), 34, 1),
Product('98387', lorem.sentence(5), 7.99, 2),
];
final invoice = Invoice(
invoiceNumber: '982347',
products: products,
customerName: 'Abraham Swearegin',
customerAddress: '54 rue de Rivoli\n75001 Paris, France',
paymentInfo:
'4509 Wiseman Street\nKnoxville, Tennessee(TN), 37929\n865-372-0425',
tax: .15,
baseColor: PdfColors.teal,
accentColor: PdfColors.blueGrey900,
);
return await invoice.buildPdf(pageFormat);
}
class Invoice {
Invoice({
required this.products,
required this.customerName,
required this.customerAddress,
required this.invoiceNumber,
required this.tax,
required this.paymentInfo,
required this.baseColor,
required this.accentColor,
});
final List<Product> products;
final String customerName;
final String customerAddress;
final String invoiceNumber;
final double tax;
final String paymentInfo;
final PdfColor baseColor;
final PdfColor accentColor;
static const _darkColor = PdfColors.blueGrey800;
static const _lightColor = PdfColors.white;
PdfColor get _baseTextColor => baseColor.isLight ? _lightColor : _darkColor;
PdfColor get _accentTextColor => baseColor.isLight ? _lightColor : _darkColor;
double get _total =>
products.map<double>((p) => p.total).reduce((a, b) => a + b);
double get _grandTotal => _total * (1 + tax);
String? _logo;
String? _bgShape;
Future<Uint8List> buildPdf(PdfPageFormat pageFormat) async {
// Create a PDF document.
final doc = pw.Document();
_logo = await rootBundle.loadString('assets/logo.svg');
_bgShape = await rootBundle.loadString('assets/invoice.svg');
// Add page to the PDF
doc.addPage(
pw.MultiPage(
pageTheme: _buildTheme(
pageFormat,
await PdfGoogleFonts.robotoRegular(),
await PdfGoogleFonts.robotoBold(),
await PdfGoogleFonts.robotoItalic(),
),
header: _buildHeader,
footer: _buildFooter,
build: (context) => [
_contentHeader(context),
_contentTable(context),
pw.SizedBox(height: 20),
_contentFooter(context),
pw.SizedBox(height: 20),
_termsAndConditions(context),
],
),
);
// Return the PDF file content
return doc.save();
}
pw.Widget _buildHeader(pw.Context context) {
return pw.Column(
children: [
pw.Row(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: [
pw.Expanded(
child: pw.Column(
children: [
pw.Container(
height: 50,
padding: const pw.EdgeInsets.only(left: 20),
alignment: pw.Alignment.centerLeft,
child: pw.Text(
'INVOICE',
style: pw.TextStyle(
color: baseColor,
fontWeight: pw.FontWeight.bold,
fontSize: 40,
),
),
),
pw.Container(
decoration: pw.BoxDecoration(
borderRadius:
const pw.BorderRadius.all(pw.Radius.circular(2)),
color: accentColor,
),
padding: const pw.EdgeInsets.only(
left: 40, top: 10, bottom: 10, right: 20),
alignment: pw.Alignment.centerLeft,
height: 50,
child: pw.DefaultTextStyle(
style: pw.TextStyle(
color: _accentTextColor,
fontSize: 12,
),
child: pw.GridView(
crossAxisCount: 2,
children: [
pw.Text('Invoice #'),
pw.Text(invoiceNumber),
pw.Text('Date:'),
pw.Text(_formatDate(DateTime.now())),
],
),
),
),
],
),
),
pw.Expanded(
child: pw.Column(
mainAxisSize: pw.MainAxisSize.min,
children: [
pw.Container(
alignment: pw.Alignment.topRight,
padding: const pw.EdgeInsets.only(bottom: 8, left: 30),
height: 72,
child:
_logo != null ? pw.SvgImage(svg: _logo!) : pw.PdfLogo(),
),
// pw.Container(
// color: baseColor,
// padding: pw.EdgeInsets.only(top: 3),
// ),
],
),
),
],
),
if (context.pageNumber > 1) pw.SizedBox(height: 20)
],
);
}
pw.Widget _buildFooter(pw.Context context) {
return pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
crossAxisAlignment: pw.CrossAxisAlignment.end,
children: [
pw.Container(
height: 20,
width: 100,
child: pw.BarcodeWidget(
barcode: pw.Barcode.pdf417(),
data: 'Invoice# $invoiceNumber',
drawText: false,
),
),
pw.Text(
'Page ${context.pageNumber}/${context.pagesCount}',
style: const pw.TextStyle(
fontSize: 12,
color: PdfColors.white,
),
),
],
);
}
pw.PageTheme _buildTheme(
PdfPageFormat pageFormat, pw.Font base, pw.Font bold, pw.Font italic) {
return pw.PageTheme(
pageFormat: pageFormat,
theme: pw.ThemeData.withFont(
base: base,
bold: bold,
italic: italic,
),
buildBackground: (context) => pw.FullPage(
ignoreMargins: true,
child: pw.SvgImage(svg: _bgShape!),
),
);
}
pw.Widget _contentHeader(pw.Context context) {
return pw.Row(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: [
pw.Expanded(
child: pw.Container(
margin: const pw.EdgeInsets.symmetric(horizontal: 20),
height: 70,
child: pw.FittedBox(
child: pw.Text(
'Total: ${_formatCurrency(_grandTotal)}',
style: pw.TextStyle(
color: baseColor,
fontStyle: pw.FontStyle.italic,
),
),
),
),
),
pw.Expanded(
child: pw.Row(
children: [
pw.Container(
margin: const pw.EdgeInsets.only(left: 10, right: 10),
height: 70,
child: pw.Text(
'Invoice to:',
style: pw.TextStyle(
color: _darkColor,
fontWeight: pw.FontWeight.bold,
fontSize: 12,
),
),
),
pw.Expanded(
child: pw.Container(
height: 70,
child: pw.RichText(
text: pw.TextSpan(
text: '$customerName\n',
style: pw.TextStyle(
color: _darkColor,
fontWeight: pw.FontWeight.bold,
fontSize: 12,
),
children: [
const pw.TextSpan(
text: '\n',
style: pw.TextStyle(
fontSize: 5,
),
),
pw.TextSpan(
text: customerAddress,
style: pw.TextStyle(
fontWeight: pw.FontWeight.normal,
fontSize: 10,
),
),
])),
),
),
],
),
),
],
);
}
pw.Widget _contentFooter(pw.Context context) {
return pw.Row(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: [
pw.Expanded(
flex: 2,
child: pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: [
pw.Text(
'Thank you for your business',
style: pw.TextStyle(
color: _darkColor,
fontWeight: pw.FontWeight.bold,
),
),
pw.Container(
margin: const pw.EdgeInsets.only(top: 20, bottom: 8),
child: pw.Text(
'Payment Info:',
style: pw.TextStyle(
color: baseColor,
fontWeight: pw.FontWeight.bold,
),
),
),
pw.Text(
paymentInfo,
style: const pw.TextStyle(
fontSize: 8,
lineSpacing: 5,
color: _darkColor,
),
),
],
),
),
pw.Expanded(
flex: 1,
child: pw.DefaultTextStyle(
style: const pw.TextStyle(
fontSize: 10,
color: _darkColor,
),
child: pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: [
pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
children: [
pw.Text('Sub Total:'),
pw.Text(_formatCurrency(_total)),
],
),
pw.SizedBox(height: 5),
pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
children: [
pw.Text('Tax:'),
pw.Text('${(tax * 100).toStringAsFixed(1)}%'),
],
),
pw.Divider(color: accentColor),
pw.DefaultTextStyle(
style: pw.TextStyle(
color: baseColor,
fontSize: 14,
fontWeight: pw.FontWeight.bold,
),
child: pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
children: [
pw.Text('Total:'),
pw.Text(_formatCurrency(_grandTotal)),
],
),
),
],
),
),
),
],
);
}
pw.Widget _termsAndConditions(pw.Context context) {
return pw.Row(
crossAxisAlignment: pw.CrossAxisAlignment.end,
children: [
pw.Expanded(
child: pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: [
pw.Container(
decoration: pw.BoxDecoration(
border: pw.Border(top: pw.BorderSide(color: accentColor)),
),
padding: const pw.EdgeInsets.only(top: 10, bottom: 4),
child: pw.Text(
'Terms & Conditions',
style: pw.TextStyle(
fontSize: 12,
color: baseColor,
fontWeight: pw.FontWeight.bold,
),
),
),
pw.Text(
pw.LoremText().paragraph(40),
textAlign: pw.TextAlign.justify,
style: const pw.TextStyle(
fontSize: 6,
lineSpacing: 2,
color: _darkColor,
),
),
],
),
),
pw.Expanded(
child: pw.SizedBox(),
),
],
);
}
pw.Widget _contentTable(pw.Context context) {
const tableHeaders = [
'SKU#',
'Item Description',
'Price',
'Quantity',
'Total'
];
return pw.Table.fromTextArray(
border: null,
cellAlignment: pw.Alignment.centerLeft,
headerDecoration: pw.BoxDecoration(
borderRadius: const pw.BorderRadius.all(pw.Radius.circular(2)),
color: baseColor,
),
headerHeight: 25,
cellHeight: 40,
cellAlignments: {
0: pw.Alignment.centerLeft,
1: pw.Alignment.centerLeft,
2: pw.Alignment.centerRight,
3: pw.Alignment.center,
4: pw.Alignment.centerRight,
},
headerStyle: pw.TextStyle(
color: _baseTextColor,
fontSize: 10,
fontWeight: pw.FontWeight.bold,
),
cellStyle: const pw.TextStyle(
color: _darkColor,
fontSize: 10,
),
rowDecoration: pw.BoxDecoration(
border: pw.Border(
bottom: pw.BorderSide(
color: accentColor,
width: .5,
),
),
),
headers: List<String>.generate(
tableHeaders.length,
(col) => tableHeaders[col],
),
data: List<List<String>>.generate(
products.length,
(row) => List<String>.generate(
tableHeaders.length,
(col) => products[row].getIndex(col),
),
),
);
}
}
String _formatCurrency(double amount) {
return '\$${amount.toStringAsFixed(2)}';
}
String _formatDate(DateTime date) {
final format = DateFormat.yMMMd('en_US');
return format.format(date);
}
class Product {
const Product(
this.sku,
this.productName,
this.price,
this.quantity,
);
final String sku;
final String productName;
final double price;
final int quantity;
double get total => price * quantity;
String getIndex(int index) {
switch (index) {
case 0:
return sku;
case 1:
return productName;
case 2:
return _formatCurrency(price);
case 3:
return quantity.toString();
case 4:
return _formatCurrency(total);
}
return '';
}
}Reference
Here are the reference links:
| Number | Link |
|---|---|
| 1. | Download Examples |
| 2. | Read more |
Let's look at more isolated examples:
Example: Flutter Pick and Convert Images to PDF
This is piece looks at how to pick or select images from the device using an imagepicker and convert them to PDF. We look at examples in a step by step manner.
Step 1: Install Necessary dependencies
You need some dependencies like the imagepicker and path provideer. We install them. Move to your pubspec.yaml and declare them as follows:
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.0
# More Dependencies
pdf: ^2.1.0
image_picker: ^0.6.7+21
flushbar: ^1.10.4
path_provider: ^1.6.27Then sync to fetch them.
Step 2: Add Permissions
The next step is to add the necessary permissions. For example we want to pick images from the device, thus we need the permission to read external storage. Moreover, we need to save the converted PDF file, thus we need the permission to write onto the external storage.
Go to /Android/app/src/main/AndroidManifest.xml and add the permissions as follows:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.image_to_pdf_project">
...
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
....
</manifest>Step 3: Write Code
Go to your main.dart file and add imports as follows:
import 'dart:io';
import 'package:flushbar/flushbar.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;Create main function, which is the starting point of this app, the app is run using the runApp() function:
main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}Now create a StatefulWidget MyApp class;
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}Now come and create the State class for the app StatefulWidget class:
class _MyAppState extends State<MyApp> {Being our State class, we will define three instance fields which will be maintaining our State, an ImagePicker object, a Document object and list to hold our files:
final picker = ImagePicker();
final pdf = pw.Document();
List<File> _image = [];Now come and build our widget, constructing the AppBar with the title as well as an action button and a FloatingActionButton , as well as the body which will render the image:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("image to pdf"),
actions: [
IconButton(
icon: Icon(Icons.picture_as_pdf),
onPressed: () {
createPDF();
savePDF();
})
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: getImageFromGallery,
),
body: _image != null
? ListView.builder(
itemCount: _image.length,
itemBuilder: (context, index) => Container(
height: 400,
width: double.infinity,
margin: EdgeInsets.all(8),
child: Image.file(
_image[index],
fit: BoxFit.cover,
)),
)
: Container(),
);
}Also create an async function which will allow us obtain or pick image from the gallery:
getImageFromGallery() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
_image.add(File(pickedFile.path));
} else {
print('No image selected');
}
});
}Then below is the function to convert each image to a PDF file:
createPDF() async {
for (var img in _image) {
final image = pw.MemoryImage(img.readAsBytesSync());
pdf.addPage(pw.Page(
pageFormat: PdfPageFormat.a4,
build: (pw.Context contex) {
return pw.Center(child: pw.Image(image));
}));
}
}After converting the image to PDF, we need to save it to a file. The function below will be responsible for that:
savePDF() async {
try {
final dir = await getExternalStorageDirectory();
final file = File('${dir.path}/filename.pdf');
await file.writeAsBytes(await pdf.save());
showPrintedMessage('success', 'saved to documents');
} catch (e) {
showPrintedMessage('error', e.toString());
}
}The following function will show the messages
showPrintedMessage(String title, String msg) {
Flushbar(
title: title,
message: msg,
duration: Duration(seconds: 3),
icon: Icon(
Icons.info,
color: Colors.blue,
),
)..show(context);
}
}
Here is the full code:
main.dart
import 'dart:io';
import 'package:flushbar/flushbar.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final picker = ImagePicker();
final pdf = pw.Document();
List<File> _image = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("image to pdf"),
actions: [
IconButton(
icon: Icon(Icons.picture_as_pdf),
onPressed: () {
createPDF();
savePDF();
})
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: getImageFromGallery,
),
body: _image != null
? ListView.builder(
itemCount: _image.length,
itemBuilder: (context, index) => Container(
height: 400,
width: double.infinity,
margin: EdgeInsets.all(8),
child: Image.file(
_image[index],
fit: BoxFit.cover,
)),
)
: Container(),
);
}
getImageFromGallery() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
_image.add(File(pickedFile.path));
} else {
print('No image selected');
}
});
}
createPDF() async {
for (var img in _image) {
final image = pw.MemoryImage(img.readAsBytesSync());
pdf.addPage(pw.Page(
pageFormat: PdfPageFormat.a4,
build: (pw.Context contex) {
return pw.Center(child: pw.Image(image));
}));
}
}
savePDF() async {
try {
final dir = await getExternalStorageDirectory();
final file = File('${dir.path}/filename.pdf');
await file.writeAsBytes(await pdf.save());
showPrintedMessage('success', 'saved to documents');
} catch (e) {
showPrintedMessage('error', e.toString());
}
}
showPrintedMessage(String title, String msg) {
Flushbar(
title: title,
message: msg,
duration: Duration(seconds: 3),
icon: Icon(
Icons.info,
color: Colors.blue,
),
)..show(context);
}
}
Reference
Below are the reference links:
| Number | Link |
|---|---|
| 1. | Download Code |
| 2. | Follow code author |