Presentation Flutter

Introduction à Flutter
Imider Abdessamad, Zoulaikhi Naima, Nefdaoui

Aymane
Master IAII
Faculté des Sciences et Techniques
Université Cadi Ayyad, Marrakech
March 13, 2024
Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 1 / 86

Plan I
1 Introduction
2 Installation et configuration de l’environnement de

développement
3 Première application Flutter
4 Widgets et UI avec Flutter
5 Gestion des États dans Flutter
6 Navigation dans les Applications Flutter
7 Interaction avec les Données

Plan II
8 Intégration de Firebase avec Flutter
9 Conclusion

Introduction
Introduction
Introduction à Flutter
Flutter est un projet open source développé par Google. Il s’appuie sur le
langage de programmation DART, lancé en 2011. Flutter est un
Framework capable de faire du développement multiplateformes. L’objectif
du projet Flutter est de permettre de développer de manière rapide et
simplifiée des applications mobiles multiplateformes. En d’autres termes
avec Flutter, vous développez une seule et unique application qui
fonctionnera à la fois sur les plateformes iOS et Android. Le design de
l’application est identique que vous soyez sur un appareil iOS ou Android.
Pour ce faire, Flutter met à disposition ses propres Widgets qui
représentent des éléments graphiques iOS et Android.

Introduction Les avantages
Les avantages de Flutter

Très bonnes performances, proches du natif
▶ Flutter propose un code commun qui fonctionne aussi bien sur iOS que
sur Android.
▶ Il n’y a pas de restriction, vous pouvez quasiment tout imaginer, tout
faire.
Un framework avantageux pour les développeurs
▶ Flutter permet par exemple de recharger la page automatiquement sans
qu’aucune action particulière ne soit nécessaire. Ce rechargement de
code est très apprécié par les développeurs, car il permet de simplifier
le débuggage.
▶ Le développement est résolument plus simple et plus rapide que celui
des technologies multiplateformes.
▶ Enfin, certains disent que Flutter est si simple à prendre en main, qu’il
n’est pas nécessaire d’avoir de solides connaissances en développement
pour le manipuler.
▶ Le build des applications est très rapide, le temps de compilation est
largement réduit. Ce gain de temps est rendu possible grâce à la
fonctionnalité Hot Reload de DART.
Introduction Les avantages
Les avantages de Flutter (suite)

N’importe quel environnement de développement peut être utilisé
avec Flutter : Android Studio, Visual Studio Code etc.
La conception design considérablement simplifiée
▶ Grâce à Flutter il est beaucoup plus facile d’intégrer des animations
dans les applications mobiles.
▶ Une large palette de composants Material est disponible. Le Material
Design est un langage visuel proposé par Google destiné aux
applications mobile first avec une approche Flat Design.
▶ Il y a très peu de limitations, il est pratiquement possible de tout faire.
▶ Le gros point fort de Flutter : c’est moins de code pour le même
résultat en natif sur iOS et Android.
Une maintenance accélérée et optimisée
▶ Les corrections de bugs sont rapides et régulières.
▶ Même les anciennes versions d’OS sont supportées à partir d’iOS 8 et
+ et à partir d’Android 4.1 et +

Installation et configuration de l’environnement
de développement
Installation et configuration de l’environnement de
développement
Installation de l’environnement
Pour fonctionner, Flutter nécessite Windows 7 SP1 ou supérieur (64bits),
Windows PowerShell 5.0 ou supérieur (dans notre cas déjà préinstallé avec
Windows 10) et Git version 2.x ou supérieur. Pour connaı̂tre votre version
de PowerShell, ouvrez une console PowerShell. Une fois que c’est fait,
saisissez cette commande : $PsVersionTable
Vous obtiendrez un résultat suivant :

développement
Installation de Git
Vous avez déjà git ? Si git est déjà installé sur votre machine, vérifiez bien
que vous pouvez exécuter des commandes git depuis l’invite de commande
ou depuis PowerShell. Par exemple en saisissant la commande : git
-–version Cela vous permettra par la même occasion de vérifier votre
version. Si vous n’avez pas à minima la version 2.0, mettez-le à jour.

développement
Installation de Git (Suite)

Vous n’avez pas git Pour installer git, rendez-vous directement sur
https://git-scm.com/downloads puis télécharger la dernière version en
cliquant sur Download x.xx.x for Windows.
Une fois téléchargé, lancez le programme d’installation en suivant les

instructions (vous pouvez laisser toutes les options par défaut).

développement
Installation de d’Android Studio
Pour télécharger la dernière version d’Android Studio rendez-vous sur

https://developer.android.com/studio/, puis cliquez sur Download
Android Studio.

développement
Installation de SDK Flutter
Enfin, il ne reste plus qu’à installer le SDK de Flutter. Pour cela

rendez-vous sur la page
https://flutter.dev/docs/get-started/install/windows puis
cliquez sur le bouton permettant de télécharger la dernière version stable
de Flutter.

