Le widget ListView dans Flutter
Le widget ListView dans Flutter
-
Présentation
- La
ListViewest un outil très pratique pour afficher une grande quantité d’informations à l’écran. - ListView est une liste déroulante de widgets disposés linéairement. De plus, il affiche ses enfants les uns après les autres dans le sens du défilement.
-
quelques propriétés de ListView
childrens:Contient une liste de widgets comme valeur et les organise dans un format de liste. Cet attribut est le plus important car il contient les valeurs de la liste.childrenDelegate: cette propriété prend SliverChildDelegate comme objet. Et il sert de délégué qui a fourni aux enfants le ListView.clipBehaviour: cette propriété contient Clip enum (final) comme objet. Il contrôle si le contenu de ListVew sera tronqué ou non.itemExtent: l’itemExtent prend une valeur double en tant qu’objet pour contrôler la zone de défilement dans le ListView .padding:- Il contient EdgeInsetsGeometryI comme objet pour donner de l’espace entre la Listview et ses enfants.
- prend la valeur de la classe EdgetInsets. Cette propriété organise l’ensemble de ListView et lui donne une marge interne.
scrollDirection:- Cette propriété prend Axis enum comme objet pour décider de la direction du défilement sur le ListView .
- Permet aux éléments de défiler horizontalement ou verticalement.
shrinkWrap: cette propriété prend une valeur booléenne comme objet. Ainsi, il décidera si la taille de la zone de défilement sera déterminée par le contenu à l’intérieur de ListView .primary: si cette propriété est définie sur true, seul ce widget ListView peut défiler. Si c’est false, le widget ne pourra pas défiler.-
Les types de ListViews
- Il existe quatre types de Widget ListViews comme indiqué ci-dessous :
-
ListView()
- ListView Widget est le constructeur par défaut d’une classe ListView . Un ListView prend simplement la liste des enfants et la rend déroulante.
- Lors de l’utilisation de
ListView Widget, nous n’avons qu’à passer une List contenant tous les enfants à afficher dans ListView . - Tous les widgets de ces enfants seront créés de manière statique, même si certains d’entre eux ne sont pas actuellement visibles dans la fenêtre.
- L’utilisateur ne doit pas créer un grand nombre de widgets enfants lors de l’utilisation de
ListView Widget. - Voici un exemple d’application qui utilise le widget
ListView: -
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 typeIndexedWidgetBuilderqui va créer les enfants à la demande, au fur et à mesure qu’ils seront visibles, ListView.buildera deux propriétés principales, à savoir itemCount (nombre d’éléments de la liste) et itemBuilder (pour créer des vues à partir d’éléments de liste).- Pour bien comprendre ce concept réaliser l’exemple suivant :
- Dans le code ci-dessus, on a utilisé la classe
ListViewBuilderqui est une classe sans état (StatelessWidget). Il renvoie un nouveau Scaffold composé de appBar et de body. - Dans le body, on a un
ListView.builderavec itemcount 8 et itemBuilder qui créera un nouveau widget encore et encore jusqu’à 8 fois car nous avonsitemCount=8. - Si nous n’utilisons pas
itemCountdansListView.builder, nous obtiendrons des éléments de liste infinis, il est donc recommandé d’utiliseritemCountpour éviter de telles erreurs. - L’
itemBuilderrenvoie ListTile.Ce ListTile se construira encore et encore jusqu’à 8 fois. - Un ListTile typique est divisé en trois sections ; Début, Centre et Fin.
- La section Démarrer contient le widget principal ; la section Centre comprend le titre et le sous-titre, et la section Fin contient le widget de fin.
- Exemple d’application
- Code
- Résultat
-
ListView.separated()
- La
ListView.separatedintègre un paramètre obligatoire supplémentaire, le separatorBuilder, qui attend une instance de IndexedWidgetBuilder. Son implémentation sera réalisée comme dans l’itemBuilder, c’est-à-dire en incorporant un BuildContext et un index. - Le constructeur
ListView.separated()est utilisé pour générer une liste de widgets, mais en plus, un widget séparateur peut également être généré pour séparer les widgets. - En bref, ce sont deux listes de widgets entrelacées : la liste principale et la liste de séparation. Contrairement au constructeur builder(), le paramètre itemCount est obligatoire ici.
-
ListView.custom()
-
Exemples d’utilisation d’un
ListViewdans Flutter -
Exemple 01
- 1- Commencez par le code typique :
- 2-Ajouter le
ListView: - ListView le plus simple possible
- On l’habille un peu
- Et il ne doit pas s’agir uniquement de ListTiles :
-
Exemple 02
-
Applications
-
App01
- Vous allez, dans ce TP, construire une application Flutter
- L’application présente tout d’abord une fenêtre avec trois items dans une liste.
- Utiliser l’image suivant pour créer une application Flutter similaire à cette dernière
import 'package:flutter/material.dart';
void main() => runApp(const MyWidget());
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
Widget item(String title, subtitle) {
return Card(
color: Colors.orange[200],
child: ListTile(
leading: Text(
"${DateTime.now().day}/${DateTime.now().month}/${DateTime.now().year}"),
subtitle: Text(subtitle),
title: Text(title),
trailing: const Icon(Icons.check),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Exemple de ListView"),
),
body: ListView(
children: [
item("Cours PHP en ligne", "En PDF"),
item("Cours HTML5 en ligne", "Exercice"),
item("Cours CSS3 en ligne", "En ligne"),
item("Cours FLUTTER en ligne", "Ici"),
],
)),
);
}
}
body: ListView(
children: [
Text('HTML5'),
Text('CSS3'),
Text('PHP8'),
Text('FLUTTER'),
],
),body: ListView(
children: [
ListTile(
title: Text('HTML5'),
), // ListTile
ListTile(
title: Text('CSS3'),
), // ListTile
ListTile(
title: Text('PHP8'),
), // ListTile
ListTile(
title: Text('FLUTTER'),
), // ListTile
],
),
ElevatedButton(
child: Text('Press Me'),
onPressed: () {},
),
