1.

Concepts de Base Flutter et Dart

Qu'est-ce que Flutter ?

Flutter est un kit de développement d'interface utilisateur (UI) open-source développé

par Google. Son objectif principal est de permettre la création d'applications compilées
nativement pour plusieurs plateformes (iOS, Android, Web, Desktop) à partir d'une base de
code unique. Il met l'accent sur la rapidité de développement, les performances natives et
la flexibilité dans la conception d'interfaces.

Qu'est-ce que Dart ?

Dart est un langage de programmation orienté objet, client-optimisé développé par

Google. Il est le langage sur lequel Flutter est construit. Dart est conçu pour le
développement rapide d'applications multiplateformes et est particulièrement performant
pour la construction d'interfaces utilisateur réactives.

2. Définition de Flutter et ses Caractéristiques

Caractéristiques Principales de Flutter :

1.​ Développement Multiplateforme (Cross-Platform) : Le point fort de Flutter. Il

permet de cibler iOS, Android, Web, Windows, macOS et Linux avec un seul
codebase, réduisant considérablement le temps et les coûts de développement et de
maintenance.
2.​ Performance Quasi Native : Flutter ne s'appuie pas sur des vues natives des
plateformes ou des "bridges" JavaScript. Il utilise son propre moteur de rendu (Skia,
le même que Chrome) pour dessiner directement sur la surface d'affichage. Le code
Dart est compilé en code machine natif (ARM pour les mobiles, JavaScript pour le
web), garantissant des performances élevées et une fluidité comparable aux
applications natives.
3.​ UI Expressive et Flexible : La capacité de Flutter à peindre chaque pixel à l'écran
donne une liberté de conception inégalée. Les widgets sont hautement
personnalisables, permettant de créer des interfaces utilisateur complexes et
visuellement distinctives qui ne sont pas contraintes par l'apparence par défaut des
composants natifs.
4.​ Hot Reload & Hot Restart : Des fonctionnalités révolutionnaires pour la productivité
des développeurs.
○​ Hot Reload : Injecte le code modifié dans l'application en cours d'exécution,
permettant de voir les changements UI presque instantanément sans perdre
l'état de l'application. Idéal pour des ajustements rapides.
 ○​ Hot Restart : Redémarre l'application complètement, tout en étant plus
rapide qu'une recompilation complète. Utile lorsque des modifications
structurelles importantes sont apportées.
5.​ Langage Dart : Le choix de Dart offre des avantages comme la compilation
"Ahead-of-Time" (AOT) pour les performances natives, et "Just-in-Time" (JIT) pour le
développement rapide (Hot Reload). Dart est également "null-safe" (depuis Dart
2.12), ce qui réduit les erreurs liées aux valeurs nulles à l'exécution.
6.​ Widgets Riches et Composables : Tout en Flutter est un widget. Il propose un
vaste catalogue de widgets (Material Design pour Android/Google, Cupertino pour
iOS) qui sont les blocs de construction de l'interface utilisateur. Ces widgets sont
conçus pour être petits et composables, permettant de construire des UIs complexes
en imbriquant des widgets plus simples.
7.​ Communauté et Écosystème : Une communauté de développeurs très active et en
croissance rapide, offrant une abondance de packages ([Link]), de ressources et
d'aide.

3. StatelessWidget vs StatefulWidget avec Exemples

La distinction entre ces deux types de widgets est fondamentale pour comprendre comment
Flutter gère l'état de l'interface utilisateur.

StatelessWidget

Un StatelessWidget est un widget qui ne possède pas d'état interne qui puisse
changer au cours du temps. Il est immuable. Les informations qu'il affiche lui sont passées
au moment de sa création et il se contente de les rendre. Si les données changent, le
StatelessWidget n'a pas de mécanisme interne pour se reconstruire ; il doit être
reconstruit par son parent avec les nouvelles données.

●​ Quand l'utiliser ? Pour les parties de l'UI dont l'apparence ne dépend que des
données d'entrée (paramètres du constructeur) et qui ne nécessitent pas de
modification après leur affichage initial.
●​ Exemples : Text, Icon, Image, AppBar, Padding, Row, Column, Container.

Exemple de StatelessWidget :
StatefulWidget

Un StatefulWidget est un widget qui peut changer son état interne au cours du temps.
Il est mutable. Lorsque son état interne change (par exemple, suite à une interaction
utilisateur ou une réponse réseau), le StatefulWidget peut se reconstruire lui-même pour
refléter ces changements dans l'interface utilisateur.

Un StatefulWidget est toujours composé de deux classes distinctes :

1.​ La classe StatefulWidget elle-même : Elle est immuable et gère la création de

l'objet State.
2.​ La classe State : C'est là que l'état mutable est stocké et que la logique de
construction de l'UI (build method) est définie. La méthode setState() est
utilisée pour notifier le framework qu'un changement d'état s'est produit, déclenchant
ainsi une reconstruction de l'UI.
●​ Quand l'utiliser ? Pour les parties de l'UI qui peuvent interagir avec l'utilisateur,
modifier des données, ou réagir à des événements externes et doivent mettre à jour
leur affichage en conséquence.
●​ Exemples : Checkbox, Slider, TextField, ElevatedButton (souvent géré par
un parent, mais un compteur par exemple).

Exemple de StatefulWidget (Compteur simple) :

4. Le Langage Dart et ses 3 Caractéristiques
Principales
Dart est le moteur derrière Flutter. Comprendre ses bases est essentiel.

3 Caractéristiques Principales de Dart :

1.​ Orienté Objet (Object-Oriented) :​

○​ Dart est un langage purement orienté objet. Tout est un objet (même les
nombres, les fonctions, et null).
○​ Il supporte des concepts comme les classes, les objets, l'héritage, le
polymorphisme, les interfaces implicites et les mixins.
○​ Chaque application Dart démarre par une fonction main().

Exemple :​
​
2.​ Compilation JIT et AOT :​

○​ Just-In-Time (JIT) Compilation : Utilisée pendant le développement. Permet

le "Hot Reload" et le "Hot Restart" en compilant le code à la volée. C'est ce
qui rend le développement avec Flutter si rapide et interactif.
○​ Ahead-Of-Time (AOT) Compilation : Utilisée pour la production. Le code
Dart est compilé en code machine natif avant l'exécution. Cela garantit des
performances maximales et un démarrage rapide pour les applications
déployées. C'est pourquoi les applications Flutter sont si performantes.
○​ Cette dualité de compilation est une force majeure de Dart pour le
développement d'UI.
3.​ Null Safety (Sécurité Nulle) :​

○​ Introduite avec Dart 2.12, la null safety est une caractéristique majeure qui
aide à prévenir les erreurs courantes liées aux valeurs null (les fameux
"NullPointerException" ou "null reference errors").
○​ Par défaut, toutes les variables sont non-nullables. Vous devez explicitement
indiquer qu'une variable peut être null en ajoutant un ? après son type.
○​ Le compilateur vérifie à la compilation si une variable peut être null et vous
force à la gérer, ce qui réduit les erreurs à l'exécution.
Exemple :​
​

Detail Dart:

Types de Données Inflexion : Dart est fortement typé mais avec inférence de type.

●​ int : Nombres entiers (10, -5).

●​ double : Nombres à virgule flottante (3.14, 2.0).
●​ num : Peut être int ou double.
●​ String : Chaînes de caractères ('Hello', "World").
●​ bool : Booléens (true, false).
●​ List : Collection ordonnée d'éléments ([1, 2, 3]). Similaire aux tableaux.
●​ Map : Collection de paires clé-valeur ({'nom': 'Alice', 'age': 30}). Similaire
aux dictionnaires ou objets JavaScript.
●​ dynamic : Type qui désactive la vérification de type à la compilation. À utiliser avec
parcimonie.
●​ Object : La classe de base de tous les objets Dart.

Déclaration de Variables :

●​ var : Inférence de type. Le type est déterminé au moment de l'initialisation et ne

peut plus changer.
 ●​ final : Variable dont la valeur ne peut être assignée qu'une seule fois. Définie à
l'exécution.

●​ const : Variable dont la valeur doit être connue à la compilation. Immuable et

optimisée pour la performance (constante de compilation).

5. Widget Tree et son Importance

Qu'est-ce que le Widget Tree ?

En Flutter, l'interface utilisateur est construite comme une hiérarchie de widgets

imbriqués, formant ce qu'on appelle le "Widget Tree" (Arbre de Widgets). Chaque widget
dans l'arbre a un parent et peut avoir un ou plusieurs enfants, ou même aucun.

●​ La racine de l'arbre est généralement une application (par exemple, MaterialApp

ou CupertinoApp).
●​ Chaque widget définit un morceau de l'UI ou une manière de disposer d'autres
widgets.