développement
Installation de SDK Flutter (Suite)

Puis :
Une fois l’archive zip téléchargée, extraire les fichiers et placez le contenu
à l’emplacement d’installation souhaité pour le SDK Flutter, par
exemple,C:/flutter.
développement

développement
Il faut maintenant modifier nos variables d’environnement Windows pour

lui indiquer l’emplacement de Flutter.Dans la barre de recherche Démarrer,
saisissez ”modifier les varia” et sélectionnez Modifier les variables
d’environnement.
développement
Dans la nouvelle fenêtre Variables d’environnement, Sous Variables

utilisateur pour xxx (où xxx est votre nom d’utilisateur), vérifiez s’il existe
une entrée appelée Path. sélectionnez l’entrée Path, puis cliquez sur le
bouton Modifier. . .
développement
Dans la fenêtre Modifier la variable d’environnement, cliquez sur Nouveau,

puis saisir la nouvelle entrée, ici C:/flutter/bin et enfin, cliquez sur OK.

développement

développement

A partir de là, il est possible d’exécuter des commandes Flutter et
notamment la commande flutter doctor. flutter doctor Cette commande
vérifie votre environnement et affiche un rapport sur l’état de votre
installation Flutter. A ce stade, vous devriez avoir des erreurs que nous
allons corriger dans l’étape suivante Configuration de l’environnement.

développement
Configuration de l’environnement
1. Accepter les contrats de licences Android
Pour accepter les licences Android, ouvrez une invite de commande ou

PowerShell et saisissez la commande suivante :
flutter doctor –android-licenses
Pour chaque licence, tapez Y puis validez.

développement
1. Accepter les contrats de licences Android (Suite)
Une fois toutes les licences acceptées, vous pouvez à nouveau lancer un
diagnostic à l’aide de la commande vue précédemment pour vérifier que le
point est désormais valide. Pour chaque licence, tapez Y puis validez.

développement
2. Installer les plugins Flutter pour Android Studio
Dans la mesure où nous n’utiliserons pas Android Studio comme éditeur
de code, il n’est pas obligatoire d’installer les plugins Flutter et Dart pour
Android Studio. Cependant, voici la marche à suivre au cas où et
également pour éviter d’avoir l’erreur dans le diagnostic Flutter.

développement
2. Installer les plugins Flutter pour Android Studio (Suite)
Ouvrez Android Studio, puis sur l’écran d’accueil, cliquez sur Plugins.
Dans la fenêtre Plugins, rechercher flutter et cliquez sur le bouton Install.

développement
Acceptez la Privacy Note en cliquant sur Accept.

développement
Lorsqu’on vous propose d’installer le plugin Dart (dépendance au plugin
Flutter) cliquez Yes.

développement
A la fin de l’installation, cliquez sur Restart IDE pour appliquer les
modifications.

développement
Une fois l’opération effectuée, vous pouvez à nouveau lancer un diagnostic
à l’aide de la commande vue précédemment pour vérifier que le point
concernant les plugins Android Studio est désormais valide.

développement
3. Paramétrage de ‘émulateur sous Android Studio
Dans mon exemple, nous allons utilisez un émulateur Android au lieu d’un
vrai device. Pour configurer l’émulateur, Ouvrez Android Studio, puis sur
l’écran d’accueil, notez que vous pouvez désormais créer des projets
Flutter. Pour pouvoir configurer l’émulateur, il est nécessaire de créer un
projet temporaire pour accéder au menu de configuration de l’émulateur.
Pour cela, cliquez sur Start a new Flutter project.

développement
3. Paramétrage de ‘émulateur sous Android Studio (Suite)
Dans la fenêtre Create New Flutter Project ¿ New Flutter Project,

sélectionnez Flutter Application et cliquez sur Next.
Dans la fenêtre Create New Flutter Project ¿ New Flutter Application
saisissez les informations de configuration de votre application et cliquez
sur Next. Attention à bien renseigner le chemin du SDK dans Flutter SDK
path, ici dans notre exemple C:/flutter.

développement

développement

développement
Pour configurer l’émulateur, cliquez sur le menu Tools puis sélectionner
Device Manager.

développement

Dans la fenêtre Your Virtual Devices, cliquez sur Create Virtual Device. . .

développement
A l’étape Select Hardware, sélectionnez Phone dans la partie Category,
puis sélectionnez un modèle de téléphone, par exemple Pixel 3a, puis
cliquez sur Next.

développement

Dans la fenêtre System Image, choisissez une image (il est recommandé de
choisir une image x86 ou
x866 4), cliquezsurDownloadpourt él échargerl ′ imagedusyst ème,

développement

développement
Une fois le téléchargement terminé, cliquez sur Finish. Une fois l’image
système prête, cliquer sur le bouton play afin de lancer l’émulateur.

développement

