😽

【Flutter】（超基礎編）PDFを画面に表示しよう

2022/04/02に公開

Flutter

1. native_pdf_view

PDFを画面に表示するためのパッケージ
pdfControllerに表示するPDFのファイルのパスを設定
PdfView()にてPDFのファイルを画面に表示する

2. やりたいこと

プロジェクトのローカルに格納されているPDFファイルを表示したいと思います。
※アプリ開発において、利用規約などをPDFファイルとして表示させるケースがあります。

3. 詳しく書くよ

ではPDFを画面に表示するための手順を説明します。

まずは、native_pdf_viewパッケージを追加します。

flutter pub add native_pdf_view

次に、assetsフォルダを新規に追加し、そのフォルダ内にPDFファイルを格納します。

その次に、PdfControllerにて表示するPDFファイルのパスを設定します。

final pdfController = PdfController(
  document: PdfDocument.openAsset('assets/document.pdf'),
);

最後に、bodyにPdfViewを記載します。

body: PdfView(
  controller: pdfController,
),

4. ソースコードの全体像

下記のURLから今回のプロジェクトをクローンできます。
もしよければ、Githubアカウントのフォローやスターをしてくださると嬉しいです😀

main.dart

import 'package:flutter/material.dart';
import 'package:pdfx/pdfx.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PdfPage(),
    );
  }
}

class PdfPage extends StatefulWidget {
  const PdfPage({Key? key}) : super(key: key);

  @override
  _PdfPageState createState() => _PdfPageState();
}

class _PdfPageState extends State<PdfPage> {
  final pdfController = PdfController(
    document: PdfDocument.openAsset('assets/document.pdf'),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: PdfView(
        controller: pdfController,
      ),
    );
  }
}

1. native_pdf_view

2. やりたいこと

3. 詳しく書くよ

4. ソースコードの全体像

Discussion