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. So we will create a PDF with text and images in flutter.

The PDF document is independent of application software, hardware as well as Operating System and it is helpful to create invoice, online resume, printing tickets and many more applications are there.

You may also check our flutter app development services.

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 2	pdf: ^3.9.0 printing: ^5.4.2

pdf :- The Pdf creation library is simple to use and offer Widgets system similar to Flutter, It can create a full multi-pages document with graphics, images, and text.

printing :- The Printing plugin that allows Flutter apps to generate and print documents to compatible printers on Android, iOS, macOS, Windows, and Linux, as well as web print.

Code to Create User interface

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 :-

Code to Preview and print PDF

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.

Output

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about create PDF in Flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.

Happy Learning ✍️

You can also check create pdf document in swift.

References

https://blog.logrocket.com/how-create-pdfs-flutter/

https://www.geeksforgeeks.org/flutter-simple-pdf-generating-app/

Afzal Mehndi 24 April 2023

. . .

Discuss on Helpdesk

Create PDF with text and images in Flutter

Implementation

Code to Create User interface

Preview of the UI :-

Code to Preview and print PDF

Output

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!