développement
Une fois l’opération effectuée, vous pouvez à nouveau lancer un diagnostic
à l’aide de la commande vue précédemment pour vérifier que le point
concernant le device est résolue.
Vous pouvez quitter Android Studio mais gardez bien l’émulateur ouvert.
Première application Flutter
Création d’un nouveau projet Flutter
Ouvrez Android Studio et assurez-vous d’avoir installé le plugin Flutter et

le SDK Flutter. Cliquez sur ”File” -¿ ”New” -¿ ”New Flutter Project”.
Choisissez ”Flutter Application” comme type de projet et cliquez sur
”Next”. Donnez un nom à votre projet, choisissez un emplacement pour le
dossier du projet et cliquez sur ”Next”. Sélectionnez le SDK Flutter que
vous avez installé et cliquez sur ”Finish”. Android Studio générera une
structure de projet de base pour vous.
Ouvrez un terminal et utilisez la commande suivante pour créer un
nouveau projet Flutter :
flutter create nom du projet
Remplacez ”nom du projet” par le nom que vous souhaitez donner à votre
projet. Cette commande générera une structure de projet de base dans le
répertoire actuel.

Structure de base d’une application Flutter

Lorsque vous créez un nouveau projet Flutter, vous obtenez une structure
de fichiers de base qui ressemble à ceci :

Structure de base d’une application Flutter (suite)

Lorsque vous créez un nouveau projet Flutter, vous obtenez une structure
de fichiers de base qui ressemble à ceci :
lib/ : Ce répertoire contient le code source de votre application
Flutter. Vous y trouverez notamment le fichier main.dart, qui est le
point d’entrée de votre application.
android/ et ios/ : Ces répertoires contiennent les fichiers spécifiques
à Android et iOS pour compiler et exécuter votre application sur ces
plateformes.
pubspec.yaml : Ce fichier est utilisé pour définir les dépendances de
votre projet et d’autres métadonnées. Vous pouvez y ajouter des
packages Flutter et des ressources telles que des images et des polices.
main.dart : C’est le point d’entrée de votre application Flutter. Voici
à quoi ressemble un fichier main.dart de base :

Exemple de main.dart I
Dans cet exemple, MaterialApp est utilisé pour définir le titre de

l’application et le widget principal (Scaffold) contenant une barre
d’applications (AppBar) et un widget de texte (Text) au centre de l’écran.

Un mot sur le Hot Reload
Le Hot Reload, que l’on pourrait traduire littéralement par ”rechargement

à chaud ”, est l’un des nombreux avantages de Flutter. Cela rend le cycle
de développement beaucoup plus rapide. Avec Hot Reload, si vous
apportez des modifications à votre code, vous pouvez voir les résultats
presque instantanément.
Prenons un exemple. Lancez l’application dans l’émulateur. Ouvrez le
fichier main.dart situé dans le dossier lib, puis localisez le texte ” You have
pushed the button this many times: ” ligne 101, et remplacez le par ”You
have clicked the button this many times: ”. Enregistrez maintenant votre
code, puis cliquez sur le bouton Hot Reload situé dans la barre de debug
en haut.

Un mot sur le Hot Reload (Suite)

La modification est directement
appliquer dans votre application.
Fini les longues étapes de
compilation et de déploiement à
chaque modification.

Widgets et UI avec Flutter
Widgets et UI avec Flutter
Introduction Aux Widgets
L’idée centrale de Flutter est de construire votre interface utilisateur

en utilisant uniquement des widgets.
Les widgets sont totalement configurables et décrivent comment leur
vue doit apparaı̂tre à l’écran.
La plupart des widgets implémentent une fonction constructrice qui
décrit les widgets de plus bas niveau qu’ils utilisent, ce qui les rend
des ”container widgets” car ils contiennent d’autres widgets.
Cependant, certains widgets de bas niveau ne font qu’afficher quelque
chose, par exemple, le widget Text.
Environ 150 widgets natifs sont créés par Flutter, hautement
configurables, et vous pouvez créer les vôtres, comme nous le verrons.

Widgets et UI avec Flutter L’Arbre des Widgets
L’Arbre des Widgets

Si vous venez d’un framework front-end, vous êtes familier avec l’arbre des
composants, dont le fonctionnement est totalement similaire dans Flutter.
Les widgets sont organisés hiérarchiquement, avec un widget tout en
haut appelé le widget racine.
L’organisation des widgets forme un arbre, dictant la structure de
l’interface utilisateur.

