How to display PDF in Flutter in Just 6 Minutes !

in this video I will show you how to display PDF from URL in your flutter app I will be using this flutter cach PDF view package which you can find in p.de add the latest package dependency version into your flutter project while in our main code I have created just a simple column vidget firstly I will be creating a vidget view for the PDF it's a stateless wiget class because it doesn't require State changes this viget class returns a scaff vget with an Adar title and the PDF view as the body so in order to display the PDF we have to use PDF Constructor that comes from the package do cach from from URL function since we are displaying PDF using URL and we have to provide a URL to the function so I will add a string variable to the PDF viewer wiget class Constructor so that whenever we call this wiget class Constructor we have to pass in the URL now this cach from URL function actually implemented caching mechanism to the display which we can add a placeholder and error viget function placeholder is the viget that will be returned when the PDF file is loading and in this parameter it actually Returns the progress percentage of the loading PDF file so I will just display the progress percentage using a text vidget while for the error viget it is the viget that will be returned when the PDF URL file failed to load which I will just display the error text now we have completed the view for PDF coming back to our main column viget I will be creating an elevated button and when the elevator button is pressed the app will be navigated to the PDF View when we uses the PDF viewer cache from URL Constructor we have to pass in an URL so I have prepared a PDF from the internet that contains 30 pages which is considered relatively big in file size now I will copy the URL link and paste it into the Constructor URL parameter now let's test it out in the emulator so as you can see when I click on the elevator button it started to load the PDF file from the URL provided and because the PDF is big in file size while it's loading it display the progress percentage e once the progress finished it will display the PDF the major benefits of caching mechanism is that the first time we load this PDF takes kind of long time but if we navigate back and forth again the PDF file will be loaded immediately because the file is cached in conclusion this is how you display PDF in your flutter app if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 279

Keywords: flutter pdf viewer, display pdf in flutter, flutter cached pdfview, pdf viewer flutter, flutter pdf, flutter pdf display

Id: dl5LN5k4Wws

Length: 6min 30sec (390 seconds)

Published: Mon Apr 29 2024