Flutter Tutorial - Create PDF With Images & Tables

let's generate pdf documents with images and tables and if you also want to know how to generate text and headers then check out the last tutorial of this video series if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by creating a table for our pdf document and therefore we have here simply two columns and inside of it we can set some data inside if you have already watched my last tutorial you already know that we make use of the pdf package to generate our pages with graphics images and texts therefore let's get started by creating an application with two buttons and if we click on the first button then we want to generate a pdf document with a table and also open it up and therefore we simply create here a new class pdf api where we generate then our table and within this class we create then this method generate table and here inside we create then a pdf document and lastly you also want to save your pdf document so you can define the name of your document and also put here the pdf document inside and now we actually want to fill this pdf document with some data and i don't want to go into detail about the save document method because this is what we have created before and this is then saving our pdf document locally on our storage and secondly we also have created another message to open our file our pdf file again up and show it in a native environment and lastly before we can get started you also need to go to your pop spec jammel file and here you need to include three dependencies first of all the pdf then the pass provider with which we can then save our pdf document locally and also this dependency to open our pdf document again after we have generated it therefore make sure that you put these three under your dependencies inside now that we have completed our setup we can create finally our table with two columns therefore let's go back to the method generate table and here on our pdf document you can add a page to your pdf document which we want to generate and here you simply create then a page object and this comes directly from this package which we have integrated before with which we now generate our pdf document as we have learned in the last tutorial within this build property you can simply return widgets and we want to create a table widget and therefore you need to supply first of all some headers and these are then later displayed here on top so we have two headers name and age and the other ones are our values which we also want to create later so let's start by creating our headers and therefore we simply define here a list with two columns and secondly we want to create our data which is under our header and therefore we create here some user objects which we want to display because our user object have then every time a name and an h and therefore i have already created here a user class with a name and with an age and now we simply create here some users so i create here some names and also some edges and secondly we want to convert these users to our data object therefore i create a data object and we map our users to our data object and this is pretty simple so you simply convert your user object to a list and this list has then also two entries so here's the first entry and here's the second entry so that it exactly matches here with our header because here we also have the first entry and the second entry and lastly we go back to our page where we have our table pdf button and here we also call this pdf api open file and then we put the pdf file inside which we have generated to also open our pdf document up and now we can try it out so i click here on this table pdf button and you see he has then generated our pdf document within table and also with all the values of our users which we have defined next we also want to include images in our pdf document and therefore we have your different kind of forms of images you can place multiple image next to each other or you also can make it rounded or whatever you like to do with your image therefore let's get started by integrating our images by going again to this page and here to our image pdf button and if we click on this button then we want to generate an image and we also want to open this image later up and now we want to create this method to create a pdf document with images within this method we create again a pdf document and we already save it to our local file storage and now we want to create the content of our pdf document therefore i add here again a page and this time we want to create a multi-page and a multi-page returns here a list of widgets instead of a single widget and now we want to create these images for our pdf document therefore i have created here an assets folder and inside of it i have set two images and exactly these images we want to load right now to load and display this image we want to create first of all an svg image and this means that we want to load here first of all the first image and here we simply define then the path to this image so here we define the path to this fruit image and with the statement we basically loaded our image inside of this variable and secondly we display that in our image by displaying it within this svg image widget and secondly we also want to load our jpg image and this works a bit differently so you need to create an image widget and then you create a memory image and now we also want to load our jpeg image therefore you also take again this root bundle to load your file from the assets and you're also defining the past to your file and secondly you also need to convert it here to this bytes list the last thing we need to do is to go to our pubspec jammer file and here we need to include also our assets under our flutter tag inside and this is really important so that we also load these assets which we have included here and now we can try it out so i click here on this image pdf button then he is generating our pdf document and here he is putting then the svg image inside which are our fruits and secondly he is also including then this jpeg image next we also want to look at how we can manipulate our images and display them for example here next to each other or also that we cut here the corners of our image and lastly we will create a background image and on top of it you can then place any other widget text and whatever you like inside so let's get started by displaying multiple images next to each other and this is pretty simple you simply create here a grid view widget what you also would do in flutter and here inside of this grid view widget you place then all these images so we create here three columns with six images and you also need to define here the child aspect ratio otherwise it will not work and will not display our images and now we can try it out and you see that we have here placed all of these images next to each other in three columns and we also display here six images which we have defined here inside and it is also really important to notice that these are not real widgets which we are here placing inside because we import here only this pdf package and if we would also include here for example the flutter sdk then you get here some errors because he's trying to put here these widgets inside and these are then duplicates because we make you use only of these pdf widgets package and therefore it can be that the widgets which you put here inside work a bit differently than from the flutter sdk or that some widgets are not supported however in general you can always work here with everything what you already know in flutter so you can work with containers grid views images and so on to demonstrate that we also can use here more widgets you can for example create again an image which is here this memory image and then you could also wrap here other widgets around for example this clip r rack widget with which you then can create a rounded image and you also can use here these other widgets like center this is also working fine and now if we generate again our pdf document you see we have here this image and this has then 100 pixels in width and we also have made it rounded with this clip r act and we also have centered it within our page furthermore we also want to look at how we can use the our document with and therefore we want to display here this image within the half of our document and this means that we for example create here this time a width and this is then dependable on our current page format and from our page format we can then access the available widths and this is then the width without here the margin on the left side and on the right side which you normally have for pdf documents if you want to have the whole width of your document you also have later here another property which is called width which you also can access in our case we want to display our image here to the half of our available width which might be something here around and then this image will be also centered and therefore to get here the half we simply divide it by two and we also need to create here a page scene and therefore i simply go here up and within our multi page we create here then this page theme and within this page theme you need to define here then your page format so you have your for example a4 or you can also choose the a3 or also other formats and with this we have now here this image which takes here half of our available width and lastly we also want to create an image which is only in the background and on top of it we can then place all of our widgets like texts headers and so on to create background images you need to go to your page theme and here you have a property which is called build background and here inside you need to return then a full page widget and then you can set also a full page background and the inside of it you define then your image so in our case we take here this jpeg image and then we can generate our pdf document again and like you can see we have here our image inside for every page as a background image and you also can set it here to the full width and therefore you also set here this box fit to cover and with this we have every time a background image which has the full width and height if you like you can also define this background image for certain pages so for example only for the first page and not for the other pages and therefore you can check here over your contacts the page number and if it is here the first page then we want to display our image and otherwise we simply want to return here a container and with this you see that this background image is only for the first page and for the other pages we don't have the background image anymore and secondly we also want to define the foreground for our page and therefore we go here back to our multi-page and here inside of our build method we simply can then for example put here a center text inside and we also wrap a container around to give our page this height the available height of one page and with this you see that we have here a sender text within our pdf document for the first page and the first page has then also a height of this available height of one page so we take it here the whole height and center then our text inside of this whole height and by the way if you want to get here this whole source code of this application you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye you

Channel: HeyFlutter․com

Views: 21,989

Keywords: android, flutter, flutter pdf, flutter pdf creation, flutter pdf creator, flutter pdf download, flutter pdf editor, flutter pdf example, flutter pdf generation, flutter pdf generator, flutter pdf tutorial, flutter pdf video, flutter pdf viewer, flutter pdf viewer plugin, flutter pdf viewer tutorial, flutter tutorial, how to create pdf in flutter, how to generate pdf in flutter, ios, pdf, pdf creation in flutter, pdf in flutter

Id: 8j6GKtpRkow

Length: 12min 27sec (747 seconds)

Published: Thu Mar 25 2021