Cours_Dev_mobile_3eB_chap31254_23_24.pdf

LES WIDGETS DE FLUTTER
• GÉNÉRALITÉS SUR LA
PROGRAMMATION MOBILE
• INTRODUCTION À FLUTTER ET
DART
• LES WIDGETS DE FLUTTER
• STOCKAGE DE DONNÉES AVEC
FLUTTER
• UTILISATION DE PACKAGES EN
FLUTTER
106

Les widgets de Flutter
Plan
Introduction
StatelessWidget / StatefulWidget
Le widget MaterialApp
Le widget Scaffold
Les widgets génériques
Les layouts en Flutter
107

Introduction
108
Tous les composants de l'interface utilisateur sont appelés widgets
Les widgets Flutter:
 Éléments constitutifs de l'interface et composants essentiels qui façonnent l'apparence
d'une application Flutter.
 Ils dictent une certaine partie de l'interface utilisateur de l’application : son apparence et
son comportement
 La modularité et la réutilisabilité des widgets les rendent si puissants et conviviaux pour les
développeurs.

La notion d’états en Flutter
 L’état d’une application peut être défini comme étant tout ce qui se trouve dans la
mémoire de l’application pendant son exécution.
 Tous les widgets qui gèrent l’interface utilisateur de l’application : boutons, polices de textes,
icônes, animations, etc.
 État (State) : l'état correspond aux informations qui peuvent être lues de manière
synchrone lorsque le widget est construit et qui peuvent changer au cours du cycle de
vie du widget.
 En Flutter, un widget est soit avec état, soit sans état.
 Si un widget peut changer (lorsqu’un utilisateur interagit avec lui, par exemple), il est avec
état.
109

Les widgets sans état (StatelessWidget)
 Les widgets dont l'état ne peut pas être modifié une fois construits (build)
sont appelés widgets sans état (stateless widget).
 Ils sont immuables une fois qu'ils sont construits
impossible de les modifier pendant que l’application est en action.
l’apparence et les propriétés restent inchangées pendant toute la durée de vie du
widget..
 Un widget sans état étend la classe StatelessWidget et redéfinit sa méthode build() qui
renvoie un widget.
 Les exemples classiques de widgets sans états sont : Icon, IconButton, et Text.
110

Les widgets sans état (StatelessWidget)
111
import 'package:flutter/material.dart';
void main() { runApp(const MyApp());}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Essaie de Stateless',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
useMaterial3: true,),
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColorLight,
title: const Text("StatelessWidget"),),
body: const Text("Une application sous frome de statelessWidget",font),
),);
}}
Exemple

Les widgets avec état (StatefulWidget)
 Un widget de type stateful est un widget dynamique :
 Son apparence peut changer en réponse à des évènements déclenchés par
interaction avec l’utilisateur ou lors de la réception de données.
 Checkbox, Radio, Slider, Form, et TextField sont des exemples de widgets de type
stateful.
 Un widget avec état est implémenté en utilisant deux classes: une sous classe de
StatefulWidget et une sous classe de State.
 La classe qui étend State contient les états des widgets mutables et la méthode build().
 Lorsque l’état d’un widget change, l’objet de type State appelle setState() incitant le
Framework à redessiner le widget.
112

StatelessWidget vs Stateful Widget
Widgets sans états (stateless) Widgets avec états (stateful)
Ne possède pas d’états mutables Peut avoir des états mutables
Comportement statique, ne répond pas à des évènements
externes
Peut changer de comportement en se basant sur une
interaction avec l’utilisateur ou suite aux changements de
données
Ne déclenche pas une reconstitution lors du changement
de l’état
Déclenche une reconstitution pour refléter l’état modifié
Affiche des contenus statiques (textes, icones, images,…) Manipule des éléments dynamiques de l’UI, des
composants interactifs
Très efficaces et légers Peut avoir une surcharge légèrement plus élevée en raison
du changement d'états.
Code simple Nécessite une gestion d’états et une implémentation de la
logique de changement des états
Convient aux composants ne nécessitant pas une mise à
jour fréquente
Fondamental pour les composants qui changent
fréquemment 113

