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 PDFTron’s SDKs are cross-platform, we knew we had to release Flutter support. In this blog, we’ll walk you through how to add a PDF and MS Office document viewer to a Flutter app via the PDFTron SDK. All of the code is available on our Github here.

linkAdding a Document Viewer with PDFTron

You can open any PDF files, office files or images with a simple API call to PdftronFlutter.openDocument.

First, add the PDFTron flutter dependency to your project’s dependency list:

pdftron_flutter:
    git:
      url: git://github.com/PDFTron/pdftron-flutter.git

Then use the PDFTron 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("your_pdftron_license_key");
      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.

PDFTron SDK for mobile comes with many out-of-the-box controls and tools that can be wrapped in Flutter. If you are interested to see any of the controls and tools in Flutter, please feel free to contact us or 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 PDFTron Flutter wrapper!

To get started, you can clone PDFTron's open source Flutter wrapper here.

linkConclusion

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! You can find me on Medium.

If you have any questions about PDFTron's PDF SDK, please feel free to get in touch!

You can find the source code for this blog post at Github.