Qu’est ce qu’un widget dans Flutter ?
Sommaire
- 1- Objectifs
- 2- Présentation des widgets dans Flutter
- 3- Définitions des widgets dans Flutter
- 4- Les notions d'arborescence et de context de Widgets dans Flutter
- 4.1- Arborescence de Widgets (Widget Tree) :
- 4.2- Organisation de Widgets :
- 4.3- Le terme
Context
: - 5- Les différents types de widgets dans Flutter
- 5.1- Widgets Flutter sans état (StatelessWidget)
- 5.1.1- Étapes pour implémenter le widget sans état ?
- 5.2- Widgets Flutter avec état (StatefulWidget)
- 5.2.1- Étapes pour implémenter Stateful Widget
- 6- Les Catégories de widgets Flutter
- 6.1- Accessibilité
- 6.2- Animation et mouvement
- 6.3- Actifs, images et icônes
- 6.4- Async
- 6.5- Notions de base
- 6.6- Cupertino
- 6.7- Entrée
- 6.8- Modèles d’interaction
- 6.9- Disposition
- 6.10- Composants matériels
- 6.11- Composants matériels
- 6.12- Défilement
- 6.13- Styling
- 6.14- Texte
- 7- Les widgets Flutter
- 7.1- Text:
- 7.2- Row,Column :
- 7.3- Stack:
- 7.4- Container:
- 8- Application
- 8.1- Code utilisé
- 8.2- Interprétation du code
- 8.2.1- Cours Flutter
Qu’est ce qu’un widget dans Flutter ?
-
Objectifs
- Dans cet article, nous comprendrons certains des concepts clés des widgets du framework Flutter.
- Dans cet article, nous allons apprendre le concept d’un widget, comment le créer, et leurs différents types disponibles dans le framework Flutter.
-
Présentation des widgets dans Flutter
- Flutter est la boîte à outils d’interface utilisateur de Google pour créer de belles applications iOS et Android compilées en natif à partir d’une base de code unique.
- Dans Flutter, tout ce qui apparaît dans l’interface utilisateur s’appelle widget et ils héritent tous de la classe Widget. Lorsque vous créez une interface utilisateur dans Flutter, vous le faites en attachant chaque widget à l’écran de l’application afin qu’il s’adapte exactement à l’endroit où vous le souhaitez.
- Dans Flutter, tout est construit sur des widgets. Les éléments, les styles, les thèmes et même l’état de l’interface utilisateur sont gérés dans des widgets spécifiques.
- Les widgets décrivent à quoi leur vue devrait ressembler compte tenu de leur configuration et de leur état actuels.
- Lorsque l’état d’un widget change, le widget reconstruit sa description, que le framework compare à la description précédente afin de déterminer les changements minimaux nécessaires dans l’arborescence de rendu sous-jacente pour passer d’un état à l’autre.
- Une application Flutter se compose de plusieurs interfaces utilisateur, chaque interface utilisateur étant constituée d’un ou de plusieurs widgets .
- Ces widgets ne sont que des éléments d’interaction entre l’utilisateur et l’application.
- Les widgets représentent une vue avec une configuration et un état . Un widget est construit avec une configuration et un état.
- Les widgets Flutter ne sont que des éléments de votre interface utilisateur. Si vous êtes familier avec le développement Android ou iOS, vous établirez la connexion immédiate aux vues (pour Android) et aux UIViews (pour iOS).
-
Définitions des widgets dans Flutter
- Un widget est un élément basique qui vous permet de construire vos écrans en Flutter.
- Certains widgets sont visuels, c’est à dire apparaissent à l’écran, d’autres non. Flutter met à notre disposition une multitude de widgets.
- Un widget est tout ce qui compose votre application que ce soit un text, une image, un bouton, l’ensemble d’une page ou bien les opérations qui permettent de donner un résultat.
- Les widgets Flutter sont les principaux composants d’une application. Ils donnent l’apparence en fonction de leur configuration et de leur état.
- Concrètement, les widgets sont des classes en Dart qui héritent directement ou indirectement de la classe Widget.
-
Les notions d’arborescence et de context de Widgets dans Flutter
-
Arborescence de Widgets (Widget Tree) :
- En Flutter, l’interface utilisateur est construite à l’aide de widgets, qui sont des composants modulaires.
- Ces widgets sont organisés de manière hiérarchique sous la forme d’une arborescence. Chaque widget peut avoir des enfants, et ces enfants peuvent avoir à leur tour d’autres enfants, créant ainsi une structure arborescente.
- L’arborescence des widgets est importante car elle définit la manière dont les widgets sont composés et organisés sur l’écran.
-
Organisation de Widgets :
- Les Widgets sont organisés sous forme d’
arborescence (tree)
. - Un widget qui contient d’autres widgets est appelé Widget parent (ou conteneur de Widgets). Les widgets contenus dans un Widget parent sont appelés Widgets enfants.
- Si nous considérons l’application de base qui est automatiquement générée par Flutter, nous obtenons la structure arborescente de Widgets suivante (limitée à la liste des Widgets présents dans le code):
-
Le terme
Context
: - Dans le contexte de Flutter, le terme « context » fait référence à un objet qui contient des informations sur l’emplacement actuel d’un widget dans l’arborescence des widgets. Le contexte est essentiellement une référence à l’endroit où un widget est construit dans la hiérarchie des widgets.
- Chaque widget dans Flutter a un contexte qui lui est associé. Ce contexte contient des informations sur la position du widget dans la structure de l’interface utilisateur, ses ancêtres, ses descendants, etc.
- Un context n’est rien d’autre qu’une référence à l’emplacement d’un Widget dans l’arborescence de tous les Widgets qui sont construits.
- Un context n’est lié qu’à un seul widget.
- Si un widget « WA » contient des widgets enfants, le context de widget « WA » deviendra le contexte parent de tous les enfants directs.
- En lisant ceci, il est clair que les contextes sont liés et eux aussi, composent une arborescence de contextes (relation parent-enfants).
- Si nous essayons maintenant d’illustrer la notion de Context dans le diagramme précédent, nous obtenons (toujours comme une vue très simplifiée) où chaque couleur représente un context (à l’exception de MyApp, qui est différent):
-
Les différents types de widgets dans Flutter
- Chaque widgets Flutter peut être sans état ou avec état. La principale différence est la possibilité de restituer les widgets au moment de l’exécution. Le widget sans état ne sera utilisé qu’une seule fois et est immuable.
- Par contre un widget avec état peut être utilisé plusieurs fois en fonction du changement de son état interne.
-
Widgets Flutter sans état (StatelessWidget)
- Les widgets sans état sont des widgets qui ne stockent aucun état. C’est-à-dire qu’ils ne stockent pas les valeurs susceptibles de changer.
- Par exemple, une icône est sans état ; vous définissez l’image de l’icône lorsque vous la créez, puis elle ne change plus. Un widget Texte est également sans état.
- Si vous souhaitez modifier la valeur du texte, il vous suffit de créer un tout nouveau widget avec le nouveau texte. Les widgets Text Flutter ne stockent pas de propriété de texte modifiable.
- Par exemple, une icône est sans état ; vous définissez l’image de l’icône lorsque vous la créez, puis elle ne change plus.
- Un widget Texte est également sans état. Si vous souhaitez modifier la valeur du texte, il vous suffit de créer un tout nouveau widget avec le nouveau texte. Les widgets Text Flutter ne stockent pas de propriété de texte modifiable.
-
Étapes pour implémenter le widget sans état ?
- 1- Créez une classe qui étend ‘
StatelessWidget
‘. - 2- Créez une méthode ‘
build()
‘ pour les widgets qui ne changent jamais leurs valeurs pendant l’exécution. - 3- La méthode ‘
build()
‘ renvoie le widget. -
Widgets Flutter avec état (StatefulWidget)
- Cela signifie qu’il peut suivre les modifications et mettre à jour l’interface utilisateur en fonction de ces modifications.
- Le widget avec état lui-même est immuable, mais il crée un objet State qui garde une trace des modifications.
- Lorsque les valeurs de l’objet State changent, il crée un tout nouveau widget avec les valeurs mises à jour. Ainsi, le widget léger est recréé mais l’état persiste à travers les changements.
-
Étapes pour implémenter Stateful Widget
- 1- Créez une classe qui étend ‘
StatefulWidget
‘, qui renvoie l’état dans ‘createState()
‘ - 2- Créez une classe ‘
State
‘ pour les widgets qui peuvent changer leurs valeurs pendant l’exécution. - 3- Dans la classe ‘
State
‘, implémentez la méthode ‘build()
‘. - 4- Appelez la fonction ‘
setState()
‘. La fonction ‘setState()
‘ redessine en fait les widgets. -
Les Catégories de widgets Flutter
- Les widgets flutter sont divisés sur au moins sur 14 catégories. Ils sont principalement séparés sur la base de la fonctionnalité qu’ils fournissent dans une application.
-
Accessibilité
- il s’agit de l’ensemble de widgets qui rendent une application flutter plus facilement accessible.
- Ce groupe de widgets rend une application flutter plus conviviale.
-
Animation et mouvement
- Les widgets qui apportent de l’animation et du mouvement à d’autres widgets sont appelés widgets d’animation et de mouvement.
- ces widgets ajoutent une animation à d’autres widgets.
-
Actifs, images et icônes
- Ces widgets prennent en charge les actifs tels que les images d’affichage et les icônes d’affichage.
-
Async
- Ils fournissent une fonctionnalité asynchrone dans l’application Flutter.
-
Notions de base
- Il s’agit de l’ensemble de widgets qui sont absolument nécessaires au développement de toute application Flutter.
-
Cupertino
- Ce sont les widgets conçus par iOS.
-
Entrée
- Cet ensemble de widgets fournit des fonctionnalités d’entrée dans une application flottante.
-
Modèles d’interaction
- Ces widgets sont là pour gérer les événements tactiles et diriger les utilisateurs vers différentes vues de l’application.
-
Disposition
- Cet ensemble de widgets aide à placer les autres widgets sur l’écran selon les besoins.
-
Composants matériels
- Il s’agit d’un ensemble de widgets qui suivent principalement la conception matérielle de Google.
-
Composants matériels
- Il s’agit de l’ensemble de widgets qui appliquent des modifications visuelles à leurs widgets enfants sans modifier leur disposition ou leur forme.
-
Défilement
- Cela offre une possibilité de sacroller à un ensemble d’autres widgets qui ne sont pas défilants par défaut.
-
Styling
- Il s’agit du thème, de la réactivité et du dimensionnement de l’application.
-
Texte
- C’est le texte d’affichage.
- Ceci est utilisés pour afficher du texte.
-
Les widgets Flutter
- Flutter est livré avec une suite de puissants widgets de base, dont les suivants sont couramment utilisés :
-
Text:
- Le Textwidget vous permet de créer une série de texte stylé dans votre application.
- Un texte est un widget dans Flutter qui nous permet d’ afficher une chaîne de texte avec une seule ligne dans notre application .
- Le widget texte est l’un des widgets les plus utilisés dans Flutter. Pour afficher du texte dans les applications flottantes, nous devons utiliser un widget de texte. Nous ne pouvons pas imaginer une application sans texte.
- En utilisant ce widget, nous pouvons afficher le texte sur une seule ligne ou sur plusieurs lignes. Le texte peut être personnalisé avec différentes propriétés telles que la taille de police, la famille de polices, le poids de police, la couleur, etc.
-
Row,Column :
- Ces widgets flexibles vous permettent de créer des mises en page flexibles dans les directions horizontale ( Row) et verticale ( Column). La conception de ces objets est basée sur le modèle de mise en page flexbox du Web.
-
Stack:
- Au lieu d’être orienté linéairement (horizontalement ou verticalement), un Stackwidget vous permet de placer des widgets les uns sur les autres dans l’ordre de la peinture. Vous pouvez ensuite utiliser le Positioned widget sur les enfants de a Stackpour les positionner par rapport au bord supérieur, droit, inférieur ou gauche de la pile. Les piles sont basées sur le modèle de disposition de positionnement absolu du Web.
-
Container:
- Le Containerwidget vous permet de créer un élément visuel rectangulaire. Un conteneur peut être décoré avec un BoxDecoration, tel qu’un arrière-plan, une bordure ou une ombre.
- Un container peut également avoir des marges, un rembourrage et des contraintes appliquées à sa taille. De plus, un container peut être transformé dans un espace tridimensionnel à l’aide d’une matrice.
-
Application
- Créer une application Flutter simple qui affiche un texte « Hello Flutter! » avec une couleur bleu au centre de l’écran.
-
Code utilisé
-
Interprétation du code
void main()
: Chaque programme Dart doit avoir une fonction void main()runApp()
:- La méthode runApp() est une instance de widget, ce qui en fait la racine de l’arborescence qui démarre notre application.
- La méthode runApp() prend un widget comme argument. Dans notre cas, Center , qui possède un autre widget enfant, Text.
- Le but principal de runApp() est d’attacher le widget donné à l’écran.
Les widgets sans état sont des widgets qui ne stockent aucun état. Autrement dit, ils ne stockent pas les valeurs susceptibles de changer.
Le deuxième type de widget est appelé un widget avec état. Cela signifie qu’il peut suivre les modifications et mettre à jour l’interface utilisateur en fonction de ces modifications.
import 'package:flutter/material.dart';
void main() => runApp(
const Center(
child: Text("Hello Flutter!",
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.blue,
fontSize: 25,
))),
);