import 'package:flutter/material.

dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: '',
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a purple toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'E-Commerce'),
);
}
}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

// This widget is the home page of your application. It is stateful, meaning

// that it has a State object (defined below) that contains fields that affect
// how it looks.

// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;
 void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(
widget.title,
style: TextStyle(
color: Colors.white,
fontStyle: FontStyle.italic,
),
),
leading: Icon(
Icons.menu,
color: Colors.white,
),
actions: [
Container(
margin: EdgeInsets.fromLTRB(0, 0, 15, 0),
child: Icon(
Icons.add,
color: Colors.white,
),
),
],
),
body: Column(

children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
)
],
),
);

}
}
mes recherches
Développeurs Siro
Développeurs Siro

Suivre

Produire des PDF dans votre application Flutter 1/2

Photo de dlxmedia.hu sur Unsplash

Produire des PDF dans votre application Flutter 1/2

Photo de Siro Devs

Développeurs Siro
·
19 novembre 2023
·
7 minutes de lecture

Table des matières

Introduction
Commencer
Étape 1 : Créer un nouveau projet Flutter
Étape 2 : Ajoutez les packages nécessaires
Étape 3 : Créez les classes/fichiers nécessaires
Étape 4 : Créer un document PDF
Étape 5 : Enregistrer le document PDF dans le stockage
Étape 6 : Affichage du document PDF
Conclusion
Introduction
Flutter devient rapidement un choix privilégié pour le développement d'applications
mobiles multiplateformes en raison de sa capacité à écrire du code une seule fois
et à le déployer universellement, garantissant ainsi des expériences utilisateur
cohérentes. Au-delà de sa compétence dans la création d'interfaces visuellement
captivantes, Flutter fournit une gamme de bibliothèques et de plugins fiables pour
gérer diverses tâches, telles que la création de documents PDF. Cet article examine
le processus de génération de documents PDF au sein d'une application Flutter,
ouvrant la voie à la production automatisée de rapports, de factures et de divers
contenus basés sur des documents.

Commencer
Pour commencer à générer des documents PDF dans une application Flutter, nous
utiliserons un package populaire appelé PDF . Ce package fournit un moyen simple de
créer des fichiers PDF par programme.

Étape 1 : Créer un nouveau projet Flutter

Ouvrez votre terminal ou votre invite de commande et créez un nouveau projet
Flutter :

COPIE

COPIE
flutter create my_pdf_app
Accédez au répertoire du projet :

COPIE
COPIE
cd my_pdf_app
Étape 2 : Ajoutez les packages nécessaires
Nous avons besoin de 3 packages pour que notre exemple simple fonctionne :

pdf : permet de créer un document complet de plusieurs pages avec des graphiques,
des images et du texte à l'aide des polices TrueType

path_provider : sert à rechercher les emplacements couramment utilisés sur le

système de fichiers

easy_pdf_viewer : nous aide à visualiser le pdf une fois généré

Pour ajouter tous ces packages à la fois, exécutez la commande suivante

COPIE

COPIE
flutter pub add easy_pdf_viewer path_provider pdf
Vous pouvez ouvrir votre pubspec.yamlfichier pour confirmer si le pdfpackage a été
ajouté en tant que dépendance :

COPIE

COPIE
dependencies:
flutter:
sdk: flutter
easy_pdf_viewer: ^1.0.7
path_provider: ^2.1.1
pdf: ^3.10.4
Étape 3 : Créez les classes/fichiers nécessaires

Nous créons d’abord un main_screen.dartfichier pour notre page principale que nous
pouvons placer dans screensle répertoire d’une application propre.

COPIE

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

class MainScreen extends StatefulWidget {

const MainScreen({super.key});

@override
State<MainScreen> createState() => MainScreenState();
}

class MainScreenState extends State<MainScreen> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
 backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('My PDF App'),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
// our action of PDF Generation goes here
},
child: const Text('Generate PDF'),
),
),
);
}
}
Ajustons notre main.dartpointage vers la classe MainScreen

COPIE

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

import 'screens/main_screen.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My PDF App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MainScreen(),
);
}
}
Créons un pdf_utils.dartfichier sous utilsle répertoire

COPIE

COPIE
import 'dart:io';

class PdfUtils {
PdfUtils._();

static Future<File> generatePDF() async {

final pdfFile = File();
}
}
Étape 4 : Créer un document PDF
Ensuite, améliorez notre fonction generatePDF afin qu'elle puisse générer un
document PDF comme nous le souhaitions.

