Flutter PDF Viewer Tutorial - PDFx Tutorial | Asset, File, Network

in today's video I'm going to be showing you how to create a PDF viewer within flutter our PDF viewer is going to work on mobile devices desktop as well as the web our application will have the ability to scroll through our PDF by either using gestures or using the buttons that we have created within our application our application is also going to show us a number for the current page that we're on as well as the total pages that are within our PDF and we'll have the ability to zoom into our PDF and then take a look at it in more detail without losing any considerable quality so with this said let's get into the video so to get started initialize an empty flutter project and then the first thing that we're going to be doing is taking a look at the package that we're going to be using to get this functionality within our FL application we're going to be using the pdfx package which allows us to render and show PDF documents on web Mac OS Android iOS as well as Windows so I'm going to be copying this dependency then I'm going to be coming back to my pbs. EML file and here what I'm going to be doing is that after my dependencies for Cupertino icons I'm going to be adding pdfx once this is done I'm going to let flutter pop get to its magic and while this is happening I can tell you that I have created a homepage which is just a simple State full widget which I'm going to be using to Encompass all of the logic for our application today once flutter PP get has done its magic I'm going to go ahead and start debugging my application and then I am going to resume the video again welcome back everybody so now that our application is running the first thing that I'm going to be doing is actually tackling the task of creating an app bar so this is going to be pretty easy I'm going to come to my build method and then come to this scaffold I'm going to Define an app bar here and then I'm just going to copy and paste this app bar object in because it's very simple and then do command save and now we have an app bar that's red in color showing us the title PDF viewer once this is done to get started with showing a PDF onto our device what we have to do is create a controller that our PDF view is going to use in order to display the PDF so to do that let's create the controller first so I'm going to come to the top of my homepage State class and here I'm going to create a variable late PDF and then I'm going to say that this is going to be called controller pinch and you can either use a normal PDF controller or a PDF controller pinch the pinch controller goes with the PDF pinch view the PDF controller goes with the normal PDF View and the reason we're using the pinch controller is because it's going to allow us to zoom into our PDF files without losing any considerable quality so if you're creating an application where you do not need the ability to zoom into PDFs then use the PDF View and the PDF controller all of the other logic is going to REM the same but if you want the ability to actually zoom into PDFs then use the PDF controller pinch once you've created the PDF controller pinch I'm going to give this variable a name and then I'm going to come ahead and create a init State function where after my super classes init State function has been called I'm going to set our PDF controller pinch variable equal to a new instance of PDF controller pinch like so and then we need to pass it in actual document that is going to display so firstly what I'm going to be doing doing is that I'm going to be loading this PDF file from my assets so I'm going to come to my flutter project I'm going to create a new folder under here called assets then I'm going to create a new folder under this called PDFs and then I'm going to be revealing this within finder or if you're using Windows it's going to be file explorer and then I'm going to be copying a PDF in by the way links to all of the resources that I use within this video as well as a link to the source code will be in the video's description so feel free to take a look at it if you're interested in there you're also going to find this example PDF so I'm going to copy and paste this PDF in and now within my assets PDF folder I have the example PDF so now what I need to do is actually let flutter know that it needs to load these Assets in and make it available to us so for that I'll come to PSP back. yaml I'm going to come to the point where we have flutter and then the assets I'm going to uncomment the two lines and then I'm going to basically say that we're going to have assets slash PDF and I'm going to make everything available under that so it's PDFs so I'm going to do this and do command save once this is done I will recommend that you actually stop running your application and start running it again but before we do that what I'm going to be doing is that for my document I'm going to say that I'm going to do PDF document and then I'm going to say that we're going to use the open asset Constructor you can also use the open data method if you want that or open file it just depends on you open data takes in a list of un AIDS while open file takes in a file path so if you have a file on the user's device then you're going to be using open file but I'm going to be using open asset and here I'm going to be passing it the path to my assets file so I'm going to hover over it I'm going to right click over the actual PDF copy the relative path paste it in and then I'm going to do command save once this is done what I'm going to be doing is that I'm going to be stop running my application and I'm going to restart it so now once I restarted my application once again you can see that I got two statements printed to my debug console that says that it opened an asset document and then it opened a file document and it's telling me that the PDF file has now been opened so this means that without any errors we have successfully and correctly initialized our PDF controller so now what we have to do is use a PDF view to show this PDF and then give the controller to it so to do that I'm going to come to my build function to the scaffold then I'm going to come to the body attribute for this and I'm going to set that equal to be a function called build UI once this is done I'm going to Define this function by saying this function will turn a viget it's going to be called a build UI and then here what I'm going to be doing is saying that this function is going to return a column and this column is going to have children and the children's list for now is going to be empty once this is done within this column I'm going to be adding a call to a function which I'm going to call PDF view like so and then I'm going to create this function below by doing PDF view like so then within this what I'm going to be doing is actually returning an expanded widget and this expanded widget is going to have a child and what is the child going to be well it's going to be PDF view pinch if you were using a normal PDF controller then you would use the normal PDF view if you are using the pinch controller then you'll use the PDF pinch View and then I'm going to pass the controller which is going to be our PDF controller pinch like so do all shift F command save and you can see that the PDF file is now appearing on our screen so now that this is done you can actually scroll through the PDF file and I'm going to be showing you a cool few tricks that you can do to the PDF pinch view to change the functionality of the actual view so firstly how can we change the scroll direction for that you can actually take a look at the PDF view page and you're going to see that it gives us the ability to define the scroll Direction by default it's vertical but you can do access. horizontal and then the pages of the PDF can be scrolled in a horizontal manner but I will I will go ahead and set this to Vertical because that's the way I like it so now that this is done the next thing that I want to do is that I want to create the UI that is going to allow me to programmatically go through the pages of the PDF without having to scroll through them so to do that what I'm going to be doing is firstly I'm going to be coming to my column and here I'm going to be creating a row as one of the children for the column I'm going to define the children's list for the row and then before I Define anything else I'm going to go ahead and Define the main access site the main AIS alignment and the cross AIS alignment for the rule then for the children the first thing that I'm going to be doing is that I'm going to be adding a text widget and this text widget is going to say that we have X amount of total Pages within our PDF so I'm going to do total Pages as the text and then I'm going to interpolate within it an actual variable that will hold the reference to how many total Pages we have so I'm going to go to the top of my class and here I'm going to create a variable which is going to be responsib for storing this information so I'm going to call Total page count and it's going to start off as zero and then I'm going to take this variable and I'm going to put this within the total Pages string and now you can see that it's telling us that its total Pages zero now what I want to do is actually update the total Pages count to actually reflect the count of how many pages we have within our PDF so for that we can go onto our PDF view pinch and then we can actually Define the call back function for on document loaded which provides us a document so I'm going to say when on document loaded this is the call back function for it we're going to get a doc pass to us and within this I'm going to call set State and then I'm going to set our total Pages count equal to Doc do and then Pages count like so to all shift F command save and then if I restart my application you're going to see that now we're seeing total pages are equal to four now what I'm going to be doing is that I'm going to be creating another variable which is going to keep track of our current page and I'm going to be setting this to one then what I'm I'm going to be doing is that I'm going to be coming to my PDF View and I'm going to be defining the call back function for all page changed when our page gets changed we're going to get a page that's going to be ped to us which is going to be an INT depicting what page we're on so I'm going to call set State and I'm going to say that our current page is going to be equal to page so once this is done the next thing that I'm going to be doing is that I'm going to be coming to my build UI column and then the row and then after my text widget I'm going to be adding a button which will allow us to go back within our PDF so so for this what I'll do is that I'm going to say that we're going to have an icon button the icon button is going to have an onpressed call back which for now is going to be empty and then it's going to have an icon attribute which is going to be icon icons Dot and then it's going to be Arrow back like so and then do all shift F command save after this what I'm going to be doing is that I'm going to be copying this icon button and I'm going to be pasting it again and this time it's going to be Arrow forward and in between this I'm going to have a text which is just basically going to be the current page that we are on so for that I'm going to say current page and it's going to be the current page like so now if I go through my PDF you seeing that the current page is updating as I scroll through my PDF but these buttons are not working the way I want them to work well if we want to go back in our PDF so go to the previous page then within the onpress I'm going to be taking a look at the PDF controller pinch I'm going to be calling a method on it which is going to be previous page it's going to take a duration of how long it's going to take for us to animate from the current page towards the page that we're going so this is going to be duration and then I found out that milliseconds and approximately 500 milliseconds for it was a good value and the curve is how are we going to animate and what Behavior are we going to animate from one page to another so you can experiment with this and you can achieve many cool outcomes so what I found was that linear was the best one in my opinion if you want to keep your app just looking good and classy so now what I'm going to be doing is that I'm going to be going to a page like three and then if I press the back button it's taking me back and now if I change the duration to let's just say 200 Mill 200 milliseconds and then I go back you're going to see that we animate much faster so it just totally depends upon your taste I found 2 500 milliseconds to be the best then I'm going to be copying this function I'm to coming to icons button Arrow forward and for this onpressed function call back I'm going to be pasting it in and now I'm going to be doing next page instead of previous page and everything else will remain the same so now when I press the next page it takes me to the next page and since we used the PDF view pinch we already have the ability to actually use the pinch gesture on our device to actually zoom into our PDF so for that if you want to test it on a simulator for Android if you're testing it on Mac OS or Linux I believe you can press the command button for Windows it's going to be control um or shift something like that but if you hold command you're going to see that on Android you're going to see this kind of a UI appear here and then if you drag your mice up or down you can zoom in or out so you can zoom into your PDF and you can see that no matter how much we zoom into it we do not lose any quality and this is the benefit of using a PDF view pinch so if you're using the normal PDF view then you would still have the ability to zoom into your PDF but the quality would deteriorated it's not going to be as sharp as you can see right now so with that that's pretty much it for today's tutorial I hope that you enjoyed if you have any question comments or concerns feel free to leave them down in the comments below as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 6,175

Keywords: flutter pdf viewer, flutter pdf reader app, flutter pdf app, flutter pdfx, flutter pdf reader, pdf flutter tutorial, pdf flutter web, flutter pdf viewer from url, flutter pdf viewer from assets, flutter pdfview, flutter pdf download from url, pdfx flutter, pdfx, flutter pdf, flutter pdf tutorial, flutter pdf download, flutter pdf viewer tutorial, flutter pdf viewer plugin, flutter pdf example, how to create pdf in flutter, flutter preview pdf, flutter download pdf

Id: gukiCXU_XNs

Length: 12min 53sec (773 seconds)

Published: Sat Nov 11 2023