View PDF from Firebase Storage in Flutter app | Working with PDFs in Flutter

hey guys i'm with harcourt and welcome to part two of our flutter pdf series so if you haven't watched the previous video you can check out the previous video using the i on top and in this video we will continue with it and i'll show you how to access pdfs that you have saved inside your firebase storage and use them in app inside your flutter application now again i had recorded this video back in the month of february and it's july right now uh there might be some changes but these would be just little modifications although the steps would remain similar i hope this video helps you and if it does do subscribe the channel and thank you so much let's get started with it so so far we have made this basic home ui where we have upload pdf and view pdf in this video we will be working to you know get pdfs from our firebase storage and view it on our device so i will quickly create a new dart file so new dart file and i'll call this view pdfs view pdf dot dot oh now what i will do is this is right now empty so i'll just import material. and create a stateless widget which i will call load pdf okay and i will go over to my home page okay so this is my home page uh inside my the raised button that i had defined it did not have an on place so i'll give it an on pressed an empty callback and inside this my callback what i need to do is i need to go over to my load pdf widget so let me just import load pdf it is inside my view pdf okay so now it is visible right here i'll go over to my view pdf right now it's returning an empty container what i need to do is i'll refer again the github readme i'll link it in the description and this should help you like what all do we need so we need uh the flutter plugin pdf viewer which we hadn't added to our pub spec.amol so i'll first add this plugin under flutter document picker quickly do a pub get so this should import the related files to this plugin and we use this plugin to view pdf files in flutter once this will be done so once this will be done i need to go down to view pdfs from firebase storage and what we'll do is uh we need all these you know files and i need the firebase storage and i need this plugin pdf viewer so i'll copy them from here go over to my view pdf dot dot and import them here right here once that is done what we'll do is we have created a stateless widget i need to create an instance of firebase storage to use it inside my load pdf i can simply create an instance of firebase storage and then i will define a new function which would list all the you know directories that we have so one thing i need to do is instead of making this load pdf as a stateless widget i need to make it stateful because i will be tapping into the init state you know which is like when you so i will be tapping into the init state which is like one of the life cycle of stateful widget so therefore i need to make it stateful again i will go over and create an instance of firebase storage and define this function which would list all the you know directories that we have we will be using files because we have the file directory inside it and once this is done we need to define a function to get the download urls so let me just quickly explain it what happens is we have defined an instance of firebase storage and we are using this future function which is list examples so what it will do is it will get result so this result is away reference we are using the instance to refer the child of this folder called files so we have inside our console firebase.google.com go to console go to the project that you have initialized and go to storage so you have this folder called files and we would we will uh list all the you know directories that are if there is like if item for each if we find a file so it would print the file name and if we find a directory like if you find another folder so it should print the light treat this function i got it from the flutter document flutter fire documentation then there is this another function download url uh example which will get us you know from the same files folder it will get us the uh some file that we have some file.pdf i had already you know some file.pdf we have so it should get us that instead of you know making it like this uh instead of you know typing it out you can also use the reference that we got save it to a variable name and paste it here if you like dealing with the number of files but since i know and this is only a tutorial so i'll write it myself here i'll print the download url then pdf document.doc i'll await this pdf document we are getting it from the flutter pdf viewer and i'll give it this url and what i will do is navigate a dot push to view pdf now this view pdf right now is not defined and while uh what we need to do is uh we go back to and create an init state where we'll call both these functions and yeah so we'll go down there create an init state for this it will implement this and one is once it's done it's or it will print all done and instead of returning a container here we'll use a circular progress indicator so as long as this is being done there will be there will be a circular progress indicator on screen and once all this is completed like i have defined inside the url example only it will push to our next screen so after this is done inside the image state it would automatically push to the next next page so circular progress indicator will show up for some time once everything is done in the background it will load up the next screen let's define the next screen here itself can make that one stateless so view pdf it returns an empty container for now but i can simply do is replace with child pdf work what i need to do is this view pdf should take in a like it should have a constructor so i will first pdf document a document and view pdf is the constructor so it will take in this document and simply give and instead of returning an empty container what i can do is tap into this pdf viewer and okay so what we have done is this pdf document is we are getting this from the flutter plugin viewer so i have defined document as a pdf document type and this is the constructor for this state particular stateless widget what it will do is when we call this view pdf right here it takes in dock now this dock is also the pdf document type so we needed a constructor inside this widget and it would simply return the pdf viewer document and the document that we supplied so if you know about constructors and classes it should be understandable that we are just applying it the document and it will show that up it will return that to the screen and why we did uh this like why did i do it in two different widgets because if you would have done it in the same widget why uh this all these functions all these futures take up time to load like they would need some time to load while the builder would show up like immediately as you go so there would be like uh you know it wouldn't your pdf wouldn't open so you can use a future builder but if you do not know how to use a future builder this is like a simple approach we have in its uh we tap use the init state of one widget and once all the steps are completed in that we push to the next widget so this is like something i learned while working with apis and and uh like future like await anything and all that so this is a simple trick i'm just loading up the last widget which will show up the document let's try to run our application so yeah we are done with this our pdf is loading up on screen and you can view it it's the same cheat sheet that we uploaded now these uh this tutorial isn't you know as detailed um and it's just basically uh some things that i wanted to share that i have learned from firebase and flutter documentation i hope this helps you like in the beginner stage because all these are like you we are uploading just one pdf and we are accessing it but you can build upon it you can use variable names uh to upload multiple files you can check out you know multiple file picker you can use variable names to change the names and you can also create references inside firebase you know inside cloud store where you can you know save who uploaded the file and what is the subject of the file and all the other details and you can access them then you can use list view to build up like a file like all the files that you have inside your storage so you can build a list view and tap on it to view a particular file so i wanted to make these tutorials to explain my approach like we have created simple references and we are just uploading the files then instead of using a future builder we are using like these examples functions to first list all the files and then download the url and then pass it to a different widget to view the pdf and i hope this helped you because i checked out other tutorials on flutter pdfs which were either outdated in terms of firebase and this might get outdated too so i would recommend checking out the flutter fire documentation to keep updated uh with how uploading and you know downloading the urls can be done so with this yes we come to the end of the tutorial thank you for watching i hope this video helps you and if it does do subscribe the channel and thank you so much

Channel: Aditya Thakur

Views: 10,980

Keywords: flutter, firebase, pdf, upload, firebase storage, tutorial, flutterfire, document, invoice, download, view, retrieve pdf

Id: N4KYBSnRdL8

Length: 15min 1sec (901 seconds)

Published: Sat Jul 17 2021