Create a PDF Document in Flutter

hi everyone welcome to this video on getting started with the syncfusion flutter pdf library in this video you will see how to add the pdf library to a flutter project you will learn how to create a pdf document and add text images and tables to it you will also see how to save the file and download the document in mobile and in the web first open the vs code editor you can also use one of the preferred ides such as android studio or intellij this computer was already set up with the flutter development environment so i can directly create a new flutter project open the command palette and create a new flutter project choose a folder to create the project within name the project my flutter app vs code creates the flutter project for you first run this application choose the android simulator you can also use the terminal to run the project you can see the application with a button widget at the bottom and a text widget at the center when you click the button the click count is updated in the text widget now let me show you how to add the pdf library in this app and create a pdf document instead of the text and button widgets to do so first import the sync fusion flutter pdf package from the pub.dev website open the pub spec yaml file declare the dependency sync fusion underscore flutter underscore pdf using the latest version when you save the file vs code runs the command flutter pubget to download the package the download is completed now next open the main dot dart file import the pdf.dart library so that you can use the pdf library in this file let's write the pdf related code within the my homepage state class remove the code in the my home page state class for better clarity now i will create a button widget and while clicking on it will create the pdf document and open it override the build method within the build method return a scaffold widget so that you can set the button widget to its body for alignment purposes add the center widget to the center widget's child set the elevated button widget set a display text and set the pressed property with a method name where the pdf creation code will be implemented now we'll implement this create pdf method create a void method create pdf a pdf document type object and then create a pdf page using the add method this will create a page within the document to save as a pdf document first you need to get the document as bytes that is list event then save the file in pdf format and then open it define a list event objects by assigning the documents save method now you can dispose the document to release all the resources used by it to get the path to store the pdf document and to open the file i need to import the packages path underscore provider and open underscore file to launch the pdf document in mobile app let me create a separate file to define the method let's name it as mobile.dart import the packages openunderscorefile.dart and pathunderscoreprovider.dart sorry let me correct the spelling mistake in the package name to create a pdf file import the dart i o package define a new method save and launch file receive the bytes and the file name as parameters create a variable to store the path from the directory using the file class create the pdf file in the path and set the file name then write the bytes to the file now call the open file classes open method by passing the file path in the main.dart file import the mobile.dart to access the save and launch file method in the create pdf method call the save and launch file method by passing the created bytes in file name save the file the hot reload injects the new version of this file into the application in the android emulator click the button allow the app to access the device's media files you can see the generated pdf document with one empty page now let's add text to this page in the create pdf method define an object for this page so that you can add new elements to it to add text in the pdf document use the pages graphics property called the drawstring method and pass the string value you can use the pdf standard font class to set the desired font customize the font family and size as you like save the file you need to go back and click the button again to generate a new pdf document now you can see the provided text in the document next you'll see how to add an image to this document in the project folder we add a folder with an image to load them in the pdf document in the pub spec file import the asset to read the image data define a method that returns you an 8 list import the typed underscore data package to access the you and 8 list class also import the services.dart package and show only the root bundle so you can load the image from the folder define read image data method receive a string parameter to get the image file name to load define an object and assign the byte data from the root bundle's load method pass the folder name with the file name return the image file as a u and 8 list type now in the create pdf method use the graphics draw image method and pass the pdf bitmap object by calling the read image data method pass the image file name as a parameter then provide the area to draw the image also providing the values accordingly so that the image will be drawn following the already provided text save the file and regenerate the pdf document you can see the image following the text next let me show you how to add a table to this document in the create pdf method define a pdf grid object and set three columns set a header to set values for the header cells you can use the cell's property and value property to set the values do the same for the other two column headers then create a new row to add values to the table provide values for each column i'm adding two more rows with data call the grid's draw method by passing the page in bounds here a new page is added so that the grid will be drawn in the second page of the document save the file and regenerate the pdf document you can see the grid drawn in a new page let's change the style of this grid so that the cell values are legible in this view in the pdf grid object set the style property with the pdf grid style object by passing the font with a size add cell padding so that the value looks better save the file you can see the table values more clearly now next let me show you how to save the pdf document in the web stop the application to save the document in the web you need to convert these bytes to base 64 and then you can use an html anchor element to click and save the file so to access the html element import the universal underscore html package to launch the pdf document in web let me create a separate file to define the method let name it as web.dart import the package html.dart import the convert package so that you can convert the bytes to base64. define a method with the same name that was used in mobile.dart file so that you can call the same method to save files in both mobile and web use the anchor element and pass the ref value as data application octet stream and charset with base64 this way browsers can understand the file type append the bytes after converting them to base64 now set the attribute as download and provide a file name then call the click method in the main.dart file import the web.dart package by adding a condition if it is a html library import web.dart otherwise mobile.dart file will be imported in the create pdf method i have already called the method to save and launch the file now all is set choose chrome as the device and run the application this time the save and launch file method will be called from the web.dart package i have already added the chrome debugger extension click the button the pdf document is downloaded now you can see the pdf document that's it let me summarize the main points you saw how to add the syncfusion flutter pdf library to a flutter project you learned how to create a pdf document and add pages text images and tables you also learned how to save the pdf document in mobile and in the web you can download this working example from the github link and documentation link in the video description below you can also check whether you are eligible for our community license which gives you a free license key to use our flutter products if you found this video useful click the like button and subscribe to our channel to get notifications about new videos thanks for watching you

Channel: Syncfusion, Inc

Views: 56,056

Keywords: Syncfusion, Develop, Software, Technology, Developer, Components, flutter, flutter ui widgets, getting started, pdf, file formats, report, document

Id: tMM9ty4Wfq0

Length: 11min 30sec (690 seconds)

Published: Tue Mar 23 2021