COPIE

COPIE
import 'dart:io';

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

class PdfUtils {
PdfUtils._();
static Future<File> generatePDF() async {
final pdfFile = File();

pdf.addPage(
pw.Page(
margin: const pw.EdgeInsets.all(10),
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(
child: pw.Text(
"This is a text!",
style: pw.TextStyle(
fontSize: 30,
color: PdfColors.red900,
fontWeight: pw.FontWeight.bold,
),
),
);
},
),
);
return pdfFile;
}
}
Décomposons le code étape par étape :

Instructions d'importation : les instructions d'importation apportent les

bibliothèques et les packages nécessaires pour travailler avec des PDF. dart:ioest
importé pour la manipulation de fichiers et le pdfpackage est utilisé pour créer et
manipuler des documents PDF. L' as pwalias est utilisé pour faciliter le travail
avec les pdfwidgets du package.

Génération PDF :

COPIE

COPIE
pdf.addPage(
pw.Page(
margin: const pw.EdgeInsets.all(10),
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(
child: pw.Text(
 "This is a text!",
style: pw.TextStyle(
fontSize: 30,
color: PdfColors.red900,
fontWeight: pw.FontWeight.bold,
),
),
);
},
),
);
Cet extrait de code ajoute une page au document PDF à l'aide de la méthode pdfdu
package addPage. Il définit les propriétés de la page, telles que les marges, le
format de la page (A4 dans ce cas) et le contenu à afficher sur la page. Dans cet
exemple, la page contient un élément de texte centré avec un style spécifique.

La buildfonction définit le contenu de la page. Dans ce cas, il renvoie un

pw.Centerwidget contenant un élément texte.

Cependant, lorsque vous l'exécuterez, ce code n'affichera rien tant que vous
n'aurez pas effectué les actions suivantes décrites ci-dessous.

Étape 5 : Enregistrer le document PDF dans le stockage

Nous devrons améliorer la fonction generatePDF pour qu'elle puisse dans un premier
temps sauvegarder le PDF généré

COPIE

COPIE
import 'dart:io';
import 'dart:developer' as logger show log;

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

class PdfUtils {
PdfUtils._();

static Future<File> generatePDF() async {

final pdf = pw.Document();
// fetching a directory to save our pdf to
Directory filePath = await getApplicationDocumentsDirectory();

pdf.addPage(
pw.Page(
margin: const pw.EdgeInsets.all(10),
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(
child: pw.Text(
"This is a text!",
style: pw.TextStyle(
fontSize: 30,
color: PdfColors.red900,
fontWeight: pw.FontWeight.bold,
),
),
 );
},
),
);

final pdfFile = File('${filePath.path}/my_example.pdf');

logger.log('Saved to: ${pdfFile.path}');
await pdfFile.writeAsBytes(await pdf.save());
return pdfFile;
}
}
Ce code Dart définit une classe utilitaire appelée PdfUtilsqui génère un document
PDF à l'aide du pdfpackage et l'enregistre dans le système de fichiers de
l'appareil. Décomposons le code étape par étape :

Importation de dépendances où j'en ai ajouté 2 autres :

dart:developer as logger: Cet alias importe la logfonction depuis la

dart:developerbibliothèque, vous permettant de journaliser les messages.

package:path_provider/path_provider.dart: Ce package est utilisé pour accéder au

système de fichiers de l'appareil, en particulier au répertoire de documents de
l'application.

Création du document PDF :

Cela commence par créer un nouvel pw.Documentobjet, qui représentera notre document
PDF.
Obtenir le répertoire de documents :

getApplicationDocumentsDirectory()est une fonction asynchrone du

path_providerpackage. Il récupère le répertoire de documents de l'application, qui
est un répertoire spécifique à la plateforme dans lequel vous pouvez stocker les
données utilisateur. Ce répertoire est un emplacement approprié pour enregistrer
les fichiers générés par l'utilisateur, tels que les bases de données et, dans ce
cas, les PDF.
Définition du chemin du fichier PDF :

Il spécifie le chemin du fichier où le PDF généré sera enregistré à l'aide de

File('${filePath.path}/my_example.pdf'). La filePathvariable contient le chemin
d'accès au répertoire de documents de l'application.
Enregistrement du chemin du fichier :