Widgets de base I
Flutter est livré avec une suite de widgets de base puissants, parmi lesquels
les suivants sont couramment utilisés :
Text : Le widget Text vous permet de créer une série de texte stylisé
dans votre application.
Row, Column : Ces widgets flexibles vous permettent de créer des
mises en page flexibles dans les directions horizontale (Row) et
verticale (Column). La conception de ces objets est basée sur le
modèle de présentation flexbox du Web.
Stack : Au lieu d’être orienté linéairement (horizontalement ou
verticalement), un widget Stack vous permet de placer des widgets les
uns sur les autres dans l’ordre de peinture. Vous pouvez ensuite
utiliser le widget Positioned sur les enfants de a Stack pour les
positionner par rapport au bord supérieur, droit, inférieur ou gauche
de la pile. Les piles sont basées sur le modèle de disposition de
positionnement absolu du Web.
Widgets de base II
Container : Le widget Container vous permet de créer un élément

visuel rectangulaire. Un conteneur peut être décoré d’un élément
BoxDecoration, tel qu’un arrière-plan, une bordure ou une ombre. Un
Container peut également avoir des marges, un remplissage et des
contraintes appliqués à sa taille. De plus, un Container peut être
transformé dans un espace tridimensionnel à l’aide d’une matrice.

Widgets et UI avec Flutter Les Widgets Personnalisés
Les Widgets Personnalisés avec ou sans État

Lorsque nous écrirons des applications, nous créerons des widgets
personnalisés.
Tous les widgets personnalisés ont une fonction constructrice qui
retourne un widget.
Ils héritent soit de la classe StatelessWidget, soit de la classe
StatefulWidget.
La première classe est réservée aux widgets qui n’ont pas à gérer
d’état. Ils ne sont dessinés sur le canvas qu’une seule fois lorsqu’ils
sont chargés. Cela signifie qu’ils ne peuvent pas être rafraı̂chis si un
événement ou une action utilisateur survient.
La deuxième classe est réservée aux widgets qui doivent être
redessinés plusieurs fois. Ces widgets peuvent gérer leur propre état
interne, ce qui les rend plus flexibles pour répondre aux changements
d’interaction utilisateur.

Widgets et UI avec Flutter Les Widgets Personnalisés (Suite)
Les Widgets Personnalisés avec ou sans État (Suite)

Les widgets personnalisés nous permettent de créer des composants
réutilisables, favorisant ainsi la modularité dans le développement
d’applications Flutter.
Lorsque vous créez un widget personnalisé, vous définissez sa
structure, son apparence et son comportement en fonction des
besoins de votre application.
Les widgets personnalisés sans état (StatelessWidget) sont idéaux
pour les parties statiques de l’interface utilisateur, telles que des
icônes ou des composants visuels qui ne changent pas en réponse à
l’interaction de l’utilisateur.
Les widgets personnalisés avec état (StatefulWidget) offrent une
plus grande flexibilité, car ils peuvent être mis à jour dynamiquement
en réponse à des changements dans l’état interne du widget.
Dans la suite de cette présentation, nous explorerons des exemples
concrets de création et d’utilisation de widgets personnalisés dans
Flutter.
Gestion des États dans Flutter
Gestion des États dans Flutter Gestion des États dans les Widgets
Gestion des États dans les Widgets

L’un des aspects fondamentaux de Flutter est la gestion des états dans les
widgets. Comprendre la différence entre les widgets avec état et sans état
est essentiel pour créer des applications réactives et dynamiques.
Widgets sans État (StatelessWidget):
▶ Idéaux pour les éléments de l’interface utilisateur qui restent statiques.
▶ Ils sont reconstruits intégralement à chaque modification, car ils ne
maintiennent pas d’information sur leur état interne.
▶ Exemples : Text, Icon, etc.
Widgets avec État (StatefulWidget):
▶ Convient aux éléments interactifs ou qui doivent être mis à jour
dynamiquement.
▶ Ils maintiennent un état interne qui peut être modifié au fil du temps.
▶ La mise à jour de l’interface utilisateur se fait avec la méthode
setState.
▶ Exemples : TextField, Checkbox, etc.

Gestion des États dans les Widgets (Suite) I

Utilisation de setState :
▶ setState est une méthode cruciale pour les widgets avec état dans
Flutter.
▶ Lorsque vous appelez setState, vous notifiez au framework Flutter
qu’un changement d’état a eu lieu dans le widget.
▶ Le framework réagit en reconstruisant le widget et ses enfants, mettant
ainsi à jour l’interface utilisateur pour refléter les modifications de
l’état.
▶ Exemple d’utilisation :

Gestion des États dans les Widgets (Suite) II

import ’ package : f l u t t e r / m a t e r i a l . dart ’ ;
v o i d main ( ) {
runApp ( MyApp ( ) ) ;
}
c l a s s MonWidgetAvecEtat e x t e n d s S t a t e f u l W i d g e t {
@override
M o n W i d g e t A v e c E t a t S t a t e c r e a t e S t a t e ( ) => M o n W i d g e t A v e c E t a t S t a t e ( ) ;
}
c l a s s M o n W i d g e t A v e c E t a t S t a t e e x t e n d s S t a t e<MonWidgetAvecEtat> {
i n t compteur = 0 ;
@override
Widget b u i l d ( B u i l d C o n t e x t c o n t e x t ) {
return Scaffold (
appBar : AppBar ( t i t l e : Text ( ’ Exemple a v e c s e t S t a t e ’ ) ) ,
body : C e n t e r (
c h i l d : Column (
mainAxisAlignment : MainAxisAlignment . center ,
children : [
Text ( ’ Nombre de c l i c s : $compteur ’ ) ,
ElevatedButton (
onPressed : () {
setState (() {
c o m p t e u r++;
});
},
c h i l d : Text ( ’ C l i q u e z i c i ’ ) ,
) ,] ,) ,) ,);}}

Gestion des États dans les Widgets (Exemples)
Scénarios courants pour setState :

▶ Changement d’état en réponse à des événements utilisateur : Boutons,
formulaires, etc.
▶ Réception de données asynchrones : Lorsque des données sont chargées
depuis une API, utilisez setState pour mettre à jour l’interface
utilisateur une fois les données reçues.
▶ Animations : Pour créer des animations fluides, modifiez l’état avec
setState à chaque trame d’animation.

Navigation dans les Applications Flutter
Navigation dans les Applications Flutter I

La navigation entre les écrans est un aspect crucial du développement
d’applications Flutter. Cette fonctionnalité permet à l’utilisateur de passer
d’une partie de l’application à une autre de manière fluide. Dans cette
section, nous explorerons les concepts clés de la navigation et l’utilisation
du widget Navigator pour gérer cette navigation.
Concepts de Navigation :
▶ La navigation se réfère à la transition d’un écran à un autre au sein de
l’application.
▶ Les écrans peuvent représenter différentes fonctionnalités, pages ou
vues.
▶ Une navigation bien conçue améliore l’expérience utilisateur et facilite
l’accès aux fonctionnalités de l’application.
Utilisation du Widget Navigator :
▶ Le widget Navigator est au cœur de la gestion de la navigation dans
Flutter.

Navigation dans les Applications Flutter II
▶ Il maintient une pile de routes (écrans) et facilite les transitions entre

ces routes.
▶ Les routes sont ajoutées et supprimées de la pile à mesure que
l’utilisateur navigue dans l’application.

Navigation dans les Applications Flutter (Suite) I

Navigation Simple avec Navigator :
▶ Pour naviguer vers un nouvel écran, utilisez la méthode
Navigator.push.
▶ Pour revenir à l’écran précédent, utilisez Navigator.pop.
Navigation avec Transitions :
▶ Flutter offre des transitions d’écran animées.
▶ Utilisez PageRouteBuilder pour personnaliser les transitions.
▶ Exemple :
N a v i g a t o r . push (
context ,
PageRouteBuilder (
t r a n s i t i o n D u r a t i o n : Duration ( m i l l i s e c o n d s : 500) ,
t r a n s i t i o n s B u i l d e r : ( context , animation , secondaryAnimation , c h i l d ) {
return FadeTransition (
opac ity : animation ,
child : child ,
);
},
pageBuilder : ( context , animation , secondaryAnimation ) {
r e t u r n SecondScreen ( ) ;
},
),
);

Navigation dans les Applications Flutter (Exemples) I
Navigation avec Arguments :

▶ Passez des données entre les écrans en utilisant les arguments.
▶ Exemple :
N a v i g a t o r . push (
context ,
MaterialPageRoute (
b u i l d e r : ( c o n t e x t ) => S e c o n d S c r e e n ( d a t a : myData ) ,
),
);
Navigation avec Retour de Données :

▶ Renvoyez des données de l’écran appelé à l’écran appelant.
▶ Utilisez Navigator.pop avec des données.
Navigator.pop(context, resultData);

Utilisation de setState pour les mises à jour de l’interface

utilisateur I
Lorsque vous travaillez avec des données dans une application Flutter,
vous devrez parfois mettre à jour l’interface utilisateur pour refléter les
changements. C’est là que la méthode setState entre en jeu.
Compréhension de setState :
▶ ‘setState‘ est une méthode définie dans la classe ‘State‘ d’un widget.
▶ Lorsqu’elle est appeléedans la méthode ‘setState‘, Flutter reconstruit
automatiquement le widget et ses descendants, en appliquant les
modifications nécessaires à l’interface utilisateur.
▶ L’appel à ‘setState‘ permet de notifier à Flutter que l’état du widget a
changé et qu’une mise à jour de l’interface utilisateur est nécessaire.
Utilisation de setState :
▶ Appelez ‘setState‘ pour mettre à jour les variables d’état dans la
méthode du widget.
▶ À l’intérieur de la méthode ‘setState‘, modifiez les variables d’état de
manière à refléter les nouvelles valeurs.

utilisateur II
▶ Flutter se chargera de reconstruire le widget et de mettre à jour

