Le widget GridView dans Flutter
Le widget ListView dans Flutter
-
Présentation
- Les “GridView” 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.
- Dans Flutter, GridView est un widget qui affiche une liste d’éléments sous forme de tableau 2D (lignes et colonnes bidimensionnelles).
- Ce widget peut contenir du texte, des images, des icônes , etc. à afficher sous forme de grille en fonction des besoins de l’utilisateur.
- Contrairement à une liste normale, dans laquelle les éléments ne sont rendus que dans une seule direction, GridView rend les éléments à la fois horizontalement et verticalement.
-
Implémenter un
GridViewdans Flutter - GridView peut être implémenté de différentes manières :
- Utiliser
GridView.count() - Utiliser
GridView.builder() - Utiliser
GridView.extent() -
GridView.count
- crossAxisCount:il est utilisé pour déclarer le nombre de colonne dans la vue
- crossAxisSpacing: il est utilisé pour déclarer l’espacement entre les enfants répertoriés dans l’axe transversal
- mainAxisSpacing: il est utilisé pour déclarer l’espacement entre les enfants listés dans l’axe principal
- scrollDirection: est utilisé pour définir le sens de défilement de l’enfant
- reverse: il renverse la liste dans le sens inverse
- physics: il est utilisé pour déterminer comment la liste se comporte lorsque nous atteignons le début à la fin
-
GridView.builder
- Tout comme pour les listes, un constructeur nommé
GridView.builderpermet 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. - Si votre application Flutter doit afficher une vue en grille d’un nombre important ou infini d’éléments (une liste de produits extraits de l’API, par exemple), vous devez utiliser GridView.builder() au lieu de GridView() .
- Le builder() est appelé uniquement pour les éléments qui sont réellement visibles afin d’améliorer les performances de votre application.
-
Exemple d’application
- 1. Créez un nouveau projet à partir de File ⇒ New Flutter Project avec votre IDE de développement.
- 2. Ouvrez le fichier main.dart et modifiez-le. Comme nous avons défini notre thème et modifié la propriété de bannière de débogage de Application.
- 3. Créez maintenant la classe HomePage à l’intérieur de main.dart comme vous pouvez le faire ci-dessous. Ici, nous utilisons Scaffold comme widget racine contenant la barre d’applications et FutureBuilder. FutureBuilder affiche une barre de progression jusqu’à ce que nous obtenions des détails sur les comtés du serveur.
- 4. Après cela, créez une classe pour les éléments que vous voulez afficher dans la grille, puis construisez le widget que vous allez afficher dans le GridView.
- Ce qui vous donne:
C’est la disposition de grille la plus fréquemment utilisée dans Flutter car ici, nous connaissons déjà la taille de la grille. Il permet aux développeurs de spécifier le nombre fixe de lignes et de colonnes . Le
GriedView.count() contient les propriétés suivantes :
