Editions ENI Livres | Vidéos | e-Formations
Listes et grilles
Introduction
Il existe un élément très important qui n’a pas encore été abordé dans l’ouvrage. Comment faire apparaître des collections ?
L’exposition d’un grand nombre d’éléments à l’écran n’est jamais évidente et peut être la source de beaucoup de problèmes. Afin de couvrir ces besoins, l’équipe Flutter met à disposition deux widgets qui s’avèrent très complémentaires.
Le premier est la ListView qui, comme son nom l’indique, permet l’affichage d’une collection sous forme de liste. Le chapitre abordera plusieurs façons d’implémenter ce widget ainsi que différentes méthodes de présentation des items.
Le second widget est la GridView. Son nom est également explicite. Cette fois-ci, il n’est plus question d’un affichage sous forme de liste, mais d’une grille. Celle-ci sera composée de vignettes qui peuvent, elles aussi, revêtir différentes formes.
ListView
La ListView est un outil très pratique pour afficher une grande quantité d’informations à l’écran. Dans le chapitre précédent, les erreurs liées aux dépassements avaient été évoquées rapidement. Pour revenir sur ce point, si la quantité d’informations à afficher dépasse la taille de l’écran, une erreur se produit. Pour remédier à cela, un widget SingleChildScrollView avait été utilisé. Toutefois, cela ne constitue pas une solution durable.
La solution préconisée donc est l’utilisation du ListView. Tel quel, le constructeur permet d’insérer une liste de widgets enfants. Cette solution est idéale pour des listes courtes. En effet, l’ensemble des enfants, visibles ou non, sera construit dès le départ. Cette charge peut s’avérer très lourde si la liste est longue.
1. ListView.builder
Pour des quantités d’informations plus conséquentes, il vaut mieux utiliser le constructeur nommé ListView.builder. Il prend un paramètre de type IndexedWidgetBuilder qui va créer les enfants à la demande, au fur et à mesure qu’ils seront visibles, donc pendant le défilement de la liste. C’est sur ce widget que le prochain exemple va porter.
Mais avant cela, il convient de détailler un peu les éléments qui vont permettre de construire cette ListView.
Dans le constructeur nommé, il n’y a qu’un paramètre obligatoire nommé itemBuilder. Comme évoqué plus haut, celui-ci attend une instance de la classe IndexedWidgetBuilder. Ce widget réclame deux éléments : un BuildContext et un index.
Le second paramètre important à prendre en considération est itemCount. Il permet de définir la taille de la ListView.
Avant de mettre en place cela, il faut se doter d’une collection. Dans ce but, une classe Voiture est créée. Elle prend une forme simple et possède seulement trois attributs marque, modele et image, ainsi qu’un constructeur :
class Voiture {
String marque;
String modele;
Image image;
Voiture(this.marque, this.modele, this.image);
}...GridView
Les grilles sont une autre forme d’affichage des collections. À la différence de ListView, le widget GridView autorise l’affichage sous forme de vignettes. L’effet est donc différent, mais dans le cas où des images ou des icônes sont présentes dans la collection, ce type de présentation est plus profitable.
1. GridView.builder
Tout comme pour les listes, un constructeur nommé GridView.builder permet de mettre en place facilement le widget. Il faut toutefois noter la présence d’un paramètre à prendre en considération, gridDelegate. Il permet de choisir notamment le nombre de colonnes sur lesquelles les vignettes vont se répartir. Dans le code qui va servir d’exemple, toujours avec les voitures, le paramètre gridDelegate recevra une instance de SliverGridDelegateWithFixedCrossAxisCount qui permet de définir un nombre fixe de colonnes. Dans cas précis, il sera défini à 3. Pour le reste, le paramètre itemCount ainsi que itemBuilder seront présents et travailleront de la même façon que dans les autres cas pratiques.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.cyan,
),
body: GridView.builder( ...