3.12. Bases de Dart : widgets et mise en page
Page 30 | Écouter en audio
Les widgets et la mise en page sont des concepts clés lorsqu'il s'agit de développer des applications à l'aide de Flutter et Dart. Ils constituent les éléments constitutifs des interfaces utilisateur et sont responsables de la manière dont les éléments de l'interface utilisateur sont organisés et affichés à l'écran. Approfondissons ces concepts et comprenons comment ils fonctionnent dans Flutter et Dart.
Widgets
Dans Flutter, tout est un widget. Les widgets décrivent à quoi devrait ressembler votre interface utilisateur. Chaque widget est une classe Dart immuable qui décrit une partie de la mise en page ou de l'interface utilisateur. Il existe deux principaux types de widgets dans Flutter : les widgets sans état et les widgets avec état.
Les widgets sans état sont ceux qui décrivent une partie de l'interface utilisateur qui peut être déterminée en fonction des paramètres et de la construction. Ils sont immuables, ce qui signifie qu’une fois construits, ils ne peuvent plus être modifiés. Toute modification apportée à l'interface utilisateur nécessite la création d'un nouveau widget.
Les widgets avec état, en revanche, sont dynamiques. Ils peuvent changer au fil du temps, par exemple en réponse à l'interaction de l'utilisateur ou lorsqu'un service de données est mis à jour. Les widgets avec état sont mutables, ce qui signifie qu'ils peuvent être modifiés après la construction.
Mise en page
La mise en page est le processus d'organisation des widgets sur l'écran. Dans Flutter, vous utilisez des widgets de mise en page pour organiser d'autres widgets. Il existe plusieurs widgets de mise en page disponibles dans Flutter, tels que Ligne, Colonne, Pile, Conteneur, etc.
Les lignes et les colonnes sont les widgets de mise en page les plus courants. Ils vous permettent de disposer vos widgets dans une ligne horizontale (Ligne) ou verticale (Colonne). Chaque ligne ou colonne prend en charge jusqu'à trois enfants : un widget principal et deux widgets enfants placés avant et après le widget principal.
Stack vous permet de superposer plusieurs widgets les uns sur les autres. Par exemple, vous pouvez utiliser une pile pour placer du texte sur une image. Le premier enfant d'une pile est placé en bas, les enfants suivants se chevauchant dans l'ordre dans lequel ils sont ajoutés.
Container est un autre widget de mise en page courant. Il permet de créer un rectangle visuel pouvant contenir un seul enfant. De plus, le conteneur peut avoir une décoration, telle qu'un arrière-plan, une bordure ou une ombre. Il peut également avoir des marges, un remplissage et des contraintes dimensionnelles.
Créer une interface utilisateur avec des widgets et une mise en page
Pour créer une interface utilisateur dans Flutter, vous combinez des widgets et une mise en page. Vous commencez avec un widget de mise en page et vous y ajoutez d'autres widgets. Par exemple, vous pouvez commencer avec un conteneur et y ajouter une ligne. Vous pouvez ensuite ajouter d'autres widgets à la ligne, tels que Texte, Icône et RaisedButton.
Les widgets sont imbriqués pour créer l'interface utilisateur. Le widget de mise en page externe (par exemple Container) est le parent des widgets internes (par exemple Row, Text, Icon, RaisedButton). Le widget parent contrôle le placement de ses widgets enfants, tandis que les widgets enfants définissent leur propre apparence.
Dans Flutter, vous construisez l'interface utilisateur de manière déclarative. Cela signifie que vous décrivez l'interface utilisateur en termes de son état final et que Flutter se charge de mettre à jour l'interface utilisateur pour qu'elle corresponde à cet état. Cela contraste avec l'approche impérative, dans laquelle vous devez spécifier les étapes de mise à jour de l'interface utilisateur.
En bref, les widgets et la mise en page sont les pierres angulaires de la création d'interfaces utilisateur dans Flutter. Avec une solide compréhension de ces concepts, vous pouvez créer des applications complexes et convaincantes avec Flutter et Dart.
Répondez maintenant à l’exercice sur le contenu :
Quels sont les deux principaux types de widgets dans Flutter et en quoi diffèrent-ils ?
Tu as raison! Félicitations, passez maintenant à la page suivante
Vous avez raté! Essayer à nouveau.
Page suivante de lebook gratuit :
31Bases de Dart : gestion de l'état
3 minutes
Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !
