6. Widgets dans Flutter

Página 72

Les widgets sont les éléments fondamentaux d'une interface utilisateur (UI) dans Flutter. Ce sont les éléments de base à partir desquels Flutter construit son interface utilisateur. Ils sont immuables et décrits en termes d'autres widgets de niveau inférieur. Il en existe deux variétés : StatelessWidget et StatefulWidget.

Un StatelessWidget est un widget qui décrit une partie de l'interface utilisateur qui peut dépendre de la configuration mais pas de l'état. En d’autres termes, il décrit à quoi ressemble l’interface utilisateur compte tenu de sa configuration actuelle. StatelessWidget est immuable, ce qui signifie qu'une fois ses valeurs définies, elles ne peuvent plus être modifiées.

D'un autre côté, un StatefulWidget est dynamique. L'état est une information qui (1) peut être lue de manière synchrone lorsque le widget est construit et (2) peut changer pendant la durée de vie du widget. Il s'agit d'une implémentation d'un widget qui peut évoluer avec le temps. Par exemple, si un widget possède un compteur qui s'incrémente chaque fois que l'utilisateur appuie sur un bouton, la valeur du compteur correspond à l'état.

Dans Flutter, presque tout est un widget. Cela inclut l'alignement, le remplissage, la mise en page, etc. Ils suivent une philosophie de composition très forte, ce qui signifie que vous pouvez combiner plusieurs petits widgets pour former un widget plus complexe. Les widgets sont organisés dans une arborescence de widgets.

Il existe de nombreux types de widgets dans Flutter, mais ils sont généralement divisés en deux types : les widgets de mise en page et les widgets d'interface utilisateur. Les widgets de mise en page tels que Conteneur, Remplissage, Colonne, Ligne, etc. ne fournissent pas d'interface utilisateur visuellement visible. Au lieu de cela, ils contrôlent la façon dont les widgets enfants sont organisés ou rendus dans l'application.

Les widgets d'interface utilisateur tels que Text, RaisedButton, FlatButton, etc. fournissent une interface utilisateur visuellement perceptible. Ils sont souvent utilisés conjointement avec des widgets de mise en page pour créer la structure et l'interface utilisateur de l'application.

Les widgets de Flutter sont très puissants et vous permettent de créer des interfaces utilisateur complexes et esthétiques avec peu de code. Ils constituent la base de toutes les applications Flutter et constituent le principal moyen de créer et d'organiser l'interface utilisateur.

Pour créer un widget dans Flutter, vous devez définir une nouvelle classe qui étend StatelessWidget ou StatefulWidget. Ensuite, vous devez implémenter la méthode build, qui est appelée chaque fois que Flutter a besoin de restituer le widget. La méthode build doit renvoyer un nouvel objet widget que Flutter peut afficher à l'écran.

Un exemple de widget simple serait un widget de texte. Pour créer un widget de texte, vous pouvez procéder comme suit :

la classe MyTextWidget étend StatelessWidget { @passer outre Construction du widget (contexte BuildContext) { return Text('Bonjour, Flutter !'); } }

Il s'agit d'un exemple très simple, mais il montre comment les widgets sont créés dans Flutter. Vous définissez une nouvelle classe qui étend StatelessWidget, implémentez la méthode build et renvoyez un nouveau widget Texte que Flutter peut afficher à l'écran.

En bref, les widgets constituent la base de toutes les applications Flutter. Ils sont puissants et vous permettent de créer des interfaces utilisateur complexes et esthétiques avec peu de code. Si vous commencez tout juste à apprendre Flutter, je vous recommande de prendre le temps de comprendre le fonctionnement des widgets, car ils constituent un élément fondamental de Flutter.

Répondez maintenant à l’exercice sur le contenu :

Qu'est-ce qu'un widget dans Flutter et comment est-il créé ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Page suivante de lebook gratuit :

736.1. Widgets dans Flutter : introduction à Flutter et Dart

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 !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte