Les widgets sont les éléments fondamentaux de l'interface utilisateur de Flutter. Ils décrivent comment votre interface doit apparaître, compte tenu des paramètres et de l'état actuels. Chaque widget est une partie immuable de l'interface utilisateur qui est gonflée (c'est-à-dire dessinée) sur l'écran. Lorsque vous apportez des modifications au code du widget, le widget est regonflé et redessiné. Par conséquent, les widgets sont très importants dans Flutter et constituent la base de tout ce que vous créez.
Dans Flutter, presque tout est un widget. De l'application elle-même aux boutons, cartes, barres de navigation, etc. Les widgets sont imbriqués dans d'autres widgets pour former leur interface utilisateur. Par exemple, vous pouvez avoir un widget de barre de navigation contenant des widgets de boutons.
Pour mieux comprendre la structure d'une application Flutter, commençons par la structure de base d'une application Flutter. Une application Flutter de base se compose d’une arborescence de widgets, construite à partir d’un seul widget racine. Ce widget racine est généralement un widget MaterialApp ou CupertinoApp, qui fournit de nombreuses fonctionnalités d'application de base telles que la navigation, les thèmes, etc.
MatérielApp et CupertinoApp
MaterialApp est un widget qui encapsule divers widgets couramment nécessaires aux applications qui implémentent Material Design, telles que Scaffold, AppBar, etc. Il configure également un navigateur, qui peut gérer une pile de widgets d'itinéraire que vous pouvez "pousser" et "afficher".
CupertinoApp est similaire à MaterialApp, mais implémente une conception spécifique à Apple. Il encapsule également plusieurs widgets couramment nécessaires aux applications qui implémentent la conception d'Apple.
En fonction du type d'application que vous créez, vous pouvez choisir d'utiliser MaterialApp ou CupertinoApp comme widget racine.
Échafaudage
Après avoir choisi votre widget racine, le widget suivant dans l'arborescence est généralement un échafaudage. Scaffold est un widget pratique qui implémente la structure visuelle de base de Material Design. Il fournit un cadre pour afficher le contenu AppBar, Drawer, BottomNavigationBar, FloatingActionButton et le corps.
Barre d'applications
AppBar est un widget qui fournit une barre d'application. Il peut contenir un titre, des icônes d'action, une icône de menu, etc. Vous pouvez personnaliser l'AppBar de plusieurs manières pour répondre à vos besoins.
Corps
Le corps du Scaffold est l'endroit où vous placez le contenu principal de votre application. Vous pouvez remplir le corps avec n'importe quel widget de votre choix. En règle générale, vous utiliserez des widgets tels que ListView, GridView, Stack, etc. pour organiser vos widgets de contenu.
Tiroir et barre de navigation inférieure
Drawer et BottomNavigationBar sont des widgets qui permettent de naviguer dans votre application. Drawer fournit un panneau coulissant pouvant contenir une liste d'options de menu, tandis que BottomNavigationBar fournit une barre de navigation en bas de l'écran avec des éléments sur lesquels il est possible d'appuyer.
FloatingActionButton
FloatingActionButton est un bouton circulaire qui flotte au-dessus du contenu du corps. Il est généralement utilisé pour une action principale dans l'application, comme l'ajout d'un nouvel élément.
Il s'agit de la structure de base d'une application Flutter. Bien entendu, la structure de votre application peut être beaucoup plus complexe, en fonction de vos besoins. L'important est de comprendre que tout dans Flutter est un widget et que vous construisez votre interface utilisateur en imbriquant des widgets dans d'autres widgets.
Widgets sans état et avec état
Les widgets dans Flutter sont de deux types : sans état et avec état. Les widgets sans état sont ceux dont l'état ne peut pas changer au fil du temps, tandis que les widgets avec état sont ceux dont l'état peut changer au fil du temps.
Un widget Stateless est décrit par une classe qui hérite de StatelessWidget. Il décrit une partie de l'interface utilisateur qui peut dépendre des paramètres définis lors de la construction et peut ne pas changer au fil du temps.
Un widget Stateful, en revanche, est décrit par deux classes : une classe qui hérite de StatefulWidget et une autre classe qui hérite de State. L'objet StatefulWidget est lui-même immuable, mais l'objet State persiste pendant toute la durée de vie du widget.
En bref, la structure de base d'une application Flutter est construite à partir d'une arborescence de widgets, en commençant par un widget racine MaterialApp ou CupertinoApp, suivi d'un Scaffold qui fournit la structure visuelle de base, puis en remplissant le Scaffold avec divers widgets tels que comme AppBar, Drawer, BottomNavigationBar, FloatingActionButton et le contenu du corps. Chaque widget est immuable et est gonflé à l'écran. Lorsque vous apportez des modifications au code du widget, le widget est regonflé et redessiné. Par conséquent, les widgets dans Flutter sont très importants et constituent la base de tout ce que vous créez.