l’interface utilisateur en conséquence.
L’utilisation appropriée de ‘setState‘ est essentielle pour garantir des mises
à jour d’interface utilisateur correctes et réactives dans une application
Flutter. Veillez à appeler ‘setState‘ chaque fois que vous modifiez l’état
d’un widget et que vous souhaitez que ces changements soient reflétés à
l’écran.


utilisateur (Suite) I
Gestion des mises à jour de l’interface utilisateur avec setState
▶ Lorsque vous appelez setState et modifiez les variables d’état, Flutter
compare les nouvelles valeurs avec les anciennes pour déterminer quels
widgets doivent être reconstruits.
▶ Flutter reconstruit uniquement les widgets qui dépendent des variables
d’état modifiées.
▶ Cela permet d’optimiser les performances en évitant de reconstruire
toute l’interface utilisateur à chaque fois que vous appelez setState.
Exemple d’utilisation de setState :
▶ Supposons que vous ayez une variable d’état ‘counter‘ dans votre
widget, qui représente le nombre de fois qu’un bouton a été cliqué.
▶ Lorsque le bouton est cliqué, vous pouvez appeler ‘setState‘ pour
mettre à jour la valeur de ‘counter‘ et demander à Flutter de
reconstruire le widget.


utilisateur (Suite) II
▶ Voici un exemple de code :

int counter = 0;
RaisedButton (
onPressed : () {
setState (() {
c o u n t e r ++;
});
},
c h i l d : Text ( ’ I n c r e m e n t ’ ) ,
)


utilisateur (Suite) I
Limitations de setState :
▶ setState ne fonctionne que dans les classes qui héritent de
StatefulWidget.
▶ Vous ne pouvez appeler setState que dans les méthodes qui sont
définies dans la classe State.
▶ Assurez-vous de respecter les règles de portée lors de l’appel à setState.
Alternatives à setState :
▶ Dans certains cas, lorsque vous devez gérer des mises à jour d’interface
utilisateur plus complexes, vous pouvez envisager d’utiliser des
solutions telles que ‘Provider‘, ‘Bloc‘ ou ‘GetX‘ pour gérer l’état de
votre application.
▶ Ces solutions fournissent des mécanismes plus avancés pour gérer l’état
et les mises à jour d’interface utilisateur.
▶ Ils peuvent être particulièrement utiles dans les applications plus
grandes ou plus complexes.


utilisateur (Suite) II
En résumé, ‘setState‘ est un outil essentiel dans le développement

d’applications Flutter pour mettre à jour l’interface utilisateur en réponse
aux changements d’état. Il permet à Flutter de reconstruire uniquement
les widgets nécessaires pour refléter les nouvelles valeurs, ce qui optimise
les performances de l’application. Cependant, pour des applications plus
complexes, vous pouvez envisager d’autres solutions de gestion d’état
telles que ‘Provider‘, ‘Bloc‘ ou ‘GetX‘.

Interaction avec les Données
Intégration des Données dans Flutter

Importance de l’Interaction avec les Données : Les applications
Flutter sont fréquemment conçues pour interagir de manière
dynamique avec des données. Cela peut inclure l’affichage de données,
la possibilité de les modifier, ou encore la mise à jour en temps réel.
Moyens de Gérer les Données : Flutter offre plusieurs méthodes
pour gérer l’interaction avec les données. Cela peut se faire à travers
des sources de données locales, telles que le stockage interne de
l’appareil, ou en récupérant des données depuis des API distantes via
des requêtes HTTP.
Exploration de l’Intégration des Données : Cette section de la
présentation se concentrera sur l’intégration des données dans une
application Flutter. Nous aborderons les différentes approches pour
récupérer, afficher et mettre à jour les données, en mettant l’accent
sur les bonnes pratiques et les outils disponibles dans le framework.

Modèle de Gestion d’État pour les Données

Rôle Crucial de la Gestion d’État : La gestion d’état dans Flutter
joue un rôle fondamental en permettant à l’interface utilisateur de
refléter de manière dynamique les changements de données. Elle
garantit une expérience utilisateur fluide et réactive, en assurant que
l’interface est toujours à jour.
Approches de Gestion d’État dans Flutter : Flutter offre
différentes approches pour gérer l’état. Les widgets peuvent être soit
avec état (StatefulWidget) soit sans état (StatelessWidget). Les
widgets sans état sont utilisés pour des éléments statiques qui ne
changent pas en réponse à des événements, tandis que les widgets
avec état sont adaptés aux éléments interactifs ou qui nécessitent des
mises à jour dynamiques. Des solutions plus avancées comme
Provider, Bloc, et d’autres sont également disponibles pour répondre
à des besoins complexes de gestion d’état.

Modèle de Gestion d’État pour les Données (Suite)
Choix entre État Local et Global : La décision d’utiliser un état

local ou global dépend des besoins spécifiques de votre application.
L’état local est généralement utilisé pour des données spécifiques à un
widget ou à un ensemble de widgets, tandis que l’état global peut
être utilisé pour partager des données entre plusieurs parties de
l’application. Le choix dépend de la portée des données, de la
complexité de l’application et des performances recherchées.

