Image Load

Hello world,

Kali ini saya mencoba membuat atau mengaplikasikan plugin/package dari flutter yaitu flutter_full_pdf_viewer. Fungsinya adalah untuk menampilkan file PDF ke dalam aplikasi kita. Saya sudah mencoba beberapa package yang ada di pub.dev dan menurut saya untuk saat ini flutter_full_pdf_viewer cukup bagus. Sebelumnya saya pernah juga mencoba package lain untuk menampilkan pdf yang saya temukan dari artikel luar negeri. Akan tetapi karena tidak saya simpan jadi saya sudah lupa package apa yang digunakan. Mungkin kalau nanti saya sudah menemukannya akan saya coba buat artikelnya.

Oke langsung saya kita masuk ke contoh kali ini.

Instalasi

Untuk instalasi kita pakai flutter_full_pdf_viewer dan path_provider yang harus kita tambahkan ke dalam pubspec.yaml.

dependencies:
  flutter_full_pdf_viewer: ^1.0.6
  path_provider: ^1.6.9

Selanjutnya kita buat halaman utamanya seperti berikut.

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
import 'package:path_provider/path_provider.dart';


void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new MyApp(),
));
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('PDF Viewer')),
body: Center(
child: Text("Hello world")
),
);
}
}

Pada contoh di atas kita juga harus menambahkan beberapa package (tanda kuning) selain pdf viewer dan path_provider. Kemudian kita buat sebuah Future untuk melakukan pemrosesan pada file pdf yang ingin ditampilkan. File Pdf yang kita load dari Url secara online akan diproses dan disimpan pada path sementara.

  Future<File> createFileOfPdfUrl(filePDF) async {
final url = filePDF;
final filename = url.substring(url.lastIndexOf("/") + 1);
var request = await HttpClient().getUrl(Uri.parse(url));
var response = await request.close();
var bytes = await consolidateHttpClientResponseBytes(response);
String dir = (await getApplicationDocumentsDirectory()).path;
File file = new File('$dir/$filename');
await file.writeAsBytes(bytes);
return file;
}


Selanjutnya kita jalankan dengan menggunakan initState.

  String pathPDF = "";
String filePDF = "https://www.byriza.com/demo/file-PDF.pdf";

@override
void initState() {
super.initState();
createFileOfPdfUrl(filePDF).then((f) {
setState(() {
pathPDF = f.path;
print(pathPDF);
});
});
}

Dari proses di atas saat dijalankan initState akan dipanggil fungsi createFileOfPdfUrl lalu akan dikembalikan hasilnya dalam bentuk path yang disimpan dalam variable patPDF dengan menggunakan setState. Kemudian kita bisa tampilkan pada halaman kita seperti contoh di bawah. Pada contoh ini PDF akan ditampilkan dengan cara menekan tombol "Open PDF".

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
import 'package:path_provider/path_provider.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new MyApp(),
));
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
String pathPDF = "";
String filePDF = "https://www.byriza.com/demo/file-PDF.pdf";

@override
void initState() {
super.initState();
createFileOfPdfUrl(filePDF).then((f) {
setState(() {
pathPDF = f.path;
print(pathPDF);
});
});
}

Future<File> createFileOfPdfUrl(filePDF) async {
final url = filePDF;
final filename = url.substring(url.lastIndexOf("/") + 1);
var request = await HttpClient().getUrl(Uri.parse(url));
var response = await request.close();
var bytes = await consolidateHttpClientResponseBytes(response);
String dir = (await getApplicationDocumentsDirectory()).path;
File file = new File('$dir/$filename');
await file.writeAsBytes(bytes);
return file;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Plugin example app')),
body: Center(
child: RaisedButton(
child: Text("Open PDF"),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => PDFScreen(pathPDF)),
),
),
),
);
}
}

class PDFScreen extends StatelessWidget {
String pathPDF = "";
PDFScreen(this.pathPDF);

@override
Widget build(BuildContext context) {
return PDFViewerScaffold(
appBar: AppBar(
title: Text("Document"),
),
path: pathPDF,
);
}
}

Bagaima jika ingin menampilkan secara langsung file pdf tersebut tanpa harus menekan tombol? Bentuknya kira-kira seperti berikut.

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
import 'package:path_provider/path_provider.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new MyApp(),
));
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
String pathPDF = "";
String filePDF =
"https://www.byriza.com/demo/file-PDF.pdf";

@override
void initState() {
super.initState();
createFileOfPdfUrl(filePDF).then((f) {
setState(() {
pathPDF = f.path;
print(pathPDF);
});
});
}

Future<File> createFileOfPdfUrl(filePDF) async {
final url = filePDF;
final filename = url.substring(url.lastIndexOf("/") + 1);
var request = await HttpClient().getUrl(Uri.parse(url));
var response = await request.close();
var bytes = await consolidateHttpClientResponseBytes(response);
String dir = (await getApplicationDocumentsDirectory()).path;
File file = new File('$dir/$filename');
await file.writeAsBytes(bytes);
return file;
}

@override
Widget build(BuildContext context) {
return pathPDF == ""
? Scaffold(
appBar: AppBar(
title: Text("Document"),
),
body: Center(
child: CircularProgressIndicator(),
),
)
: PDFViewerScaffold(
appBar: AppBar(
title: Text("Document"),
),
path: pathPDF,
);
}
}


Selamat mencoba :)