How to Add a PDF, Word, Excel, and PowerPoint Viewer to a Flutter App
By Andrey Safonov | 2019 Feb 08
3 min
Tags
tutorial
flutter
office
view
When Google first released their mysterious Fuchsia OS in 2016, it was claimed that it could run on virtually anything—from a smartwatch to your car’s dashboard entertainment system—setting the stage for complete integration of Google products into any home IoT environment.
Fast forward a couple years and Fuchsia hasn’t yet achieved ubiquity among smart devices. But Flutter, Fuchsia’s open source mobile app SDK, has certainly gained popularity as a way to build iOS and Android apps that look the same. Now Google claims thousands of apps on the Google Play and Apple App stores have been built using Flutter. And it’s not hard to see why developers prefer Flutter. Its well-written documentation, near-native rendering performance via the Skia 2D engine, and support for hot reload make building cross-platform delightful.
Since Apryse SDKs are cross-platform, we knew we had to release Flutter support. In this tutorial, we’ll walk you through how to add a PDF and MS Office document viewer to a Flutter app via the Apryse SDK. All of the code is available on our Github.
Here is the Android UX you will create:
Here is the iOS:
Adding a Document Viewer with Apryse
You can open any PDF files, office files, or images with a simple API call to PdftronFlutter.openDocument.
First, add the Apryse flutter dependency to your project’s dependency list:
pdftron_flutter:
git:
url: git://github.com/PDFTron/pdftron-flutter.git
Then use the Apryse openDocument API to view any documents:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:pdftron_flutter/pdftron_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _version = 'Unknown';
@override
void initState() {
super.initState();
initPlatformState();
PdftronFlutter.openDocument("https://pdftron.s3.amazonaws.com/downloads/pdfref.pdf");
}
// Platform messages are asynchronous, so we initialize via an async method.
Future<void> initPlatformState() async {
String version;
// Platform messages may fail, so we use a try/catch PlatformException.
try {
PdftronFlutter.initialize();
version = await PdftronFlutter.version;
} on PlatformException {
version = 'Failed to get platform version.';
}
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
setState(() {
_version = version;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('PDFTron flutter app'),
),
body: Center(
child: Text('Running on: $_version\n'),
),
),
);
}
}
That’s it! You now have a fully featured document viewer for your cross-platform Flutter application.
Apryse SDK for mobile comes with many out-of-the-box controls and tools that can be wrapped in Flutter. If you are interested in seeing its full capabilities, you can visit our Flutter PDF library documentation section to get started. If you have any questions, please feel free to contact us, or if you are interested in any other features, you can submit a feature request. You are also very welcome to improve our open-source Flutter wrapper. Please submit a pull request if you are interested. Stay tuned for future improvements on our Apryse Flutter wrapper!
To get started, you can clone Apryse's open source Flutter wrapper.
Learn how to create a simple app using Flutter with the open source convenience wrapper for the Apryse mobile SDK. Read the blog.
Conclusion
Flutter is an exciting new platform and definitely worth looking into for your next cross-platform app. I am looking forward to seeing what apps you come up with. Please feel free to message me and share your creations!
If you have any questions about Apryse's PDF SDK, please feel free to get in touch!
You can find the source code for this blog post at Github.
Tags
tutorial
flutter
office
view
Andrey Safonov
Director of Product
Related Products
Share this post
