Create PDF with text and images in Flutter

PDF stands for “portable document format”. Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed, also this is helpful to create invoice, online resume, printing tickets and many more applications are there. So let’s create PDF in flutter with text and images.

Implementation

First Create a new flutter project and then add following dependency packages in pubspec.yaml file.

 pdf: ^3.9.0
 printing: ^5.4.2

1	pdf: ^3.9.0

pdf :- For latest dependency and official documentation refer here.

printing :- For latest dependency and official documentation refer here.

Create the Stateless (CreatePdfMainPage) Widget and call from main.dart by the following code.

String text = "Your text to display below image";

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Articles page"),),
      body: Column(
        children: [
          Image.asset("assets/phone.png"),
          Text(text),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context){
            return  PdfPreviewPage(text);
          }));
        },
        child: const Icon(Icons.picture_as_pdf_sharp),
      ),
    );
  }

String text = "Your text to display below image";

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text("Articles page"),),

body: Column(

children: [

Image.asset("assets/phone.png"),

Text(text),

floatingActionButton: FloatingActionButton(

onPressed: (){

Navigator.of(context).push(MaterialPageRoute(builder: (context){

return PdfPreviewPage(text);

}));

child: const Icon(Icons.picture_as_pdf_sharp),

);

}

FloatingActionButton navigate to PDF preview page when user click on it.

Image.assets :- add image from the local directory, to use assets image add your image path in puspec.yaml file.

Preview of the UI :-

Lastly create a new stateless widget to preview and print the PDF (where the page is navigated after clicking on floating action button) and import the packages in this Preview page :-

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';

import 'package:pdf/pdf.dart';

import 'package:pdf/widgets.dart' as pw;

import 'package:printing/printing.dart';

class PdfPreviewPage extends StatelessWidget {
  String? text;
  PdfPreviewPage(this.text, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PDF Preview'),
      ),
      body: PdfPreview(
        build: (context) => makePdf(),
      ),
    );
  }

  Future<Uint8List> makePdf() async {
    final pdf = pw.Document();
    final ByteData bytes = await rootBundle.load('assets/phone.png');
    final Uint8List byteList = bytes.buffer.asUint8List();
    pdf.addPage(
        pw.Page(
            margin: const pw.EdgeInsets.all(10),
            pageFormat: PdfPageFormat.a4,
            build: (context) {
              return pw.Column(
                crossAxisAlignment: pw.CrossAxisAlignment.start,
                  children: [
                    pw.Row(
                      mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
                      children: [
                        pw.Header(text: "About Cat", level: 1),
                        pw.Image(pw.MemoryImage(byteList), fit: pw.BoxFit.fitHeight, height: 100, width: 100)
                      ]
                    ),
                    pw.Divider(borderStyle: pw.BorderStyle.dashed),
                    pw.Paragraph(text: text),
                  ]
              );
            }
        ));
    return pdf.save();
  }
}

class PdfPreviewPage extends StatelessWidget {

String? text;

PdfPreviewPage(this.text, {Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('PDF Preview'),

body: PdfPreview(

build: (context) => makePdf(),

);

}

Future<Uint8List> makePdf() async {

final pdf = pw.Document();

final ByteData bytes = await rootBundle.load('assets/phone.png');

final Uint8List byteList = bytes.buffer.asUint8List();

pdf.addPage(

pw.Page(

margin: const pw.EdgeInsets.all(10),

pageFormat: PdfPageFormat.a4,

build: (context) {

return pw.Column(

crossAxisAlignment: pw.CrossAxisAlignment.start,

children: [

pw.Row(

mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,

children: [

pw.Header(text: "About Cat", level: 1),

pw.Image(pw.MemoryImage(byteList), fit: pw.BoxFit.fitHeight, height: 100, width: 100)

]

pw.Divider(borderStyle: pw.BorderStyle.dashed),

pw.Paragraph(text: text),

]

);

}

));

return pdf.save();

}

Uint8List :- basically It is the List of integers where the values are in the List is 1 Byte or 8-Bits.

makePdf() :- asynchronous method that make the PDF preview layout and return the List of unsigned integers bytes (Uint8List), and following method performed :-

Inside body of scaffold PdfPreview() Widget used to show the preview and printing feature of doc.
create a variable as pdf using pw.Document()
load assets image with the help of rootBundle.load(“image path”)
pw.Page() create a page that accept build property to build the layout, using pw.Column(), pw.Row(), pw.Text, pw.Header() create the heading and level (range from 1-5) property defines the heading boldness and font size, these are used to design the preview layout.