Qu’est-ce qu’un Widget ?
Pour l’expliquer en quelques mots, un widget dans Flutter est une unité de base de l’interface utilisateur. Tout ce que vous voyez à l’écran dans une application faite avec Flutter est appelé « widget ». Ils peuvent être très simples, comme un bouton ou un bloc de texte, ou bien plus complexes comme une page entière (composée de plusieurs widgets).
Les widgets servent en quelque sorte de modèle à l’appareil, pour qu’il sache comment afficher un élément à l’écran. Par exemple, le widget ‘Text’ va lui expliquer ce qu’est un bloc de texte et comment celui-ci doit être présenté. Il précise ce déjà qui est écrit, mais aussi la taille des lettres, la police utilisée, et où il doit apparaître.
Flutter possède toute une librairie de widgets. Et ce sont eux qui vont vous permettre de construire le visuel et les interactions de votre application et de l’afficher correctement sur différents types d’écrans.
Quelle différence entre un widget et une classe ?
Si vous avez déjà un peu codé avec Flutter ou lu mes guides, vous avez surement vu passer le terme de « Classe« . Une classe en programmation est comme un plan ou un modèle pour créer des objets que vous allez pouvoir ensuite manipuler. Elle définit des propriétés (ou attributs) et des méthodes (ou fonctions) que les objets que vous allez créer à partir de cette classe posséderont. Par exemple, une classe Voiture pourrait avoir des propriétés comme couleur, marque, et des méthodes comme démarrer(), freiner().
Ce concept est donc assez lié à celui de widget et présente pourtant une différence notable :
- Les widgets servent de modèles pour des éléments visuels qui vont constituer l’interface utilisateur ;
- Les classes servent de modèles à des objets que vous pourrez manipuler dans votre application comme des utilisateurs, des listes, etc.
Les types de widgets dans Flutter
Comme expliqué en début de cet article, tous les éléments que vous allez utiliser pour construire votre application avec Flutter sont appelés des widgets. Dans la documentation officielle, ceux-ci sont divisés en plusieurs catégories. On trouve par exemple des widgets pour :
- Construire le design et les logiques de son app ;
- Organiser les éléments en colonnes, lignes, grilles, etc ;
- Récupérer des informations entrées par l’utilisateur ;
- Ajouter des interactions ;
- Créer des éléments animés ;
- Scroller ;
- Ajouter des images, icons, gif, musiques, etc ;
- Ajouter du texte ;
- Créer des listview ;
- Donner un style à divers widgets ;
- Récupérer des informations dans sa base de données et les utiliser pour construire son application, etc.
Je prendrai le temps de rédiger petit à petit des guides en français sur les widgets les plus importants. En attendant, vous pouvez utiliser la documentation de Flutter, qui si elle est un peu complexe, permet au moins de découvrir ce que cache sa librairie. Vous pouvez aussi consulter mon article sur les widgets de base, qui vous permet de découvrir les éléments les plus utilisés pour construire une application et de rapidement commencer votre projet.
Accéder aux widgets de Flutter
Pour accéder à la librairie de widgets mise à disposition par Flutter, vous allez devoir l’importer sur tous vos fichiers dart. Ainsi, tous les documents sur lesquels vous allez écrire votre code devront donc commencer par :
import 'package:flutter/material.dart';Cette ligne vous permet d’importer la plupart des widgets et des méthodes natives à Flutter. D’autres méthodes pourront être importés plus tard, pour des besoins spécifiques, notamment des packages.
Stateless vs Stateful
Une chose très importante à comprendre quand on parle de widgets dans Flutter est la différence entre les widgets sans état (Stateless) et avec état (Stateful). Ce concept peut être difficile au début, alors commençons par expliquer comment fonctionne une application Flutter.
Quand vous lancez votre application sur un téléphone, votre code est lu en commençant par le début de votre « arbre de widgets ». Il construit d’abord la Material App (une sorte de page blanche), puis ajoute les objets qui sont dedans, et les objets à l’intérieur de ces objets, jusqu’à obtenir le rendu final de votre application. Par exemple, voici à quoi pourrait ressembler un arbre de widgets simple :
Maintenant, imaginons que vous voulez ajouter un élément dynamique à votre application, comme une checkbox (case à cocher). Cette checkbox doit changer son état quand vous appuyez dessus (cochée ou décochée). Ceci va alors changer l’état de votre widget dans l’arbre de widgets.
C’est ici que réside la différence entre Stateless et Stateful. Au lieu de chercher quel est le widget qui doit être modifié, Flutter va simplement reconstruire tout l’arbre de widgets depuis le début, avec le widget mis à jour. Mais pour que cela puisse se faire, cet élément doit être de type Stateful, sans quoi la modification ne se fera pas.
Pour simplifier :
- Les Stateless widgets sont utilisés pour créer des éléments qui ne vont pas changer pendant l’utilisation de l’application (comme un bouton).
- Les Stateful widgets sont utilisés pour créer des éléments qui peuvent changer pendant l’utilisation de l’application (comme une liste de courses).
Quand utiliser des Stateless et Stateful widgets ?
Les widgets Stateless et Stateful ont de particulier par rapport aux autres widgets, qu’ils n’affichent pas quelque chose de spécifique comme le ferait un widget Text ou bien Icon. Ils vont permettre de définir la structure ou la disposition d’autres widgets qui, eux, affichent quelque chose à l’écran.
Un widget Stateless peut être utilisé pour définir un composant réutilisable ou une partie statique de votre interface utilisateur. Par exemple, vous pouvez créer un widget Stateless appelé MyButton qui définit le style et le comportement d’un bouton, et qui ne contient pas d’éléments qui changeront d’états. Ce widget pourrait ensuite être utilisé à plusieurs endroits de votre application pour afficher des boutons similaires.
Le widget Stateful quant à lui, est utilisé lorsque vous avez besoin que votre interface utilisateur réagisse et se mette à jour en fonction des changements d’état ou des interactions de l’utilisateur. Par exemple, vous pouvez utiliser un widget Stateful pour créer un formulaire où les utilisateurs peuvent saisir des informations. Ce widget conserverait en temps réel les données saisies par l’utilisateur et pourrait adapter sa forme en fonction des réponses.
Pour résumer, ces deux widgets n’affichent pas directement quelque chose à l’écran, mais vont servir de structure pour d’autres widgets qui, eux, affichent du contenu.
Déclarer un Stateless widget
Voici la manière de déclarer un widget de type Stateless :
class MyExample extends StatelessWidget {
const MyExample({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}Ici, MyExample est le nom donné à votre widget. Chaque Stateless widget doit avoir un nom qui lui est propre. Ceci va permettre de pouvoir le réutiliser à un ou plusieurs endroits de votre code, simplement en l’appelant par son nom.
Déclarer un Stateful widget
Le Stateful widget est quant à lui légèrement plus long à déclarer, car il se construit en deux parties :
class MySecondExample extends StatefulWidget {
const MySecondExample({super.key});
@override
State<MySecondExample> createState() => _MySecondExampleState();
}
class _MySecondExampleState extends State<MySecondExample> {
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}Changer rapidement l’état d’un widget
Pour changer rapidement un Stateless widget en Stateful et inversement, placez le cursus de votre souris dessus et cliquez. Appuyez ensuite sur Commande + D. Une petite ampoule va apparaître sur laquelle vous allez pouvoir cliquer. Visual Studio vous propose alors de changer automatiquement l’état de votre widget, sans avoir à réécrire toute la déclaration.
Conclusion
Cet article sur les widgets clôt le fil d’introduction aux bases de Flutter. Vous devriez désormais être capable :
- D’installer le SDK Flutter ainsi que votre écosystème de développement, sur Mac ou Windows ;
- De créer et de manipuler des variables :
- Strings ;
- Int et doubles ;
- Booléens ;
- Listes ;
- Map ;
- Date et heures ;
- URIs.
- D’utiliser des opérateurs pour faire interagir vos variables ;
- De réaliser des actions différentes selon des conditions ;
- De mettre en place des boucles pour réaliser plusieurs fois une action ;
- De comprendre l’utilité des widgets dans Flutter et comment ceux-ci vont vous permettre de coder votre application.
Si vous vous sentez prêt à poursuivre sur ce chemin, la prochaine étape va être de commencer à coder votre première application. Pourquoi ne pas utiliser le code de base fournit par Flutter, et s’entrainer dessus ?
Coder une première application avec Flutter →
Découvrir plus de widgets
Si vous commencez à avoir de l’experience sur Flutter et souhaite apprendre à utiliser des widgets plus avancés pour élaborer des applications plus complexes, je rédigerai plus de guides au fur et à mesure :
