In Flutter there are various features that make you app rich in functionality and provide ease to the user to do stuff within the app and get better user experience and being a service provider it is also necessary for developers.
These small but important functionalities like picking up contacts from the contact list, images, and videos from the gallery, opening maps, automatic OTP recognition, are some important features that make any app comfortable to use and in this article, we are going to explain a simple but important functionality named pdf viewer.
There are different packages which you can use to open a pdf in your app some are a bit complicated and some are easy to implement and here I am going to explain one of the easiest ways to use it.
Implementation:
For this, you just need to add the dependencies in your pubspec.yaml file
pdf_flutter:
file_picker:
After adding dependencies you have different options to use it, It depends, from where you want to access your pdf like from assets, from your phone storage, or by any link(from server).
So let’s see all methods of accessing pdf from different locations
From asset Folder
From the asset folder, you can easily access your pdf file if you have mentioned it in your pubspec.yaml file. Here you are also required to mention placeholder in case of unavailability of resources.
PDF.assets(
"assets/demo.pdf",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
placeHolder: Image.asset("assets/images/pdf.png",
height: 200, width: 100),
),
From Phone Storage
Some times you need to access pdf from your phone especially in the case when you are posting any document in the server. The only thing which is different from the above code is PDF.file and but as we are picking it up from phone so we need to add the dependency of file_picker then we need to create an instance of the file picker
File localFile;
and then it will allow you to access your phone directory
PDF.file(
localFile,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
placeHolder: Image.asset(
"assets/images/pdf.png",
height: 200, width: 100
),
),
From Server
Accessing pdf file is quite the same as the two mentioned methods you only need to use PDF.network and need to provide the link and this will show the pdf on your device
PDF.network(
'https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf',
height: 300,
width: 200,
placeHolder: Image.asset("assets/images/pdf.png",
height: 200, width: 100),
),
So these were the best methods to access pdf in from flutter as far as simplicity is a concern.
You can find source code from here :
flutter-devs/flutter_pdf_viewer
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Conclusion
There are different Pdf viewer plugins are available here but this one is the simplest among them because in this plugin you get riddance from all kinds of long and lengthy code, this is the simplest way to view pdf in a flutter.
Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙
If this article has helped you a bit and found interesting please clap!👏
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
