PDF Generator in Flutter - How to create your next Invoice

hello everyone and welcome back to another episode of flutter explained today we want to talk about the pdf package and we want to create a pdf document out of our flutter application for that we create a small demo application where you can add and subtract items from a list after that you click on a button and you create an invoice out of it into a pdf document which is formatted with the new package or with the package pdf which is very closely aligned to the flutter package which is amazing so if you know flutter you are getting very easily into this pdf document you have all the options that you need for creation of a document also for forms like checkboxes text boxes and stuff but also you have the possibility to create rows and columns like you are knowing it already from flutter with all these advantages you are able to create your own pdf document today we want to see inside of our application how you create your pdf document after that we want to also open it on the device so if you use a real device it's also opening up the acrobat reader for you where you can see the pdf document all right but now without further ado let's get started okay so now before we jump into the tutorial where we go step by step on how you can use the pdf creator let's have a look on what we want to create you can see already the invoice create generator where you can buy different things like a membership nails for 30 cents and hammers for 26 euros and hamburgers and stuff i took hamburgers because in germany it has a different vet and so we calculate all that stuff as you can see we get the vet in total and we get the total amount of pricings and if i click now create invoice it will take a second and we create this nice little invoice it is not a financial information here so this is really just to show you that it is possible to create pdfs out of it also you can see that the name of the invoice is zero at the moment so if i create click that button again we get one and if i click it once more we get two so we save different invoices now on our device also what's interesting you are already in the pdf viewer of ios or of android or on mac os and that happens without an issue we will take a look on how it works on ios first and i will show you that it also works on mac os if you develop directly for mac os with all these tools but now let's jump into the to-do's and let's see how we create this invoice let's get into it alright first things first down in the video description you will find the github repository with all the code and if you join in the to do tutorial you can join this tutorial along so you will find all the to do's that we want to follow along so if you go down here you haven't project all the to-do's that we need to fulfill and we will go for one by one through it as always in our tutorials so let's get into it let's have a look into the tutorial um boilerplate so the beginning code so we have an app we create the app in flutter we have a home page inside of this home page we create some products that i created first and we initialize the pdf invoice service this pdf invoice service is here just once created for the whole home page and for the whole application and if we jump inside we can see there is the things that we need to implement so it will be how to create a pdf how to save it in the file and how to open it and we will do that one step by another but then we create some products and we have a number and this number is just for the file name so we create invoice 0 in voice 1 invoice 2 and so on and so forth after that we have an add bar some padding with a list view builder in this list view builder we show the current product that we have implemented and for each product we have an icon with a plus and an icon with a minus to increase or decrease the amount and we just use the basic set state of flutter for it so very basic going straight forward with flutter and down here we have just the summarizing of all the stuff with the fold methods so it's nothing special but if you don't understand it take some time to understand each part of it but at the moment if we take a look into the simulator and i create invoice you will see we get a so-called unimplemented error so we didn't have implemented it yet all right for to begin our journey we will need three packages the pdf package the path provider if you are working with flutter if you only work with dart you don't need that and the open document package all three of them we will find where of course in pub.dev so head over to pub.dev and as you see i already opened it up so we have the pdf 3.6 at the moment we have the path provider and the open document as always we install them with the command here i will do that quickly and then we will go further so i add them here all right so after i have executed all three commands from our pub.dev we can remove all three of these because now we have implemented all the packages that we need we executed already pub get and with that we are finished with these to do's so let's see where we have to go next and i know already that it is inside of the ios package because for i want to work with ios in this part if you are working with android you will have to do something slightly different if you go to the pdf package and read me and it's not the pdf package sorry it is the open document package and if you look into it we see that we have some settings we have to do for android so we have to add that into the android manifest but this time we want to work with ios so we copy this line into our info p list so you can see already it's way easier but you will manage it and if not you can ask a question and i will also answer that inside below all right so inside of our info plist we will add this part and save that and with that we are now all ready and set to finish the invoice service we can get the dependencies once more to make the ide happy and then let's go so in our main what happens is if we press the button as we can see here we first get data from the create invoice but we have currently two methods inside of this service one is create invoice and the other one is create hello world and let's start with the create hello world because it should give you an understanding on how we create these pdf files so if we head over here we can see okay let's start with the tutorial here we remove the unimplemented error and now let's see how we can create a pdf all right so you know what this time means right this is the right moment to hit the like button subscribe to our channel and if you haven't yet and thanks for watching as always and now let's get further with the video alright to get started with the pdf package we need these two imports the first one is pdf.dart and the second one is widget start inside of pdf that we call pw and if we add these imports up here we will now be able to implement the first pdf so final pdf equals pw dot document and this pw implements all the widgets that we can use inside of our adobe acro in our pdf file these pws are more or less like annotations if you are worked with other libraries already the benefit is just that it works exactly like flutter and i really enjoyed that so we created our pdf document and now we have to add a file pdf dot add page and with that we have now the possibility to create a page so we pw page and inside of this page we have now some um yeah constructor parts right so like build for example and build is a function which gets a context and creates us widgets the only difference is this is not a real context like we know from flutter it's a pw context so it's a little bit different but it's still close to this it's similar but not the same so called okay but now we can what does it mean we can build something how does that work so we added a page already but now we want to add hello world in the center of the pdf so we have to return something in this build method and what we want to return is a pw.center and inside of the center we have a child which gets a pw text and there we say hello world so make that beautiful and ready so does it work sorry i think we have to return that and it should be up of course like that cool so as you see if we now have edited that that's it already with that we created the first pdf document inside and with that we have also our first page so we have written that and now we want to save the pdf so if we say pdf dot save it will internally create us a so called you and 8 list if we have a hover over it we can see it's a future of uint 8 list and this is exactly what we want to create so with that this method is ready mic causing null to be returned but the return type is potential non-nullable type [Music] not sure where this comes from now return offroad okay maybe i have to ah of course we have to retry that so that was the mistake cool fair enough so now this is not even a zoom so what we could do is a wait for that but we don't want to because this is already our future you in delay 8 list cool so if we head over back to our main.dart we can see okay we created now the hello world we save the pdf file to something but as you can see there is nothing implemented if we jump into we get the unimplemented error again so for that we want now to create the file inside of flutter inside of any directory and after that we want to open it up as we want in a usual way so because we are working with flutter we need the package for the path finder and with that we get the get temporary directory and if we use that we get our um we can implement that one which is from the path provider which provides us now the correct path that where this temporary directory is this is just for some time so it could be deleted anytime from ios or from android but it is enough for our use case at the moment now that we have this output we can use it to create a file path the file path is now the um the path of this temporary directory plus the name of the file that we want to add so we just pass in this one there i just pass in the file name which comes from as a parameter and the output.path is the way where the directory is for flutter the next step is we need to create a file so we need any kind of file where we pass in the file path so and why do we need a file of course we want to save that inside of our dart i o so make sure this is dart io from this time on it's not possible to do it in the web browser anymore right because we use the i o package of um the local environment but if you want to use it in web you will need to import dart html good so and next would be that we want to write in that file so right as bytes and we pass in the byte list so this is our pdf actually now that we have saved the file we saved everything inside and it's done and the next and last step is actually to open the file so for that we use the open document and we call open document open document and we have to import that and as you see we use the file path again so the only thing is we say okay hey there is the file we save everything inside after that we use open document to open the document again that's it to-do's are done good so this is now the perfect time to test if we can start the application and click on create invoice and as you can see the name is invoice 0 and we save the name hello world in the middle of the page so that's the great stuff right you can use these pw things as widgets as normal widgets like we know them from flutter like pw center it's known from flutter you have pw text it's known from flutter you can also create other things like pw check boxes and stuff like that and also text fields is possible and if you want to have the text aligned into any direction you can use the text field alignment so as you know it from flutter you just pass them besides of it you even have styles you can use different fonts and things like that amazing stuff i can tell you so of course we cannot create a whole template now so i will maybe copy a lot of things but i want to make at least the first couple of things like loading the image creating the pdf again creating the custom rows and after that we will be very quickly done with the pdf in voice you can copy then the whole template that i created beforehand all right the first step here is of course not to create a hello world example we have to create our invoice this time and this time we have to pass in the sold products which is our product list i hope it's the name products yes so products the products are the products that we have here on this page so now we pass them into the create invoice method and here we get these sold products now we have to do the same things again we have to create a pdf document we create an add page and as you can see we have here some multiple list steps like custom rows what is a custom row a custom row is a row that just shows the lines of the different items after that we want to load the image from the root bundle because as you can see we have the image in the asset folder and this asset here we want to display on our invoice for that we will use the root bundle after that we add the page to the pdf and save to pdf again as we know it already cool so step by step so the first thing that we have to do again is we create our pdf immediately pw document so from this now on this is pretty easy but now comes the custom row if we take a look into custom row we will find it up here it has an item name item price the amount of items then the total and the bet so all of these are important things and we will calculate that from the different parts but because we have a column and we want to have it always in the same space we need to create it beforehand as something special out of our soul products so i will copy that quickly over all right so i copied these elements over and i before and i closed and folded everything so that we can talk one by one above it so the first column is our header column we have the item name item price amount total and vet then we go through each of our products from sold products and we create the name of the product we add the price of the product the amount of the product and then we calculate the total amount that we have to pay for it and after that the vet price so for that we calculate the bet in percent and i see there is currently a problem because if we do that we need to take the vet in percent ah let me quickly fix that so the price of course has to be divided by 100 and then times the bet in percent to really calculate the bet that was a bit of a mistake by myself but now this makes more sense and down here we have then the subtotal the vet total and last but not least again this vet total i think that's also a mistake should be just total so it's the combination of the subtotal and the bet total for all of these we have created these methods and if you take a look into it it's just a fold about all the products that we have and i just wanted to make it quick and dirty that everyone can easily understand it okay so with that we have our custom rows to make all the columns exactly the same with without that i have to implement anything from myself so we have created this and i'm done with that next step is to load the image the image to load is pretty easy we can just use the root bundle and the root bundle is from flutter services which loads the asset which we added into our pubspec.jaml down here so i just added the whole package the whole assets and now we just go to that image and load that into our system after that i call buffer and as you intake list also this is just a you and 8 list it's just a basic error byte area and with that we are able to load that correctly and show it in our pdf all right but now let's have a look on how we can create the page again so we use a pdf and add page right so inside of here we have now to create the page so pw page and what we can also do is and thanks to flutter we have now the possibility to see all the named constructor parts and page format is for example something and if we now use the pw page um now i don't see it where is it ah sorry it's the this is all from from the other package actually so it's pdf page format and then we can even say the different formats for the pdf like a4 a3 and things like that and we can even set the centimeters and things like that into it we want to take a basic a4 format which is also the default and build our page again with the build we get a pw context context and this one returns something and it's now this build method is actually like the build method of each of a flutter widget if you want okay nah why is it red ah because we don't return anything so now let's return a p double column and this pw column will contain now our widgets that we want and as you know a column has a children property and inside of these children can be now again what we want like for example let's say we want to have our image inside of it so here i prepared that already it's memory image and we take the image inside of it so this is this image up here and with that we display the image where we need it and now we can just create with that like we would create in flutter all the different widgets we just use this pw to create our things that we want so for example we say okay the image is here the next step would be to add a row so pw row and inside of this row we want to have like a main axis alignment where we have to use the pw main axis alignment and can say for example space between now we have children inside of it again and we want to have the address bar up here so we can i prepared it already so what we want to have is two columns with a lot of texts inside of them so fair enough so we have again columns and texts and so on and so forth and as i said this looks very familiar to flutter unfortunately we cannot create widgets out of it or at least not easy enough but as you can see if you jump inside these things are just extending flex so it's easy to create your own pdf widgets more or less and what you also can do to at least make your code a little bit more readable because that gets a very large template at the end is you can create methods out of it so if you go here inside you can say extract methods if you go to refactor and say extract method then you can add here something more speakable like address address and with that you create a method out of it and this part is now a row with all these things so it makes your overall template way more readable okay but now i'm talking already a lot let's have a look on if we uh we created this and now we can return pdf dot save right and with that we save the pdf again and because our overall code before with the save down here the save pdf file is still working exactly the same we are sure that our code is working so if i go here and we add some hammers to our bed we create this and let's keep the nails out and i create the invoice you can see we get now our image and our address bar cool so you get now a challenge you have to create the whole list with the columns and things like that i will paste that now in but you saw the result already in the beginning feel free to add everything and maybe showcase me your results in a short youtube video i would be very happy to see what you created with the pdf viewer if you have questions or any feedback let me know down in the comments below and now head over to max who will give you the wrap up alright now we had a first look on how the pdf works we saw how the annotations work and how you can create your own pdf documents we created an invoice and now you are able to use this package for your advantages so you can create your own pdf documents that is currently working on ios and android and i was very surprised how easy it is to use inside of flutter and dart of course you can do all of that part also server side possibility because it's dart native the pdf package and you can directly create a pdf document inside of a server and pass it down to the client if you remember we talked about server architecture the last time and if you are interested you can create that now into your application if you have done that please let me know down in the comments below so that i can see your application and give you some feedback i would be very interested to see what you have created alright so that's it for this episode of flood takes plane thank you very much for watching and until the next time see ya guys [Music]

Channel: Flutter Explained

Views: 26,033

Keywords: Flutter, pdf, tutorial, package, generator, pdf generator, pdf file, programming, dart, training, learn, skill, knowledge, max, mahtab, Version, Generate a PDF file, flutter pdf, flutter pdf generator, flutter pdf generation, flutter tutorial, flutter pdf creator, how to create pdf in flutter, flutter pdf viewer, flutter pdf tutorial, flutter widgets, flutter developers

Id: 6bYG-JwnoO4

Length: 23min 34sec (1414 seconds)

Published: Thu Nov 25 2021