Le code enregistre le chemin où le fichier PDF sera enregistré à l'aide de

logger.log(). Cela peut être utile à des fins de débogage pour savoir où le fichier
est stocké.
Enregistrer et renvoyer le PDF :

Il enregistre le contenu PDF dans le chemin de fichier spécifié à l'aide de . La

méthode renvoie le contenu PDF sous forme de liste d'octets, qui est ensuite écrite
dans le fichier.await pdfFile.writeAsBytes(awaitpdf.save())pdf.save()
Retour du fichier :

Enfin, la méthode renvoie l' Fileobjet représentant le fichier PDF enregistré.

Étape 6 : Affichage du document PDF
Pour utiliser cette PdfUtilsclasse dans le répertoire utils, je dois appeler la
generatePDF()méthode, et elle générera un document PDF avec le contenu spécifié et
l'enregistrera dans le répertoire de documents de l'application. Je peux ensuite
utiliser ce fichier PDF généré selon mes besoins dans mon application. Le modifié
main_screen.dartressemblera désormais à ceci :

COPIE

COPIE
import 'package:easy_pdf_viewer/easy_pdf_viewer.dart';
import 'package:flutter/material.dart';

import '../utils/pdf_utils.dart';

class MainScreen extends StatefulWidget {

const MainScreen({super.key});

@override
State<MainScreen> createState() => MainScreenState();
}

class MainScreenState extends State<MainScreen> {

late PDFDocument pdfDoc;

void openPdfViewer() {
final pdfViewer = PDFViewer(document: pdfDoc);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => pdfViewer),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('My PDF App'),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
final pdf = await PdfUtils.generatePDF();
pdfDoc = await PDFDocument.fromFile(pdf);
openPdfViewer();
},
child: const Text('Generate PDF'),
),
),
);
}
}
Dans ce code, lorsque j'appuie sur le bouton "Générer un PDF", la
generatePDFfonction est appelée, qui génère le document PDF. Pour afficher le PDF,
vous pouvez utiliser des packages tels que easy_pdf_viewer, qui permettent aux
utilisateurs de visualiser les fichiers PDF dans l'application dans un écran séparé
appelé PDFViewer.

Conclusion
Comme vous l'avez vu, générer un document PDF est aussi simple que d'écrire une
arborescence de widgets normale, sauf que vous devez travailler avec pw.Document
dans tous vos widgets. Les widgets habituels auxquels vous êtes habitué doivent
être dérivés du pw qui est un alias du package pdf. De plus, vous n'aurez pas
besoin d'autorisations en écriture sur votre appareil, qu'il soit Android ou iOS,
si vous avez l'intention d'enregistrer le PDF dans le répertoire de documents de
l'application, qui est un répertoire spécifique à la plate-forme.

Vous pouvez trouver le code source de l'application que j'ai créée lors de la
rédaction de ce tutoriel sur Github :

Mon exemple d'application PDF

Diapositives pour cet article

Dans le prochain article, qui fera suite à celui-ci, j'aborderai la production de

documents PDF avancés impliquant plus d'une page avec des tableaux. Bon codage !

Battement
Android
IOS
pdf
Écrit par

Développeurs Siro
Développeurs Siro
Ingénieur logiciel et rédacteur technique, meilleur en développement d'applications
mobiles Flutter, développement full stack avec Mern. D'autres domaines sont comme
Android, .Net et Qt

Suivre

PLUS D'ARTICLES

Photo de Siro Devs

Développeurs Siro
Configurer Flutter en tant que débutant
Configurer Flutter en tant que débutant
Premiers pas avec Flutter Flutter est un framework passionnant qui vous permet de
créer de magnifiques cro …

Photo de Siro Devs

Développeurs Siro
Choisir un outil multiplateforme en 2024
Choisir un outil multiplateforme en 2024
Introduction Après avoir examiné la comparaison complète entre le développement
multiplateforme et natif …

Photo de Siro Devs

Développeurs Siro
Développement multiplateforme en 2024 3/3
Développement multiplateforme en 2024 3/3
Introduction Dans mon précédent article Développement multiplateforme en 2024 2/3
j'ai exploré 3 plateformes multiplateformes …

© 2024 Développeurs Siro

Archive
·
Politique de confidentialité
·
Termes
Écrire sur Hashnode
Propulsé par Hashnode - Accueil pour les rédacteurs et lecteurs techniques