Mencoba Membuat Fungsi Print Remote URL File PDF Pada Flutter Desktop

Sudah lumayan lama flutter desktop telah rilis setelah versi 2.0 dan akhirnya mulai stabil pada versi 3.0, saya sendiri cukup senang dengan hal ini dan memang beberapa pengembangan aplikasi desktop akhirnya terbantu dengan adanya flutter. Selang beberapa lama saya akhirnya mencoba untuk membuat sebuah fungsi mencetak dokumen yang biasanya digunakan untuk mencetak bukti pembayaran maupun slip gaji, untuk permulaan saya pernah membuatnya dengan menggunakan layout HTML hanya saja hasilnya kadang tidak sesuai dengan ekspektasi atau bahkan sangat mengecewakan dibeberapa skenario.

Disamping sulit untuk dimaintain penggunaan layout HTML tidak begitu optimal penggunannya jika dikombinasi dengan menggunakan CSS3, akhirnya saya mencoba untuk menggunakan semacam PDF maker untuk membuat dokumen PDF sebagai acuan untuk mencetak invoice tanpa perlu membukanya dibrowser.

Akhirnya saya mencoba untuk mengimplementasikan fungsi cetak dokumen pada project flutter desktop kali ini, dalam case ini saya menggunakan PDF yang digenerate dari backend yang telah saya buat sehingga saya tidak perlu pusing untuk membuat layoutnya lagi di project client lainnya karena kebutuhannya harus seragam antar aplikasi client.

Persiapan

Untuk mempersiapkan hal ini ada beberapa hal yang perlu kalian siapkan selain project flutter berserta SDKnya, yaitu sebagai berikut :

1. Package printing (saat ini saya menggunakan versi 5.9.1)
2. HTTP Client (DIO atau http)
3. File PDF yang tidak terenkripsi

Untuk saat ini package printing bisa digunakan pada semua lintas platform, jadi pastikan kalian memiliki printer yang mendukung masing - masing platform tersebut.

Menerima Response File PDF

Langkah pertama yang kalian harus lakukan adalah menerima response file PDF dari API yang disediakan oleh backend, hal yang perlu diperhatikan adalah file PDF tidak boleh dienkripsi karena nantinya package printing tidak akan bisa membaca file tersebut namun disisi lain jika kalian berminat kalian dapat menggunakan package premium bernama pdf_crypto.

Untuk menerima response file PDF pastikan kalian menerimanya dalam bentuk bytes sehingga package printing dapat melakukan parsing terhadap file tersebut, untuk melakukannya kalian hanya perlu menggunakan http client seperti package http ataupun dio.

Berikut contoh untuk menggunakan package http

import 'package:http/http.dart' as http;
...

Future<void> print() async {
  final Uri url = Uri.parse('https://example.com/file.pdf');
  final payload = await http.get(url);
  // payload.bodyBytes => response ada disini
}

Berikut contoh untuk menggunakan package dio

import 'package:dio/dio.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

class HttpService {
  late Dio dio;

  HttpService() {
    String? baseUrl = dotenv.env['API_URL'];
    dio = Dio(BaseOptions(
        baseUrl: baseUrl, headers: {'Accept': 'application/json'}));
  }

  Future<dynamic> downloadAsBytes(String url) async {
    final response =
        await dio.get(url, options: Options(responseType: ResponseType.bytes));
    return response.data;
  }
}

Future<void> print() async {
  final bytesPayload = await httpService.downloadAsBytes('https://example.com/file.pdf');
}

Melakukan Fungsi Print

Setelah kalian sudah mendapatkan body bytes, selanjutnya kalian hanya perlu untuk menjalankan perintah print pada fungsi yang sama, sebagai contoh kalian dapat lihat pada kode berikut.

import 'package:bbd_desktop_rev2/services/http.dart';
import 'package:flutter/material.dart';
import 'package:printing/printing.dart';

class TransaksiPage extends StatelessWidget {
  TransaksiPage({Key? key}) : super(key: key);
  final HttpService httpService = HttpService();

  Future<void> print() async {
    final bytesPayload = await httpService.downloadAsBytes(
        'https://example.com/file.pdf');
    await Printing.layoutPdf(onLayout: (_) => bytesPayload);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SizedBox(
      child: ElevatedButton(onPressed: () => print(), child: Text('Print')),
    ));
  }
}

Kesimpulan

Dengan cara diatas saya dapat simpulkan bahwa langkah - langkah berikut dapat berhasil dengan baik, iya kalian bisa lihat dari video diatas saya bisa menjalankannya pada sistem operasi linux. Namun sebagai catatan cara ini hanya mencover melakukan fungsi cetak pada file PDF yang tersedia pada backend, namun jika kalian ingin membuka file PDF dari local system kalian juga dapat menggunakan class File untuk mengaksesnya.