Importance du Widget Tree :

1.​ Structure de l'UI : Il représente la structure visuelle et logique de votre application.

Comprendre comment les widgets sont organisés est essentiel pour la conception et
le débogage.
2.​ Composition plutôt qu'Héritage : Flutter encourage la composition. Au lieu d'hériter
de classes de widgets complexes, vous composez des widgets plus petits pour créer
des interfaces complexes. Cela rend le code plus modulaire, réutilisable et facile à
maintenir.
3.​ Performance des Reconstructions : Lorsque l'état d'un StatefulWidget
change, Flutter reconstruit (re-build) uniquement la partie pertinente de l'arbre, et
non l'intégralité de l'UI. Le Element Tree (qui est la représentation concrète de l'UI)
et le RenderObject Tree (qui gère le rendu physique) sont mis à jour
efficacement grâce à cette structure.
 4.​ Héritage Implicite (InheritedWidget) : Bien que non directement lié au Widget Tree
lui-même, la structure hiérarchique permet aux widgets descendants d'accéder
facilement aux données ou aux services fournis par des widgets ancêtres (via des
InheritedWidget ou Provider par exemple), sans avoir à passer les données
explicitement à chaque niveau.

Exemple de Widget Tree conceptuel :

6. Principe des Widgets et Comment Utiliser les

Widgets
Le Principe "Tout est un Widget" :

En Flutter, absolument tout est un widget. Que ce soit un bouton, une zone de texte, une
image, ou même des concepts abstraits comme le padding (Padding), les marges
(Container), les lignes (Row) ou les colonnes (Column), tout est représenté par un widget.

Cette approche unifiée simplifie la compréhension et la construction de l'UI.

Comment Utiliser les Widgets :

Importation : Commencez toujours par importer le package Material Design ou Cupertino,
selon le style que vous souhaitez utiliser.

1.​ Composition : Les widgets sont utilisés en les imbriquant les uns dans les autres,
formant le Widget Tree.
 ○​ Vous passez généralement un widget enfant à une propriété child ou une
liste de widgets enfants à une propriété children.

Constructeurs : La plupart des widgets sont construits en appelant leur constructeur, en lui
passant des propriétés (paramètres nommés) pour personnaliser leur apparence et leur
comportement.​

2.​ Propriétés : Chaque widget a un ensemble de propriétés spécifiques pour le

configurer. Par exemple, un Text a data, style, textAlign ; un Container a
color, padding, margin, child.
3.​ Reconstruction : Les widgets sont immutables (même les StatefulWidget sont
des instances de classes immutables). Lorsque des changements doivent être
reflétés, Flutter construit un nouvel arbre de widgets, et le moteur de rendu compare
cet arbre au précédent pour effectuer les mises à jour minimales nécessaires à
l'écran.

7. Les child et children

Ce sont des propriétés courantes des widgets qui déterminent comment ils contiennent
d'autres widgets.

child (enfant unique) :

●​ La propriété child est utilisée par les widgets qui ne peuvent contenir qu'un seul
widget enfant.
●​ Ce sont souvent des widgets de layout ou des widgets qui appliquent une
modification (comme un padding, une couleur de fond) à un seul contenu.

Exemples de widgets avec child :

●​ Container
●​ Center
●​ Padding
●​ SizedBox
●​ Card
●​ ElevatedButton
●​ Scaffold (pour le body)

Exemple :
children (liste d'enfants) :

●​ La propriété children est utilisée par les widgets qui peuvent contenir plusieurs
widgets enfants.
●​ Ces widgets sont généralement utilisés pour organiser ou empiler plusieurs éléments
d'interface utilisateur. La valeur de children est une List<Widget>.

Exemples de widgets avec children :

●​ Row (widgets alignés horizontalement)

●​ Column (widgets alignés verticalement)
●​ Stack (widgets superposés)
●​ ListView (liste déroulante de widgets)

Exemple :

8. Système de Layout
Le système de layout en Flutter est entièrement basé sur les widgets. Il n'y a pas de fichiers
de layout séparés (comme en Android XML). Les widgets eux-mêmes définissent comment
ils se positionnent et comment leurs enfants sont disposés.
Principes Clés du Layout :

1.​ Contraintes Ascendantes, Tailles Descendantes :​

○​ Un widget parent passe des contraintes à ses enfants (taille maximale et

minimale qu'ils peuvent prendre).
○​ L'enfant décide de sa propre taille dans ces contraintes.
○​ Le parent positionne ensuite l'enfant.
○​ C'est une règle très importante pour le débogage des problèmes de layout.
2.​ Les Widgets de Layout : Flutter fournit une multitude de widgets dédiés à la
disposition :​

○​ Un seul enfant :
■​ Container : Le plus polyvalent. Peut ajouter du padding, des
marges, des couleurs de fond, des décorations, et des contraintes.
■​ Padding : Ajoute de l'espace autour de son enfant.
■​ Center : Centre son enfant.
■​ Align : Positionne son enfant à un endroit spécifique.
■​ SizedBox : Force une taille spécifique.
■​ Expanded, Flexible : Utilisés dans les Row et Column pour
distribuer l'espace disponible.
○​ Multiples enfants :
■​ Row : Dispose les enfants horizontalement.
■​ Column : Dispose les enfants verticalement.
■​ Stack : Superpose les enfants les uns sur les autres (comme des
couches en Z-index).
■​ Wrap : Dispose les enfants horizontalement ou verticalement et les
"wrap" à la ligne suivante s'il n'y a plus de place.
■​ ListView : Crée une liste déroulante d'enfants.
■​ GridView : Crée une grille déroulante d'enfants.
3.​ Alignement dans Row et Column :​

○​ mainAxisAlignment : Comment les enfants sont alignés le long de l'axe

principal (horizontal pour Row, vertical pour Column). Ex:
[Link], [Link],
[Link], [Link],
[Link],
[Link].
○​ crossAxisAlignment : Comment les enfants sont alignés le long de l'axe
transversal (vertical pour Row, horizontal pour Column). Ex:
[Link], [Link],
[Link], [Link].
 ○​ mainAxisSize : Définit la taille de l'axe principal. [Link] (par
défaut, prend tout l'espace disponible), [Link] (prend juste
l'espace nécessaire aux enfants).

Exemple de Layout avec Row et Column :

9. Widgets d'Interface (Widgets Courants)

Voici une liste non exhaustive de widgets d'interface utilisateur fréquemment utilisés en
Flutter :

Widgets de Base / Texte :

●​ Text : Affiche une chaîne de caractères. Peut être stylisé avec TextStyle.
●​ Icon : Affiche une icône Material Design ou Cupertino.
●​ Image : Affiche une image (depuis un asset, le réseau, un fichier, ou la mémoire).

Widgets de Boutons :

●​ ElevatedButton : Bouton avec une élévation et un effet d'ombre.

●​ TextButton : Bouton de texte plat.
●​ OutlinedButton : Bouton avec une bordure.
 ●​ IconButton : Bouton contenant une icône.
●​ FloatingActionButton (FAB) : Bouton rond et flottant, souvent utilisé pour
l'action principale sur un écran.

Widgets d'Entrée :

●​ TextField : Champ de saisie de texte.

●​ Checkbox : Case à cocher.
●​ Radio : Bouton radio (pour sélection unique).
●​ Switch : Interrupteur bascule.
●​ Slider : Curseur pour sélectionner une valeur dans une plage.

Widgets de Structure et Navigation :

●​ Scaffold : Implémente la structure de base d'une application Material Design

(AppBar, body, FloatingActionButton, Drawer, BottomNavigationBar).
●​ AppBar : Barre d'application en haut de l'écran.
●​ Drawer : Panneau de navigation latéral (menu hamburger).
●​ BottomNavigationBar : Barre de navigation en bas de l'écran.
●​ TabBar : Barre d'onglets.
●​ PageView : Permet de glisser entre plusieurs pages.

Widgets d'Affichage de Données / Listes :

●​ ListView : Pour afficher une liste déroulante d'éléments. Très performant pour les
listes longues grâce à la virtualisation.
●​ GridView : Pour afficher des éléments dans une grille déroulante.
●​ Card : Une carte Material Design avec des bords arrondis et une élévation.
●​ ListTile : Widget pour créer un élément de liste (titre, sous-titre, icônes).

Widgets de Boîtes de Dialogue et Snackbars :

●​ AlertDialog : Boîte de dialogue d'alerte.

●​ SimpleDialog : Boîte de dialogue avec une liste d'options.
●​ SnackBar : Message temporaire affiché en bas de l'écran.

Widgets d'Indicateurs :

●​ CircularProgressIndicator : Indicateur de chargement circulaire.

●​ LinearProgressIndicator : Indicateur de chargement linéaire.