Genear PDFs en Flutter: Crea, Comparte y Visualiza

- Andrés Cruz

In english

Los PDFs (Portable Document Format) son el esquema por excelencia para compartir textos con formatos en un archivo, son fáciles de interpretar y no requieren un programa propietario como en el caso de los archivos de Microsoft Word. Los PDFs al ser un formato ya listo y sin posibilidad de modificarlos (aunque sí se pueden modificar con algunos programas específicos) como si fueran una imagen, es una excelente manera de compartir documentos y en las aplicaciones móviles y de escritorio y de ningún tipo en general pueden faltar, y en Flutter estamos de suerte ya que se pueden emplear muy fácilmente.

1. Configuración Inicial

Antes de comenzar a desarrollar, debemos de configurar el plugin o pub en nuestro proyecto:

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  pdf: 
  printing: 
  • pdf: Esta biblioteca nos permite crear y editar PDFs en Flutter.
  • printing: Nos permite previsualizar, compartir e imprimir los PDFs generados desde nuestra aplicación.

2. Creando un Modelo de Factura

Supongamos que deseas generar facturas para tus clientes, que es el enfoque más común para querer compartir y generar PDFs en Flutter. Primero, crea un modelo de datos para representar una factura. Puedes incluir información relevante como el nombre del cliente, los ítems de la factura y el total a pagar, este modelo puede ser cualquier cosa según tus necesidades como una publicación.

3. Diseñando la Interfaz

Diseña una interfaz de usuario donde los usuarios puedan ingresar los detalles de la factura. Utiliza widgets como TextFormField, ListView, y RaisedButton para capturar la información necesaria. Este paso es opcional ya que, puede que sean algunos datos estáticos o datos que provengan de alguna base de datos o similar así que, tampoco es importante para la creación del pdf y depende de tus necesidades o las del proyecto.

4. Generando el PDF

Este paso si es fundamental y se debe de generar el PDF, que es el factor importante en esta entrada así que, una vez que tengas los datos de la factura, vamos a generar el PDF con los paquetes anteriores, mediante la librería de pdf instalada antes,  creamos un widgets especial que mediante un árbol de widgets permite generar el documento PDF; puedes utilizar cualquier tipo de widget visual de Flutter para esta tarea para generar textos, imágenes, tablas, etc:

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;

// ...

final pdf = pw.Document();
pdf.addPage(
  pw.Page(
    build: (context) {
      return pw.Center(
        child: pw.Text('Factura para Cliente X'),
      );
    },
  ),
);

5. Previsualización y Compartición

Con el PDF generado, es momento de emplear la biblioteca printing para previsualizar el PDF antes de guardarlo o enviarlo al cliente. Puedes mostrarlo en un PdfPreview o incluso enviarlo por correo electrónico directamente desde tu aplicación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
             
              final response = await http.get('http://example.com/sample.pdf');
              final pdfData = response.bodyBytes;

              await Printing.layoutPdf(onLayout: (PdfPageFormat format) async => pdfData);
            },
            child: Text('Show PDF'),
          ),
        ),
      ),
    );
  }
}
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.