Image Load

Hello world,

Pada artikel sebelumnya saya menggunakan flutter_full_pdf_viewer untuk menampilkan file Pdf pada flutter. Hasilnya cukup bagus  denga menampilkan file pdf secara utuh dan kita bisa scroll ke bawah sepanjang halaman pdf. Seperti yang saya tulis sebelumnya saya pernah mencoba package lain dan akhirnya saya menemukannya di kodingan lama saya. Dan package yang akan digunakan kali ini adalah flutter_plugin_pdf_viewer.

Apa keunggulannya? secara fungsinya sama saja tetapi ada tambahan yang menarik dimana penggunaannya lebih simple dari pada contoh sebelumnya yaitu ada fitur navigasi untuk berpindah ke halaman selanjutnya dan halaman sebelumnya. Ada juga navigasi untuk menuju ke halaman yang diinginkan secara langsung.

Instalasi

Yang kita butuhkan pada contoh kali ini cukup flutter_plugin_pdf_viewer saja.

dependencies:
  flutter_plugin_pdf_viewer: ^1.0.7

Kemudian kita buat halaman utamanya seperti berikut

import 'package:flutter/material.dart';
import 'package:flutter_plugin_pdf_viewer/flutter_plugin_pdf_viewer.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")
),
);
}
}

Kemudian kita buat sebuah fungsi untuk melakukan pemrosesan pada file pdf yang ingin ditampilkan. File Pdf yang kita load dari Url secara online ataupun offline.

Contoh file offline (dari lokal asset aplikasi).

Tambahkan file pdf di project kita pada folder assets/file-PDF.pdf. Dan menambahkannya pada pubspec.yaml

assets:
- assets/file-PDF.pdf

Dan prosesnya seperti berikut.

document = await PDFDocument.fromAsset('assets/file-PDF.pdf');


Contoh file Url.

document = await PDFDocument.fromURL("https://www.byriza.com/demo/file-PDF.pdf");


Full code-nya kira-kira seperti berikut.

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

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

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

class _MyAppState extends State<MyApp> {
bool _isLoading = true;
PDFDocument document;

@override
void initState() {
super.initState();
loadDocument();
}

loadDocument() async {
document = await PDFDocument.fromAsset('assets/file-PDF.pdf');
setState(() => _isLoading = false);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('PDF Viewer'),
),
body: Center(
child: _isLoading
? Center(child: CircularProgressIndicator())
: PDFViewer(document: document)),
),
);
}
}


Kita tinggal mengganti kode bertanda kuning untuk mengganti load pdf secara offline ataupun online.

Preview


Selamat mencoba :)