114
Stateless Widget vs StatefulWidget
Constructeur
build()
Constructeur
build()
createState()
initState()
setState()
build()
StatefulWidget
StatelessWidget

Le widget MaterialApp
 Le widget MaterialApp est un widget prédéfini en Flutter considéré comme étant le
composant principal ou central dans une application Flutter.
 Il fournit une enveloppe autour d’autres widgets Material.
 En utilisant ce widget, il est possible de créer une application attrayante qui suit les
directives de Material Design.
 Un widget MaterialApp peut avoir les propriétés suivantes :
 title : description sur une ligne utilisée par l'appareil pour identifier l'application pour
l'utilisateur.
 theme : définit le thème à utiliser pour MaterialApp.
 home : définit le widget de la route par défaut de l’application.
 action : contrôle les clés des intents.
 routes : contient la table de routage du niveau supérieur de l'application.
 routerConfig : contient un objet pour configurer le routeur sous-jacent. 115
https://api.flutter.dev/flutter/material/MaterialApp-class.html

Scaffold widget
Le Scaffold :
 est la structure de base de l’application,
 élément principal regroupant plusieurs éléments et occupe tout l’écran
de l’appareil,
 utilisé pour implémenter la structure de mise en page visuelle de
conception matérielle de base.
 La classe Scaffold() est un widget extensible qui remplit l’espace
disponible à l’écran. Il fournit une API pour afficher les principaux widgets
de l’application tels que: Drawer, SnackBar, Bottom-
Sheet, FloatingActionButton, AppBar et BottomNavigationBar, etc
 Le widget Scaffold de Flutter offre plusieurs propriétés pour définir la
structure générale et le comportement des interfaces utilisateur.
 Deux principales propriétés :
 La propriété appBar dont la valeur est un AppBar Widget
 La propriété body dont la valeur est widget contenant la structure des
différents composants de l’interface.
116
Scaffold
AppBar

Scaffold widget
117
L’attribut appBar du widget
Scaffold
 appBar: un élément du Scaffold, est le widget correspondant à la barre horizontale qui s’affiche
en haut de l’écran, et dans lequel le titre se trouve généralement placé. On y place généralement
un widget AppBar.
• title : Définit le titre de l’AppBar.
• actions : Permet d’ajouter des widgets d’action à
droite de l’AppBar, tels que des icônes ou des
boutons.
• leading : Ajoute un widget à gauche de l’AppBar,
généralement utilisé pour ajouter un bouton de
retour.
• backgroundColor : Définit la couleur de fond de
l’AppBar.....
• elevation : permet de créer une ombre (par défaut 4)
https://api.flutter.dev/flutter/material/Scaffold-class.html

Scaffold widget
118
L’attribut body du widget
Scaffold
 Body : le widget body est une propriété très importante de Scaffold, puisque il affiche les
principaux composants de l’écran.
https://api.flutter.dev/flutter/material/Scaffold-class.html

Widgets génériques
119
https://docs.flutter.dev/ui/widgets

120
https://api.flutter.dev/flutter/widgets/Image-class.html
 Le widget d’image est un widget essentiel dans Flutter
 L’affichage d’images est le concept fondamental de la plupart des applications mobiles.
Flutter dispose d’un widget Image qui permet d’afficher différents types d’images dans
l’application mobile.
 Les formats d’images pris en compte sont nombreux : JPEG, PNG, GIF, WebP,
AnimatedWebP, BMP et WBMP.
•Plusieurs constructeurs sont fournis pour les différentes façons dont une image peut être
spécifiée :
•Image: pour obtenir une image à partir d’un ImageProvider .
•Image.asset: pour obtenir une image à partir d’un AssetBundle à l’ aide d’une clé.
•Image.network: pour obtenir une image à partir d’une URL.
•Image.file: pour obtenir une image à partir d’un File .
•Image.memory: pour obtenir une image à partir d’une Uint8List .

 Un widget Image peut voir les propriétés suivantes :
 image : l’image à afficher.
 fit : Comment inscrire l'image dans l'espace alloué lors de la mise en page.
 Height : permet de fixer la hauteur de l’image.
 width : permet de fixer la largeur de l’image.
 color : permet de changer la couleur de l’image (ajout d’effets).
121
https://api.flutter.dev/flutter/widgets/Image-class.html

122
 Flutter offre un vaste choix d’icônes.
 Le widget Icon() utilisé pour insérer des icônes à l’application Flutter.
 Certaines propriétés du widget Icon:
• icon: Il est utilisé pour spécifier le nom de l’icône à afficher dans l’application.
Flutter utilise des icônes de conception matérielle qui sont des symboles pour
des actions et des éléments courants.
• color: est utilisé pour spécifier la couleur de l’icône.
• size: Il est utilisé pour spécifier la taille de l’icône en pixels (les icônes ont la
même hauteur et la même largeur).
https://api.flutter.dev/flutter/widgets/Icon-class.html

123
Le widget Flutter Text permet d'afficher du texte dans votre application Flutter.
https://docs.flutter.dev/ui/widgets/text

124
•Le Padding est un widget qui sert à gérer un espace.
•Le Padding ajoute un rembourrage ou un espace vide autour d’un widget ou d’un
groupe de widgets.
•Dans le constructeur, il n’y a que deux paramètres attendus. Le premier, obligatoire, est
le padding qui correspond à un objet héritant de la classe EdgeInsetsGeometry. Le
second, facultatif, est le child, c’est-à-dire un widget enfant.
https://api.flutter.dev/flutter/widgets/Padding-class.html

125
Le widget TextField est utilisé :
 pour obtenir une entrée en caractères alphanumériques de l’utilisateur de l’application.
 pour créer des formulaires de saisie d’application où le développeur doit demander
plusieurs types d’informations à l’utilisateur.
 Certains des attributs du widget TextField:
•decoration : pour afficher la décoration autour du champ de texte.
•border : crée une bordure rectangulaire arrondie par défaut autour
du champ de texte.
•labelText : pour afficher le texte de l’étiquette lors de la sélection du
champ de texte.
•hintText : pour afficher le texte de l’indice dans le champ de texte.
•icon : Il est utilisé pour ajouter des icônes directement au TextField.
•onSbmitted: Récupérer la valeur d’un TextField dans Flutter
https://api.flutter.dev/flutter/material/TextField-class.html

126
Le widget Theme dans Flutter:
 Permet de définir un thème pour l’application
 Contrôle les éléments visuels de l’interface utilisateur, tels que les couleurs, les styles de texte
et les formes.
 Utilisé pour appliquer un thème à une sous-arborescence spécifique de l’arborescence de
widgets (ou vous pouvez l’utiliser à la racine de votre application pour l’appliquer à l’ensemble
de l’application).
Le widget « Theme » dans Flutter a les propriétés suivantes :
•data: définir les données de thème pour l’arborescence des widgets. Il prend une instance de
ThemeDatacomme valeur.
•child: utilisée pour définir le widget auquel le thème doit être appliqué.
•shadowThemeOnly: spécifier si le thème ne doit être appliqué qu’aux éléments du thème de
l’ombre, tels que DropShadow, et non au reste de l’arborescence du widget.
•key: est utilisée pour définir une clé unique pour le widget, ce qui est utile dans les scénarios
où vous devez trouver le widget dans l’arborescence des widgets.
https://api.flutter.dev/flutter/material/Theme-class.html

127
En Flutter on a plusieurs types de boutons avec différentes propriétés.
https://docs.flutter.dev/ui/widgets/material#Actions

128
Flutter offre différents types de widgets de sélection « Selection widgets »:
https://docs.flutter.dev/ui/widgets/material#Selection

Les layouts en Flutter
 Les layouts (mise en page) sont des widgets permettant de structurer et organiser l'affichage d'une
application mobile en Flutter.
 Flutter permet de créer un layout en composant plusieurs widgets pour créer des widgets plus
complexes.
 Les layouts sont des widgets qu’on ne voit pas sur l'interface utilisateur de l’application, telles que les
lignes, les colonnes et les grilles
 Les layouts organisent, contraignent et alignent les widgets visibles.
 Trois types de layouts :
129
Layout à un seul enfant
Align
Padding
Transform
Align
Padding
Transform
Container
Center
Baseline
Container
Center
Baseline
SizedBox
Expanded
ConstrainedBox
SizedBox
Expanded
ConstrainedBox
Layout à enfants multiples
Row
Column
Flow
Row
Column
Flow
GridView
ListView
ListBody
GridView
ListView
ListBody
Stack
Table
Wrap
Stack
Table
Wrap
Widgets Silver
SilverPadding
SilverList / SilverGrid
SilverAppBar
SilverPadding
SilverList / SilverGrid
SilverAppBar

Les layouts en Flutter : layouts à un seul enfant
 Le widget Container est un widget qui permet de styliser, décorer, positionner, ajouter
des marges, ajouter un remplissage, ajouter une forme ou un dimensionnement à son
Widget enfant (peut être un layout à enfants multiples).
 Certains des attributs du widget Container :
 child : définit l’enfant contenu dans le container | alignment : permet d’aligner l’enfant à l’intérieur du
conteneur.
 padding : ajoute un rembourrage ou un espace vide autour du widget enfant.
 margin : Espace vide pour entourer le conteneur et l'enfant => entre le parent et le Conteneur.
 color : la couleur à peindre derrière l’enfant. | decoration : la forme à peindre derrière l’enfant.
 foregroundDecoration: la forme à peindre devant l’enfant.
 width : une valeur de largeur fixe. | height: une valeur de hauteur fixe.
 constraints : contraintes supplémentaires à ajouter à l’enfant.
 transform : permet de pivoter le widget.
130
https://api.flutter.dev/flutter/widgets/Container-class.html

 Le widget Center est un widget qui aligne son widget enfant au centre de l'espace
disponible sur l'écran.
 Il peut avoir les propriétés suivantes (aucune propriété n’est obligatoire):
 widthFactor : définit la largeur du widget Center comme étant la même que la largeur de l'enfant
multipliée par ce facteur.
 heightFactor : définit la hauteur du widget Center comme étant la même que la hauteur de l'enfant
multipliée par ce facteur.
 child : contient le widget enfant de Center.
131
https://api.flutter.dev/flutter/widgets/Center-class.html

 Le widget Expanded est un widget qui élargit un enfant d’un layout Row ou Column afin
que l'enfant remplisse l'espace disponible.
 Remplissage selon l’axe principal (mainAxis) : horizontalement pour le layout Row et
verticalement pour le layout Column.
 Si plusieurs enfants sont élargis, l'espace disponible est réparti entre eux en fonction du
facteur de flexibilité (flex).
 Un widget Expanded doit être le descendant d’un widget Row ou Column.
 Il peut avoir les propriétés suivantes :
 fit : contrôle la manière dont le widget enfant remplit l’espace disponible : FlexFit.tight (valeur par
défaut) permet à l'enfant de remplir l'espace disponible ; FlexFit.loose permet au widget enfant d'être
aussi grand que l'espace disponible.
 flex : Le facteur de flexibilité à utiliser pour cet enfant.
 child : contient le widget enfant d’Expanded. 132
https://api.flutter.dev/flutter/widgets/Expanded-class.html

Les layouts en Flutter : layouts à enfants multiples
 Le widget Column est un widget qui affiche ses enfants dans un tableau vertical.
 mainAxisAlignment : définit comment les enfants doivent être mis sur l’axe principal (vertical).
 mainAxisSize : définit combien d’espace doit être occupé dans l’axe principal (par défaut max).
 crossAxisAlignment : définit comment les enfants doivent être mis sur l’axe transversal (horizontal).
 verticalDirection : détermine l’ordre dans lequel les enfants sont disposés verticalement (par défaut du
haut vers le bas).
 children : une liste de widgets contenant les widgets enfant de Column.
133
https://api.flutter.dev/flutter/widgets/Column-class.html

 Le widget Row est un widget qui affiche ses enfants dans un tableau horizontal.
 mainAxisAlignment : définit comment les enfants doivent être mis sur l’axe principal (horizontal).
 mainAxisSize : définit combien d’espace doit être occupé dans l’axe principal (par défaut max).
 crossAxisAlignment : définit comment les enfants doivent être mis sur l’axe transversal (vertical).
 verticalDirection : détermine l’ordre dans lequel les enfants sont disposés.
 children : une liste de widgets contenant les widgets enfants de Row.
134
https://api.flutter.dev/flutter/widgets/Row-class.html

 un widge ListView est un widget qui présente une liste défilante de widgets disposés
linéairement. C’est le widget défilant le plus courant.
 Il affiche ses enfants un après un selon le sens défilement.
 scrollDirection : définit la direction de défilement (horizontal ou vertical).
 clipBehaviour : contrôle si le contenu de ListView sera tronqué ou non.
 itemExtent : contrôle la zone de défilement dans le ListView.
 primary : définit si le widget ListView peut défiler ou non.
 shrinkWrap : définit si la taille de la zone de défilement sera déterminée par le contenu à
l’intérieur de ListView.
 children : une liste de widgets contenant les widgets enfants de ListView.
135
https://api.flutter.dev/flutter/widgets/ListView-class.html

 Le widget GridView est un widget défilant qui prend une liste de widgets comme enfants
et les affiche dans une grille.
 Flutter propose trois type de GridView selon la manière avec laquelle les éléments de la
grille sont disposés:
 GridView.count : crée une grille défilante avec un nombre fixe d’éléments pour chaque ligne et colonne.
 GridView.builder : crée d’une manière efficace une grille défilante avec un grand nombre d’éléments. Il utilise une
fonction builder() pour remplir les éléments de la grille à la demande lorsque l’utilisateur défile => convenable
pour l’affichage d’une grande collection de données.
 GridView.extent : crée une grille défilante avec des enfants ayant une valeur d’étendue d’axe transversal
personnalisée.
 Un widget GridView peut avoir les propriétés suivantes :
 scrollDirection : définit le sens du défilement (horizontal ou vertical).
 gridDelegate : contrôle la disposition des enfants dans GridView.
 children : une liste de widgets contenant les widgets enfants de GridView. 136
https://api.flutter.dev/flutter/widgets/GridView-class.html

 Le widget Table est un widget qui affiche ses enfant dans une disposition de tableau =>
utile lorsqu’on veut afficher plusieurs lignes ayant la même largeur de colonnes.
 columnWidths : détermine la largeur des colonnes dans le widget Table.
 border : définit les bordures de la table (par défaut aucune bordure).
 children : une liste de lignes de tableau. Une ligne de tableau est un objet de type TableRow
qui possède une propriété children sous la forme d’une liste de widget => chaque widget
correspond à une cellule du tableau.
137
https://api.flutter.dev/flutter/widgets/Table-class.html

 Le widget Stack est un widget qui permet de superposer des widgets les uns sur les
autres => permet d’afficher plusieurs couches de widgets à l’écran (exemple : afficher un
texte sur une image).
 Un widget Stack possède deux types d’enfants :
 Les enfants positionnés : un widget enfant positionné est encapsulé dans un widget Positionned qui
possède au moins une propriété (top, right, left ou bottom) non nulle.
 Les enfants non positionnés : les widgets enfants du widget Stack sont positionnés en fonction de la
propriété d’alignement (par défaut coin supérieur gauche).
 Le widget Stack peut avoir les propriétés suivantes :
 alignement : contrôle la manière avec laquelle un widget non-positionné ou partiellement-positionné
sera aligné sur le Stack.
 fit : contrôle la taille des widgets enfants qui ne sont pas positionnés sur Stack.
 clipBehaviour : définit si le contenu sera tronqué ou non (en cas de débordement).
 children : une liste de widgets contenant les widgets enfants de Stack.
138
https://api.flutter.dev/flutter/widgets/Stack-class.html

Cours_Dev_mobile_3eB_chap31254_23_24.pdf

Contenu connexe

En vedette

Cours_Dev_mobile_3eB_chap31254_23_24.pdf