Flutter Community ha creado varios paquetes para trabajar con archivos PDF en nuestras aplicaciones. En este artículo, crearemos una aplicación simple de generación de PDF. Esta aplicación convertirá un texto sin formato a PDF. Los paquetes que vamos a necesitar se enumeran a continuación con sus usos:
- pdf: es una biblioteca de creación de PDF para flutter. Puede crear un documento completo de varias páginas con imágenes, tablas, diferentes fuentes, etc.
- flutter_full_pdf_viewer: Se utiliza para obtener una vista previa del PDF.
- path_provider: se utiliza para encontrar ubicaciones de uso común en el sistema de archivos.
Ahora vamos a hacer un poco de codificación.
Primero, tenemos que instalar los paquetes necesarios en la sección de dependencias del archivo pubspec.yaml como se muestra a continuación:
1. Página de pantalla de vista previa de PDF:
Ahora que los paquetes están instalados primero, vamos a crear una pantalla de vista previa de PDF como un nuevo archivo dart ( pdf_preview_screen.dart ) con la ruta dada como se muestra a continuación:
Dart
import 'package:flutter/material.dart';
import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';
class PdfPreviewScreen extends StatelessWidget {
final String path;
PdfPreviewScreen({this.path});
@override
Widget build(BuildContext context) {
return PDFViewerScaffold(
path: path,
);
}
}
En esta página hemos creado PDFPreviewScreen como StatelessWidget con la ruta del archivo PDF como parámetro.
2. Página principal:
Hemos importado los paquetes necesarios para crear el diseño deseado. Aquí hemos importado ‘ paquete:pdf/widgets.dart ‘ como pw porque el paquete de material ya tiene una clase de widget.
Dart
import 'dart:io'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; import 'package:pdf/pdf.dart'; import 'package:pdf/widgets.dart' as pw; import 'package:pdf_demo/pdf_preview_screen.dart';
Esta es la función principal que se llama cuando se inicia la aplicación:
Dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PDF Demo',
theme: ThemeData(
primarySwatch: Colors.grey,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
El paquete de widgets de pdf tiene diferentes tipos de widgets para crear el diseño deseado. MyHomePage() es un StatelessWidget que contiene el código para la creación de PDF. Ahora vamos a agregar contenido a la aplicación. Crearemos una función writeOnPdf() para este propósito:
Dart
class MyHomePage extends StatelessWidget {
final pdf = pw.Document();
writeOnPdf() {
pdf.addPage(pw.MultiPage(
pageFormat: PdfPageFormat.a4,
margin: pw.EdgeInsets.all(32),
build: (pw.Context context) {
return <pw.Widget>[
pw.Header(
level: 0,
child: pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
children: <pw.Widget>[
pw.Text('Geeksforgeeks', textScaleFactor: 2),
])),
pw.Header(level: 1, text: 'What is Lorem Ipsum?'),
// Write All the paragraph in one line.
// For clear understanding
// here there are line breaks.
pw.Paragraph(
text:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus
vitae aliquet nec. Nibh cras pulvinar mattis nunc sed blandit libero
volutpat. Vitae elementum curabitur vitae nunc sed velit. Nibh tellus
molestie nunc non blandit massa. Bibendum enim facilisis gravida neque.
Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Enim diam
vulputate ut pharetra sit. Tellus pellentesque eu tincidunt tortor
aliquam nulla facilisi cras fermentum. '),
pw.Paragraph(
text:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus
vitae aliquet nec. Nibh cras pulvinar mattis nunc sed blandit libero
volutpat Vitae elementum curabitur vitae nunc sed velit. Nibh tellus
molestie nunc non blandit massa. Bibendum enim facilisis gravida neque.
Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Enim diam
vulputate ut pharetra sit. Tellus pellentesque eu tincidunt tortor
aliquam nulla facilisi cras fermentum. '),
pw.Header(level: 1, text: 'This is Header'),
pw.Paragraph(
text:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus
vitae aliquet nec. Nibh cras pulvinar mattis nunc sed blandit libero
volutpat. Vitae elementum curabitur vitae nunc sed velit. Nibh tellus
molestie nunc non blandit massa. Bibendum enim facilisis gravida neque.
Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Enim diam
vulputate ut pharetra sit. Tellus pellentesque eu tincidunt tortor aliquam
nulla facilisi cras fermentum. Consectetur adipiscing elit duis tristique
sollicitudin nibh sit. '),
pw.Paragraph(
text:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus
vitae aliquet nec. Nibh cras pulvinar mattis nunc sed blandit libero
volutpat. Vitae elementum curabitur vitae nunc sed velit. Nibh tellus
molestie nunc non blandit massa. Bibendum enim facilisis gravida neque.
Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Enim diam
vulputate ut pharetra sit. Tellus pellentesque eu tincidunt tortor aliquam
nulla facilisi cras fermentum. Consectetur adipiscing elit duis tristique
sollicitudin nibh sit. '),
pw.Padding(padding: const pw.EdgeInsets.all(10)),
pw.Table.fromTextArray(context: context, data: const <List<String>>[
<String>['Year', 'Sample'],
<String>['SN0', 'GFG1'],
<String>['SN1', 'GFG2'],
<String>['SN2', 'GFG3'],
<String>['SN3', 'GFG4'],
]),
];
},
));
}
Los widgets disponibles en este paquete no son los mismos que los disponibles en el paquete de material. Se utilizan para estructurar el diseño del documento. Aquí hemos creado el documento con algunos encabezados, párrafos y tablas para mostrar cómo se puede crear la estructuración básica.
Dart
Future savePdf() async {
Directory documentDirectory = await getApplicationDocumentsDirectory();
String documentPath = documentDirectory.path;
File file = File("$documentPath/example.pdf");
file.writeAsBytesSync(pdf.save());
}
La función savePdf() se usa para guardar el PDF que luego se usa para obtener una vista previa del documento desde la ruta provista. Después de escribir las líneas de código anteriores, tenemos que volver a ejecutar la aplicación.
El código anterior es para la pantalla que obtendremos después de ejecutar la aplicación. Contiene una barra de aplicaciones junto con un botón elevado que se usa para generar y obtener una vista previa del PDF que hemos creado escribiendo la línea de código anterior. Pasamos una función asíncrona al parámetro onPressed del botón, ya que se necesita la ubicación del archivo, lo que devuelve un futuro como ya almacenado al guardar el archivo. Este es también el final de la clase MyHomePage .
Dart
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Geeksforgeeks"),
),
body: Container(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: RaisedButton(
color: Colors.blueGrey,
child: Text(
'Preview PDF',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.white),
),
onPressed: () async {
writeOnPdf();
await savePdf();
Directory documentDirectory =
await getApplicationDocumentsDirectory();
String documentPath = documentDirectory.path;
String fullPath = "$documentPath/example.pdf";
print(fullPath);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PdfPreviewScreen(
path: fullPath,
)));
},
),
),
],
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por muazzamfaraaz y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA