Flutter flutter_pdfview 使い方

内容

flutter_pdfviewの使い方の忘却録。

開発環境

PC : macOS Big Sur
エディター : Visual Studio Code

Flutter 1.22.1
flutter_pdfview 1.0.4

コード

まずは、pubspec.yamlにパッケージを追加
あとは、読み込みたいPDFファイルも追加

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_pdfview: ^1.0.4  <- 追加
       ・
       ・
       ・
  assets:
    - sample.pdf  <- 追加

※Info.plistの修正は今回は必要ないので、追記しない

●ファイルパスを使用する方法

サンプルではassetsフォルダのファイルを読み込んで、ローカルに保存し、パスを指定している。

PDFScreen.dart

class PDFScreen extends StatefulWidget {
  final String path;

  PDFScreen({Key key, this.path}) : super(key: key);

  _PDFScreenState createState() => _PDFScreenState();
}

class _PDFScreenState extends State<PDFScreen> with WidgetsBindingObserver {
  final Completer<PDFViewController> _controller =
      Completer<PDFViewController>();
  int pages = 0;
  int currentPage = 0;
  bool isReady = false;
  String errorMessage = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 省略
      body: Stack(
        children: <Widget>[
          PDFView(
            filePath: widget.path,　　// パスを指定
            enableSwipe: true,
            swipeHorizontal: true,
            autoSpacing: false,
            pageFling: true,
            pageSnap: true,
            defaultPage: currentPage,
            fitPolicy: FitPolicy.BOTH,
            preventLinkNavigation: false,
          // 省略
          ),
          // 省略
        ],
      ),
      // 省略
    );
  }
}

●ファイルパスを使用しない方法

ローカルにデータを保存したくなかったので、ファイルパスではなく、Uint8Listを渡して表示するように変更。

PDFScreen.dart

class PDFScreen extends StatefulWidget {
  final Uint8List pdfData;

  PDFScreen({Key key, this.pdfData}) : super(key: key);

  _PDFScreenState createState() => _PDFScreenState();
}

class _PDFScreenState extends State<PDFScreen> with WidgetsBindingObserver {
  final Completer<PDFViewController> _controller =
      Completer<PDFViewController>();
  int pages = 0;
  int currentPage = 0;
  bool isReady = false;
  String errorMessage = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Document"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {},
          ),
        ],
      ),
      body: Stack(
        children: <Widget>[
          PDFView(
            pdfData: widget.pdfData,    // ファイルパスではなく、Uint8Listを使用
            enableSwipe: true,
            swipeHorizontal: true,
            autoSpacing: false,
            pageFling: true,
            pageSnap: true,
            defaultPage: currentPage,
            fitPolicy: FitPolicy.BOTH,
            preventLinkNavigation: false,
            // 略
          ),
          // 略
        ],
      ),
      // 略
    );
  }
}

PDFScreenを呼び出しているウィジェットでのPDF読み込み処理

PDFRead.dart

Future<void> readPDFData(String assetsPath) async {
  final data = await rootBundle.load(assetsPath);
  _pdfData = data.buffer.asUint8List();
}

サーバーからPDFを読み込むときは
createFileOfPdfUrlメソッド内の
var bytes = await consolidateHttpClientResponseBytes(response);
でUint8Listが取得できる。

httpリクエストの時は、bodyBytesがUint8Listなので、これを使う。

PDFRead.dart

final url = "https://hogehoge/sample.pdf";
final header =  {"sample": "samplesample"};
final request = await http.get(url, headers : header);

if (request.statusCode == 200) {
  _pdfData = request.bodyBytes;
}

参考