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: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 {
const PDFViewerWidget({super.key, required this.pdfData});
Widget build(BuildContext context) {
html.AnchorElement anchorElement = html.AnchorElement(
"data:application/octet-stream;charset=utf-16le;base64,${base64Encode(pdfData)}")
..setAttribute("download", "pdf.pdf")
// Si estamos en una aplicación móvil, utiliza PDFView de flutter_pdfview
title: Text('PDF Viewer'),
// Callback opcional cuando el PDF ha sido renderizado
// 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
//Verificar si se ejecuta en web
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;
}
}
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:
builder: (context) => PDFViewerWidget(pdfData: pdfBytes),
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PDFViewerWidget(pdfData: pdfBytes),
),
);
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PDFViewerWidget(pdfData: pdfBytes),
),
);
De esta forma creará una nueva ventana navegable que abrirá este contenedor.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.
Post Views: 14
Relacionado