Flutter Tutorial - Create Invoice PDF Document

let's generate an invoice pdf document with flutter and therefore we will create a complete document with the header and all the information of this invoice and secondly we display then all the products all of our items in a table and we also display then here the net total and the total amount which needs to be paid at the bottom of the page we will also create a footer with the address information of the supplier and also his bank account if you are new here subscribe to my channel and make sure to watch this video till the end we want to actually use this package pdf to generate our invoice pdf document therefore i have credit here on the right side already a application with a button and if we click on this button then we want to generate here this invoice document and also open it up therefore let's go to this button here which is here this button in our ui and if we click on this button then we want to generate our invoice and to generate our pdf document we also want to put here an invoice object inside and this invoice object will later hold all the data of our pdf document for example all this data which you see here at the top and also all of our list items with this method generate we want to generate our invoice as a pdf document and we also want to store then this file inside of our file system and therefore we get here this generated pdf file back and we also want to open our file therefore i have created here another method which is basically making use of this open file package and is opening our pdf document let's go back to our page again and we also want to create this generate method to actually generate here our invoice pdf document therefore we want to get started by creating this invoice object and therefore we create here a new class invoice and inside of it i will put all the information inside which we need later so we need some supplier information we also need a customer information with the name and address and also our supplier has the name and address and we also put our payment information inside and this customer and supplier information will be later put inside of our header we also have you more information about our invoice so we have here for example the invoice date the due date invoice number and so on and therefore we also create here some invoice info with all of these information with the date that you date the description and so on and we also create here some example date and due date and lastly we put the most important information inside which are here our products or our items and therefore i include here to our invoice object also these items as information so we have some description we have the quantity the price and so on about each of these items and now that we have created this invoice object we can also display it and generate a pdf document with all of these information therefore i go inside of this class and here we create then this generate method which gets in our invoice object and here inside we can now create our pdf document what we do with this pdf package and you also need to save your pdf document therefore i have created here a method save document where you can set the name for this document and we also put the pdf document itself here inside so let's also look at the save document message and here what is happening we basically save our document and then we store it in our local file storage and now we can go back to our generate method and here inside we want to create send our pdf document our invoice and therefore you can simply call here this pdf ad page and here you create then a multi-page which means that you can put here multiple widgets inside and we want to get started here really simple so we want to create first of all here a title and under it some description therefore you can create here a build title message and here you create then a widget build title and inside of it you can create then a column what you already know from flutter and then you can put here for example a text widget inside and you also can put here some spacing between your text and another description text and the spacing is basically here based on centimeters however if you like you can also choose your inches millimeters or whatever you like and now we can already try it out so we click here on this invoice pdf button and you see that he opens then our pdf document after he has generated it and also includes here then our title which is here this invoice and our description an important thing to notice is that here inside you cannot put directly widgets inside even if it looks like it because here you put a column inside and a text and so on however this doesn't come from the flutter sdk instead it comes here from this pdf widgets package and this means if you put here the flutter sdk as an import statement inside then you get also here some issues and this is because these names which we have here inside are defined within both of these important statements however for creating a pdf document you only need to have this import statement next we want to create here all of our products all of our items within a table and under it we want to create the summary the total of all of our products to create this table we go simply to our multi-page and here within our list we want to include then also our invoice table and therefore i create a new method which also returns a widget and here inside we want to create then a table and here inside you need to set first of all the headers and this is the information which is then displayed on top of our table and therefore you simply create a list with all of our columns and secondly we want to create our data all of our products and therefore we need to access all the fields which we have created before within our invoice object and like you remember we have created here all of our invoice items which we want to access right now therefore i create a new data field and inside i first of all need to calculate the total price of this product and then i need to put all of our items data inside of this list and this needs also to match with our header so here we have the description therefore we also display here the description and then i also put here simply all of this other information inside for example i put here the date inside the quantity of our items the price and also all of these other information and lastly you simply need to put this data then inside of your table and with this we have generated here a simple table with all of our header information and also all of our products next we also want to make our table more beautiful and we also want to include then here our total amount therefore let's get started by first of all deleting all of our borders which are here displayed in our table secondly we also can change the style of our header and we want to make it bold and we also want to give it some background color and therefore i put here a grayish color for our header inside and with this our header looks more beautiful next we also want to change the height of our rows and our data and therefore you have here this property cell height and i set it to 30 pixels and secondly you also can define here the cell alignments which are then aligning each of our columns to the right place so for example the first column we want to align to the left so this should be also going to the left side and the other column should always be aligned to the right center side so let's also look at these changes you see the first column is aligned to the left side and the other columns are all aligned to the right side which we have to find here inside furthermore we also want to create under our items then the total amount so we see here the net total the what and also the total amount you to create this information we go again to our multi-page and here we create first of all a divider under our invoice and secondly we want to create our total therefore i create here simply a new method and i also put here then all the values inside which are calculated which we later then put inside and basically we summarize then here all the net total of all of our products and also all of these other values and this means we have now only calculated all of these values and now we want to display all of these values in our total summary therefore let's go again to our build total method and here inside we want to create then a row and first of all we put here 60 in space inside and next to it we put then a column inside which gets then the remaining 40 percent of space and this will result in that our total gets here 40 percent of the space and then we also have your 60 space on the left side which is empty and now within this column we can then display our total and therefore we create simply some text and i create here a general method which then displays a title and a value next to each other and therefore we simply create a row and inside of this row we want to put first of all the title inside and also the value and with this we can make use of this build text method and here we put then a title inside and next to it the value so for example we start here with the net total and then we also put here the unite flag to true and this basically means that we put the title and also the value to a bold font size and now we also have here the net total under our table inside next to our net total we also want to display here the vats and also the total amount and between it we also want to put a divider and under our total amount we want to put even two dividers inside therefore let's first of all create here another text and here we put then the what inside and also i put here then the calculated what price inside we set again the unite flag to true to make both of the tags bolt and we also put a divider under it and under it we want to put then our total amount inside and here i also want to change the font style a bit and then i also put here the value inside with our total which is then the calculated total of all of our products and at the end we also want to include some dividers under our total amount so first of all i add here some spacing then i add here a divider and i also add some spacing and again i put a divider inside and with this we have completed our total summary and we have displayed here all of these values in our table if you look at the goal what we want to achieve we are pretty far so the last thing is to put here this footer inside and then at the end we also want to create this header for our invoice document so let's get started with our footer so first of all we create a divider then we create here a row with two texts and also another row with other two texts to create your footer you go again to your multi-page and here you have another property which is called futa and then you can create here some widgets and we want to create here a new build footer method and here we basically create then a column and first of all we want to create our divider and then we add here some space and under it we want to include our address and also put here out of our invoice object than the supplier address inside and therefore i have created here a build simple text method which then displays the title and the value within a row next to each other alright and now let's go back to our build footer method and here we want to include more space and under it we also want to include our payment information and this is also what i access here over this invoice object and with this we have completed our footer which then displays our address and also our payment information and at the very end we also want to create here the layout for our header which is also pretty simple so let's get started by first of all displaying here the supply information the name and address and next to it we want to display here a qr code therefore i go again to the multi-page and here i create then this build header method and within this build header method we want to create then a column and inside of the column we want to create a row where we want to display then first of all our supplier information and our supplier information is then basically accessing here this object supplier where we can then access the name and the address and this is what we then simply put inside of a column so i simply put here the supplier name inside as a text and also the supplier address and with this we have here basically our name and address already inside and secondly next to the address we want to actually create then our barcode and therefore i simply create here a barcode widget and i also put here as the data for our barcodes the number of our invoice inside and at the end you also can set then the height and width of your barcode and here i simply wrap a container around and then i set it to 50 pixels by 50 pixels and with this we also have generated here the barcode on the right side of our text and at the end we also want to display here the customer information with the address of the customer and also all of the data of our invoice therefore we go again to our build header method and here inside of our column under our row we want to place them the remaining data and therefore i simply create here a row where we first of all want to put our customer information inside and therefore i simply create here a method build customer address and i also put here then the model of our customer inside which holds in the name and address of our customer and now we want to create this method and this is also pretty simple we simply create a column and inside of this column we want to display then the customer name and also the customer address and with this we already display here the customer name and the customer address and next to it we also want to display then all of our invoice information so let's also create our invoice information therefore we simply create here four rows under each other and next to it we put then every time the title and some value inside therefore i go here again to our row where we already have displayed our customer data and next our customer data on the right side we want to display then our information about the invoice and therefore i create a new method build invoice information and here inside we want to create then basically first of all all of our titles and this information is then displayed here on the left side and secondly we also want to display then here all of our data on the right side and therefore i also create another field where we put then all of this data inside and here inside of this invoice info object we can then access for example the dates that you date the number of this invoice and the description and now back in our build invoice info method we need to only display the title and the data next to each other and therefore i want to simply create a column and i want to generate then a list of all of our titles.length which means in this case we want to generate a list of four items and now we can build here all of our items and therefore we get here every time the index of this item which is then a value between 0 and 3 because we have put here four items inside and now we can simply access and over the index our title and also over our index value and this means that we access the every time the title and also this information and then we build this information and also access here then the second data and so on and lastly we simply display here then a text and put here the title inside and also the value and we also give it some width so that we make sure that our text has only a width of 200 pixels and with this we have finished our invoice and you see that we simply display here every time two tags next to each other 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: 96,462

Keywords: android, attach invoice, create pdf invoice, customize invoice template, download invoice template, flutter, flutter invoices, flutter pdf, flutter pdf creator, flutter pdf generation, flutter pdf generator, flutter preview pdf, flutter tutorial, free pdf invoice, how to create pdf in flutter, how to invoice, invoice, invoice ninja, invoice sheets, invoice template, invoices in flutter, ios, pdf, pdf invoice, pdf invoice template, pdfs flutter, ui

Id: z_5xkhEkc5Y

Length: 17min 22sec (1042 seconds)

Published: Sat Mar 27 2021