Récupération de Données depuis une API avec http I
Récupération de Données depuis une API : Les applications

Flutter interagissent souvent avec des serveurs distants via des API
pour obtenir des données en temps réel. Cela peut inclure des
informations provenant de bases de données, de services Web, ou
d’autres sources externes.
Utilisation du Package http : Pour effectuer des requêtes HTTP
dans Flutter, le package http est largement utilisé. Ce package offre
des fonctionnalités complètes pour établir des connexions avec des
serveurs distants, envoyer des requêtes, et traiter les réponses.
Exemple Concret de Requête HTTP : Dans l’exemple ci-dessous,
une fonction fetchData est définie pour illustrer une requête GET.
Cette fonction utilise http.get pour récupérer des données depuis
l’URL spécifiée (dans cet exemple, ’https://api.example.com/data’).

Récupération de Données depuis une API avec http II

import ’ package : http / http . dart ’ as http ;
F u t u r e<v o i d> f e t c h D a t a ( ) a s y n c {
f i n a l r e s p o n s e = a w a i t h t t p . g e t ( ’ h t t p s : / / a p i . e x a m p l e . com/ data ’ ) ;
i f ( r e s p o n s e . s t a t u s C o d e == 2 0 0 ) {
// T r a i t e m e n t d e s d o n n e s i c i
} else {
// G e s t i o n d e s e r r e u r s
}
}
Gestion des Réponses : La gestion des réponses est cruciale. Le

statut de la réponse (statusCode) est vérifié pour s’assurer que la
requête a réussi (statut 200). En cas de succès, les données peuvent
être traitées, sinon, la gestion des erreurs est effectuée.
Types de Requêtes HTTP : Les requêtes HTTP peuvent être de
différents types, notamment :
▶ Requête GET : Utilisée pour récupérer des données depuis le serveur.
▶ Requête POST : Utilisée pour envoyer des données au serveur.
▶ Requête PUT : Utilisée pour mettre à jour des données sur le serveur.
Récupération de Données depuis une API avec http III
▶ Requête DELETE : Utilisée pour supprimer des données sur le

serveur.
▶ Et d’autres en fonction des besoins de l’application.

Intégration de Firebase avec Flutter

L’intégration de Firebase avec Flutter offre une solution complète pour le
développement d’applications mobiles, en fournissant des services cloud,
des bases de données en temps réel, des fonctions serverless, et bien plus
encore. Dans cette section, nous explorerons comment intégrer Firebase
dans votre projet Flutter.
Pourquoi Firebase avec Flutter ?
▶ Firebase offre une suite d’outils prêts à l’emploi, facilitant le
développement d’applications robustes.
▶ Services cloud tels que l’authentification, le stockage, les bases de
données, les notifications, et les fonctions serverless sont disponibles.
▶ L’intégration transparente avec Flutter permet une expérience de
développement fluide.
Étapes d’Intégration :
▶ Ajout du package Firebase dans le fichier de configuration Flutter.
▶ Configuration des services Firebase nécessaires pour votre application.
▶ Utilisation des plugins Firebase spécifiques pour accéder aux
fonctionnalités désirées.
Services Firebase Couramment Utilisés avec Flutter
Firebase Authentication :
▶ Intégration de systèmes d’authentification sécurisés.
▶ Utilisation de FirebaseUI pour une authentification facile.
Firebase Realtime Database et Firestore :
▶ Stockage et récupération de données en temps réel.
▶ Utilisation de Firebase Cloud Firestore pour une base de données
NoSQL évolutive.
Firebase Cloud Functions :
▶ Déploiement de fonctions serverless pour des tâches backend
personnalisées.

Exemple Pratique : Authentification avec Firebase I
Pour illustrer concrètement l’authentification avec Firebase dans une

application Flutter, nous allons suivre ces étapes détaillées :
Intégration du Package Firebase :
▶ Dans le fichier pubspec.yaml de votre projet Flutter, ajoutez la
dépendance au package firebase auth.
Exemple :
dependencies: firebase auth: 3.3.3
Configuration et Initialisation :
▶ Accédez à la console Firebase (https://console.firebase.google.com/).
▶ Créez un nouveau projet ou utilisez un projet existant.
▶ Ajoutez une application Flutter à votre projet Firebase en suivant les
instructions fournies.
▶ Téléchargez le fichier de configuration (google-services.json) et
placez-le dans le répertoire android/app de votre projet Flutter.

Exemple Pratique : Authentification avec Firebase II
▶ Initialisez Firebase dans votre application en ajoutant le code

d’initialisation à votre fichier Dart principal (main.dart).
Exemple :
v o i d main ( ) a s y n c {
WidgetsFlutterBinding . e n s u r e I n i t i a l i z e d ();
await Firebase . i n i t i a l i z e A p p ( ) ;
runApp ( MyApp ( ) ) ;
}
Utilisation dans l’Application :

▶ Utilisez les méthodes fournies par FirebaseAuth pour gérer
l’authentification des utilisateurs.
Exemple :

Exemple Pratique : Authentification avec Firebase III
FirebaseAuth auth = FirebaseAuth . i n s t a n c e ;
// I n s c r i p t i o n d ’ un n o u v e l u t i l i s a t e u r
await auth . createUserWithEmailAndPassword ( email : ’ e m a i l @ e x a m p l e . com ’ ,
password : ’ motdepasse ’ ) ;
// C o n n e x i o n d ’ un u t i l i s a t e u r e x i s t a n t
await auth . signInWithEmailAndPassword ( email : ’ e m a i l @ e x a m p l e . com ’ ,
password : ’ motdepasse ’ ) ;
// D e c o n n e x i o n de l ’ u t i l i s a t e u r actuel
await auth . signOut ( ) ;

Conclusion
Conclusion
Conclusion I
En résumé, Flutter se positionne comme un framework de développement
d’applications mobiles robuste et flexible. Sa conception centrée sur les
widgets, la réactivité, et l’utilisation du langage Dart en font une option
séduisante pour les développeurs. La modularité de sa structure et la
gestion efficace de l’interface utilisateur, combinées à des fonctionnalités
innovantes telles que le Hot Reload, offrent un processus de
développement rapide et itératif.
L’écosystème Flutter propose une variété de widgets préconçus, facilitant
la création d’interfaces utilisateur riches et personnalisées. Des aspects
cruciaux tels que la navigation fluide entre les écrans, la gestion de l’état,
et l’intégration aisée de données depuis des sources locales ou distantes
contribuent à faire de Flutter un choix privilégié pour le développement
d’applications.
Que vous envisagiez de concevoir des applications simples ou des projets
plus complexes, Flutter s’adapte à une multitude de scénarios de

Conclusion
Conclusion II
développement. Son support multiplateforme pour iOS et Android,

combiné à un engagement prononcé envers la communauté open source,
en fait un choix de prédilection pour les développeurs cherchant à
repousser les limites de la créativité dans le domaine mobile. En adoptant
Flutter, vous bénéficiez d’un outil puissant pour créer des applications à la
fois esthétiques, performantes et évolutives.
Étant donné que le temps ne permet pas une exploration approfondie ici,
nous vous recommandons vivement de suivre le tutoriel complet proposé
par le site officiel de Flutter https://docs.flutter.dev/ pour acquérir
une compréhension approfondie plutôt qu’une vue générale.

Presentation Flutter

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Presentation Flutter

Transféré par

Droits d'auteur :

Formats disponibles

Introduction à Flutter

Imider Abdessamad, Zoulaikhi Naima, Nefdaoui

March 13, 2024

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 1 / 86

2 Installation et configuration de l’environnement de

3 Première application Flutter

4 Widgets et UI avec Flutter

5 Gestion des États dans Flutter

6 Navigation dans les Applications Flutter

7 Interaction avec les Données

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 3 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 5 / 86

Les avantages de Flutter

Les avantages de Flutter (suite)

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 7 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 9 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 10 / 86

Installation de Git (Suite)

Une fois téléchargé, lancez le programme d’installation en suivant les

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 11 / 86

Installation de d’Android Studio

Pour télécharger la dernière version d’Android Studio rendez-vous sur

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 12 / 86

Installation de SDK Flutter

Enfin, il ne reste plus qu’à installer le SDK de Flutter. Pour cela

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 13 / 86

Installation de SDK Flutter (Suite)

Installation de SDK Flutter (Suite)

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 15 / 86

Installation de SDK Flutter (Suite)

Il faut maintenant modifier nos variables d’environnement Windows pour

Installation de SDK Flutter (Suite)

Dans la nouvelle fenêtre Variables d’environnement, Sous Variables

Installation de SDK Flutter (Suite)

Dans la fenêtre Modifier la variable d’environnement, cliquez sur Nouveau,

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 18 / 86

Installation de SDK Flutter (Suite)

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 19 / 86

Installation de SDK Flutter (Suite)

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 20 / 86

Pour accepter les licences Android, ouvrez une invite de commande ou

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 21 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 22 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 23 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 24 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 25 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 26 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 27 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 28 / 86

3. Paramétrage de ‘émulateur sous Android Studio

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 29 / 86

Dans la fenêtre Create New Flutter Project ¿ New Flutter Project,

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 30 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 31 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 32 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 33 / 86

3. Paramétrage de ‘émulateur sous Android Studio (Suite)

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 34 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 35 / 86

3. Paramétrage de ‘émulateur sous Android Studio (Suite)

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 36 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 37 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 38 / 86

Pr. Bourkoukou (FSTG) Introduction à Flutter March 13, 2024 39 / 86