Abrir PDF blob base64 (enviado de servidor) en Web o Móvil usando Flutter

Tiempo de lectura: 2 minutos

Hola, hoy vamos a aprender cómo podemos abrir un archivo PDF enviado desde un API REST a nuestra APP Flutter.

Lo primero que vamos a hacer es instalar la librería de PDF para móvil en el pubspec.yaml

  flutter_pdfview: ^1.0.0

Para instalar la librería utiliza:

flutter pub get 

Ahora vamos a crear un Widget que reciba el archivo PDF en Base64.

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/foundation.dart' show kIsWeb;

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

import 'dart:html' as html;

class PDFViewerWidget extends StatelessWidget {
  final Uint8List pdfData;

  const PDFViewerWidget({super.key, required this.pdfData});

  @override
  Widget build(BuildContext context) {
    if (isWeb()) {
      //Descargar PDF:
      html.AnchorElement anchorElement = html.AnchorElement(
          href:
              "data:application/octet-stream;charset=utf-16le;base64,${base64Encode(pdfData)}")
        ..setAttribute("download", "pdf.pdf")
        ..click();
      return Container();
    } else {
      // Si estamos en una aplicación móvil, utiliza PDFView de flutter_pdfview
      return Scaffold(
        appBar: AppBar(
          title: Text('PDF Viewer'),
        ),
        body: PDFView(
          pdfData: pdfData,
          enableSwipe: true,
          swipeHorizontal: true,
          autoSpacing: false,
          pageFling: true,
          onRender: (pages) {
            // Callback opcional cuando el PDF ha sido renderizado
          },
          onError: (error) {
            // Callback opcional para manejar errores
          },
          onPageError: (page, error) {
            // Callback opcional para manejar errores de páginas individuales
          },
          onViewCreated: (PDFViewController viewController) {
            // Puedes guardar una referencia al controlador si necesitas interactuar con el PDF
          },
        ),
      );
    }
  }

  bool isWeb() {
    //Verificar si se ejecuta en web
    return kIsWeb;
  }
}

Este archivo primero verifica si es web o móvil para saber que librería utilizar.

En caso de móvil va a generar una nueva ventana usando PDFView para cargar el PDF dentro de ella.

En caso de web, descargará el PDF directamente como archivo.

Recuerda importar el Widget de esta forma:

await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PDFViewerWidget(pdfData: pdfBytes),
        ),
      );

De esta forma creará una nueva ventana navegable que abrirá este contenedor.