【Flutter】( 超基礎編 )PDFを画面に表示しよう
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);
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);
_PdfPageState createState() => _PdfPageState();
}
class _PdfPageState extends State<PdfPage> {
final pdfController = PdfController(
document: PdfDocument.openAsset('assets/document.pdf'),
);
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: PdfView(
controller: pdfController,
),
);
}
}
Author And Source
この問題について(【Flutter】( 超基礎編 )PDFを画面に表示しよう), 我々は、より多くの情報をここで見つけました https://zenn.dev/mukkun69n/articles/dc45ab6169a0fa著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol