Comment créer des widgets sans état

Lorsque vous commencez à utiliser Flutter, l'une des premières choses à apprendre concerne les widgets sans état. Nous avons enregistré une série qui couvre les widgets sans état, les statuts, les widgets hérités et les clés.

Dans la vidéo suivante, je passe en revue ce qu'est un widget Flutter et comment utiliser StatelessWidgets dans une application Flutter:

Pour ceux qui préfèrent lire des articles plutôt que de regarder des vidéos, cet article explique ce que sont les widgets Flutter, comment ils se combinent pour devenir des interfaces et comment composer une interface utilisateur avec des widgets sans état.

Partie 1 - Créer une application pour chien en utilisant des widgets sans état

Pour que les choses restent rapides, je commence par une application de base ici. Il contient un widget Scaffold, un widget AppBar et quelques widgets de texte qui affichent des informations sur mon Labrador jaune, Rocky.

Les widgets sont les éléments de base d'une application Flutter. Chacun d'eux est une déclaration immuable d'un aspect de l'interface utilisateur et peut prendre en charge de nombreuses tâches.

Par exemple, il y a:

  • widgets structurels - comme un bouton ou un menu
  • widgets stylistiques qui propagent une police ou un jeu de couleurs
  • widgets liés à la mise en page - comme le remplissage
  • et beaucoup plus

Vous pouvez également composer de nouveaux widgets à partir de widgets existants, afin que les combinaisons soient infinies. Laissez-moi vous montrer ce que je veux dire.

Dites que je veux une couleur derrière le nom de mon chien.

Je peux le faire en enveloppant le widget Texte avec un DecoratedBox.

Et maintenant, mon widget texte a une couleur de fond.

J'aimerai peut-être faire le tour du texte.

Je peux accomplir cela en ajoutant un widget de rembourrage. Je vais spécifier 8 pixels logiques de remplissage autour du nom de Rocky.

Et maintenant, j'ai du rembourrage.

Ce processus de création de widgets est ce que nous appelons la «composition». Je compose mon interface en combinant de simples widgets, chacun d’eux servant à un travail particulier: rembourrer des objets, DecoratedBox décore une boîte, etc.

Maintenant, disons que je vais au refuge pour animaux et que je rencontre un couple de laboratoires jaunes sans lesquels je ne pourrais pas vivre. Je peux ajouter un widget Colonne dans le widget Centre et ajouter leurs noms.

J'utilise un widget appelé SizedBox pour ajouter un espace vide entre eux, ce qui entraîne:

Mais vous savez, j'ai beaucoup de code répété (également appelé passe-partout) dans ces trois boîtes de noms. Ne serait-il pas formidable de créer mon propre widget qui porte un nom et gère les détails pour moi?

Bon, je peux.

Je vais faire un StatelessWidget et je l’appelle DogName. Un widget sans état est un widget composé d’enfants (c’est pourquoi il contient une méthode build ()) et ne contient aucun état modifiable qu’il doit suivre. Quand je parle d'état mutable, je veux dire toutes les propriétés qui changent avec le temps. Par exemple, une zone de texte contenant une chaîne mise à jour par l'utilisateur ou un flux de données mettant à jour l'affichage des arrivées / départs.

Ce widget n’a rien de tout cela. Il faut juste une chaîne pour un nom, qui ne changera pas, donc StatelessWidget est un ajustement parfait. Je peux même rendre cette chaîne finale, aussi.

Je peux spécifier la chaîne via le constructeur, et comme toutes ses propriétés sont finales, je peux le marquer comme constructeur const.

Maintenant, il me suffit de définir la méthode de construction à l’aide des mêmes widgets; c’est seulement maintenant que le widget Texte affiche la chaîne de la propriété name du widget.

J'utilise ce widget pour simplifier le code d'origine.

Comme vous pouvez le constater, le résultat est la même interface utilisateur, mais le code est plus étroit grâce à l’utilisation de la composition par StatelessWidget et Flutter.

Partie 2 - Arbres de widgets et arbres d'élément

C’est donc un petit exemple du fonctionnement de la composition avec StatelessWidget. À ce stade, vous pouvez vous demander: «Je vois comment ces méthodes de construction fonctionnent, mais quand sont-elles appelées?» Eh bien, commençons avec un seul widget DogName.

Nous avons tendance à penser que les applications construites avec Flutter sont un arbre de widgets, et ce n’est pas une mauvaise chose. Mais comme je l’ai mentionné au début, les widgets ne sont en réalité que des configurations pour des éléments de l’interface utilisateur d’une application. Ce sont des plans. Alors à quoi servent ces configurations? Éléments. Un élément est un widget qui a été rendu réel et monté à l’écran. L'arborescence des éléments représente ce qui est réellement affiché sur le périphérique à un moment donné.

Chaque classe de widget a à la fois une classe d'élément correspondante et une méthode pour créer une instance.

StatelessWidget, par exemple, crée un StatelessElement.

Lorsqu'un widget est monté dans l'arborescence, Flutter appelle la méthode createElement (). Flutter demande un élément au widget et place cet élément dans l'arborescence des éléments avec une référence au widget qui l'a créé.

StatefulElement demande ensuite «Je me demande si j'ai des enfants?» Et appelle la méthode build () du widget.

Dans cette application, il y en a plusieurs. Ces widgets créent ensuite leurs propres éléments correspondants.

Et ceux-ci sont également montés sur l'arbre des éléments.

Donc, l’application a maintenant deux arbres: l’un qui représente ce qui est réellement à l’écran (les éléments) et l’autre qui contient les plans à partir desquels ils ont été créés (les widgets).

Maintenant, vous vous demandez peut-être ce qui commence le processus de construction et de création d'éléments, ce qui lance tout, pour ainsi dire. Laissez-moi vous montrer quelque chose que vous n'avez peut-être pas remarqué au début…

La classe DogApp, qui représente l'ensemble de l'application, est elle-même un StatelessWidget.

Je vous ai dit que les widgets peuvent presque tout faire, non? Si vous regardez main (), qui est le point d’entrée de l’application, vous pouvez voir qu’elle appelle la méthode runApp (), et c’est le point de départ. La méthode runApp () prend un widget et le monte en tant qu'élément racine de l'application avec des contraintes de hauteur et de largeur correspondant à la taille de l'écran.

Ensuite, Flutter parcourt toutes les méthodes build () de l’arborescence des widgets, en créant des widgets et en les utilisant pour créer des éléments, jusqu’à ce que tout soit construit, monté à l’écran et prêt à être mis en forme et rendu.

C’est ainsi qu’il affiche trois petites boîtes contenant les noms des laboratoires jaunes.

C’est donc une introduction à la composition avec StatelessWidgets et à la création d’une interface. Une chose que je n’ai pas mentionnée est la façon de mettre à jour ou de reconstruire une interface lorsque les données changent. C’est parce que StatelessWidgets ne le fait pas. Ils sont sans état, ils ne peuvent donc pas suivre les données au fil du temps, ni déclencher de reconstruction par eux-mêmes.

Heureusement, Flutter a aussi StatefulWidgets, dont nous vous parlerons dans le prochain épisode de cette série.

Pour plus d'informations sur Flutter et ses nombreux widgets, rendez-vous sur flutter.io.

Vous pouvez également regarder d'autres épisodes de la série ici ou essayer un codelab Flutter.