Create Your Own PDF Files in @FlutterFlow with Just a Few Clicks + Amazing bonus content 💥🔥💨

hello everyone today we are going to talk about PDF files and how you can actually create your own PDF file using your own data so this is the let me show you and at the end of the video I'll show you actually two more things uh one is a bonus thing and the other one is a user asks Ali actually asked uh can we change the code so we can allow multiple uploads multiple data formats of data types of upload so yeah stay tuned for the end of this video so you can learn more about it but today we're talking about we'll talk about PDFs so let me show you what we're going to do so if I click PDF and if I click this button over here I will be able to create my own PDF and this PDF will be displayed like that so it's ready to print and it's ready to download as well if you're using a mobile phone it will display uh it will ask you to actually open this app inside your PDF viewer uh whatever is a tough or something else and then the user will be able to save it or just display it or print it and then this is a very simple PDF but let me show you uh what is the code behind this so this is my code if I go to the bottom of it this is a custom action and if I go to PDF invoice download it's enabled of the custom action you can see it over here and then we have the title and the body which are coming as an argument and the two uh the two packages that we need the one it's PDF and the other is printing so if I go over here this is the PDF one and you can copy it from here and this is the printing one which you can copy from here so those are the two the the two packets that we need and you can add them over here and after you add them don't forget to click this button in order to refresh uh the pub spets dependency and then here on the first line we have the no safety check so first import those of course and then name your custom action we don't need any return so this will not return anything uh this custom action will not return anything we don't need exclude from compilation this time and we don't need to include the build context and then first thing first we need to make sure that we if we have a no safety if we have a no values uh we should get a default value which in my case will be an empty string so if this is no get an empty string and then the first after that uh we're going uh we're getting the Paw which is the PDF widget and this is the document so we're creating a PDF document with this line and then here we're taking the PDF and we're adding one page so we can add multiple Pages uh so if we want to add another page we can just say PW Dot and then add uh sorry it's PDF of course so PDF dot at page then we can have multiple pages so uh just stick with this if you want to add multiple Pages just stick with this so when you add PDF Dot add page then here you're adding the actual page so it's pw.page and all we have inside the page uh the first thing inside the page is the page format usually a PDF page format that A4 is the standard format it's the standard printing format of a page this is A4 and then we have the build so this build is like when you have a normal build inside your for example your widget so if I go to a some other widget you can have that you can see that we have the build the widget and then we have the build and then we have the return so it's the same thing over here so when you go over here and you have built and then we have the PW context and this is the context and we have the return and here we can actually structure our PDF how we are structuring our code site uh further flow so for example if I want to have let's say that here I want to have a colon and inside this column I want to have a row for example and in this Row for example I want to have a text and then if I go to view code I can actually view the code what I just created so I can click over here and I can see that I have uh and I can see that I have a colon and it is inside this corner I have a row and inside this row I have a text so you can actually do the same thing over here with the PDF and you can structure your PDF however you want to so in this case over here we have a column as you can see the only difference is that you have PW and then dot call and then you have children and inside these children so here you can imagine that here it says that inside this colon put wherever you want to wherever you want to have inside this cone and then here we have p w text so we have the text this is a no safety check again I think we don't need it I'm pretty sure we don't need it but maybe we need it because this is inside the return so probably we need it and then because I think I got an error if I remove this one so we have the style also we have we can style the text and there are uh there are a lot of things that we can Style with the text uh we have the uh for example we have the color so we can we can have a different colors we have a font size of course we have a different font size here and right now it's not autocompleting for some reason but you can if you click if you click over here after the comma and click Ctrl space you can actually should be able to see all the parameters that you can change except from uh you already have the color and the font size there uh there are more but for some reason it's not loading right now and then we can use a divider we can this is also a text we can have a size box and we can have the uh height of the side box in this case it's 10. we can have a row as well so we can stack those if you have a cone so in this case we have a cone inside a row and the row we're here we're seeing uh what are the alignment parameters so for cross access alignment it is stored and for children and this colon as children and the children are again size books with a width of 10 and text of body and then we continue with the container we have a container we have box decoration and this is a box this is the container of what is inside this container and we have a border radio so you can have a border radius and we can have a radius as well and the padding of this container we can have the padding on the left side on top side on the top on the bottom on the right and the alignment of course in this case is Center left height of the container and then we have children what are the children of this container now we have the default textile and the style will be the font of the style will be 12. and then we have sorry this is a child of course not children this is a single child and then we have a child inside this child which will be a great view so this grid view is normally used when you have invoices and you want to have like a table structure so this is a cross access counts two and then the children and then we have here we have a simple uh text inside it and the last thing is that we have another container with a heightened width of 100 and then we have the hello world with a font size of 35. and the final thing is that we're actually printing this PDF so we have printing that layout PDF and I have own layout um PDF page format format and then we have the async PDF dot safe so uh what so the question is that what we have for p uh W so if you want to add something new so let's say I hope this will auto complete it right now because sometimes it works sometimes it doesn't work I don't know why um but right now it's not working for whatever reason okay now I think I managed it to work um I don't know why sometimes it's not working sometimes it's working but the whole idea is that when you write PW Dot and then you can actually see all the elements um that you can use so you can use alignment for example you can use barcode widget as well you can use Center so you can Center takes you can use Circle check box uh and data set you can see all the elements there are a lot of elements actually that you can use you can use the icon image grid view as you can see it over here we're already using that and uh yeah you can see there are a lot of our other a lot of parameters you can use so PDF logo as well um paragraph and what else like rectangle shape row we're using that stack table text team work Watermark so I think everything that you can actually imagine you can use here the only thing that the that is left is I think your imaginary so I think you can you can do everything that you can think of and you can build your own PDF file because I'm not showing an exact PDF file because you can there are a lot of different varieties of PDF files and I of course I cannot cover all of them but if you know how to structure your PDF file at the end of the day you should be able to do everything on your own it's not that difficult you just have to build like a Lego box like a Lego a blocks and uh yeah as I said so yeah this is the final product and if you click this button it will actually generate your PDF and then the code will be available in the description and the other two things that I wanted to show you so the first thing is actually the video from uh the last video that I did it was uploading any file type so uploading any file type you can actually we can actually test this right now uh the first things first that you need to do is that you need to actually um you need to actually log in so if you don't log in uh you were not able to upload any file to Firebase so before that you need to log in so let me log in with my demo account and then when I'm done I should be able to go to upload file and when I click to upload file so right now because I restricted only to only members to be able to upload files using three types of files and the one is PDF and the other is txt and the other is zip file so if I go to Dropbox right now and because I'm on Linux I will actually create those files myself so it will be for example um demo that txt as you can see it it just appear and then I can have a zip file and then I have I can have a PDF file as well and I can have an AI file or mp4 file or MP3 file oh this is the last one I made a mistake but it should be no this will be MP4 and MP3 as well okay I can delete this one and now we have like in total of uh four five six files and then and then when I click this button to upload the file I should be able to see only the PDF on the pdf.txt and the zip file the other files I should not be able to see them because I'm not able to upload them so if I click this button you can go to Dropbox you can see that I have only demo PDF demo zip and demo txt file and how I did that when I go when I go back to coding this is the the code that I used to upload any file and this in my case will be a list of strings and a list of strings will be the that's the type of the files before that I had like only one file but right now I'm using a list of strings of files and if I click over here to see the actual button when I go to the actual button and this is the list of strings because you cannot specify them and directly for some reason for the flow it's not allowing you to do this uh and then you have to go from from uh variable and the easier thing that you can do is actually take them uh create a new local state at local state for a variable and then just write argument file types list of strings this should be a list of strings persistent needs to be false and then write a default once so the default ones that I wrote It's txt zip file and PDF file so you can write another one here you can write and you can say like I want a a file which is I think Adobe Illustrator or PDF file or mp4 file and then this is now saved I need to instant reload in order to this to show up but this is now saved and you are actually able to go to the upload file and then upload file you can get it from local state my variable it's on the bottom it's argument file types just click over here no further changes confirm and you're good to go now you can actually accept um uh different um many different types list of data types and not like before only one data type you can actually do this if you want to accept only one only one sorry another type you can actually delete all the data types here and just leave one and you can use the same code and just use one so for example txt and delete all the others from here and then you'll be good to go and the other thing that I wanted to show you so the third thing that I wanted to show you is something new very exciting actually uh with fluid flow I saw this yesterday so it's super I think brand new so when I click to add and I want to add for example new Uh custom action and the new ID the Anton ID and they call it Antoine ID of the uh team member who actually uh wrote this extension of uh or a module of floating flow and then when you have this this is the blank uh the blank uh action uh action code so to say you don't you're not allowed to to delete this above and the below part you can actually delete it because this is only a command but I recommend you not to delete it and then what if I want to copy and paste a code coming from some other source so here I have a code uh that is actually used for a PDF uh that is uh like an invoice PDF and there is a lot of argument in this invoice PDF so if I go over here so I copied the the code and if I go and if I'm paid if I paste this code over here so watch watch uh what will happen if I go to the top of the code and then I don't treat I don't change the name so don't change the name uh just leave the default one and then copy the name of the action or of the code in my case it's a custom action so copy this put it over here in an action name so right now it's struggling sometimes it's struggling to okay sometimes it's struggling to um to I mean I right now I cannot write you can see if I write something uh if I write if I want to write something on the top right now it will right on the bottom you can see over here uh but actually to prevent this from happening uh your workaround will be to create an imaginary uh at argument and right now I can write in the argument we don't need this argument so just delete it and then copy the PDF uh invoice full and now I think I'm able okay I'm still not able but let me try to add another argument right over here something go here now I should be able to write yes I'm able to write it so delete this one and then I should be able yes I should be able right now to write it I think the full flow will fix this as soon as possible but uh for for now this is the fix and now when when you have the same names right now so let me just say this one more time just go to new add a new action for example don't change the name copy uh sorry paste the code that you need to use and put the same name of the uh of the action in my case action that I'm going to use and then when I click save look at this part over here Define arguments when I click save boom although they find arguments that are on the left side are now on the right side and there are a lot as you can see I mean there are a lot there are more than 15 for sure and when I go to the right side you can actually see that all the arguments right now are added and not only that if I go to uh string so for example this is a string and this is not a knowable string if I expand this you can see that indeed this is a string and this is not a knowable string the first argument what about the third one the third one is Noble string so if I go to the third one you can see that this string is indeed knowable string what about here we have a list of cars so cars this is a document so we have a list of documents of cars and what about this argument which is cars let's go down there as I said there are a lot of arguments most of them are strings but let's see this one so if I exp expand this one it will be cars like the name over here it will be document which is correct and this would be a list which is correct and this will be knowable which is correct because it's coming from over here and this would be cars which is also correct and that's great and the final one that is different is the Boolean one if I go over here you can see indeed that this is a Boolean and this is knowable so that's actually great I actually talked about this with the fluid float team and ask them if they can do something like this because adding those parameter by hand it will take you like it will take you like 30 minutes I think but having it having it like this it will actually uh it will actually make your life a lot better and you can do actually things super fast this way so let me show you uh let me try and show you one more time because I think this is the most uh important future for this video uh and uh when I saw this I was blown away so actions this is the new action let me paste uh let me place the whole code again and go to the top copy the PDF copy the name of the action and then paste it over here right now it's basing it correctly so sometimes it's working uh straight and some sometimes it's not but right now it just worked and then save action and I'll look on the right side this is amazing I mean super amazing and I'm super happy to share this with you guys I hope you learned something from this video I hope you learned how to create your PDFs and all the code will be available in description so if you have any questions let me know thanks

Channel: Dimitar Klaturov

Views: 15,217

Keywords:

Id: 9HngDsCIJPY

Length: 25min 56sec (1556 seconds)

Published: Thu Jan 05 2023