Le widget ListView dans Flutter

Objectifs

Apprendre à utiliser efficacement le widget ListView dans Flutter pour afficher des listes de données de manière fluide et optimisée.

Présentation

Le widget ListView est utilisé pour afficher une liste d’éléments dans une vue défilante.
La ListView est 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.
Voici quelques points clés à retenir :

Affichage de Contenu Défilant :
- ListView est idéal pour afficher des listes d’éléments, qu’il s’agisse de messages, d’articles, de contacts, etc.
- Lorsque la liste d’éléments dépasse l’espace disponible à l’écran, ListView permet le défilement fluide pour afficher tous les éléments.
Types de ListView :
Il existe plusieurs types de ListView en fonction de vos besoins :

ListView.builder : Utilisé pour générer dynamiquement des éléments à partir d’une source de données (par exemple, une liste d’articles).
ListView.separated : Similaire à ListView.builder, mais avec des séparateurs personnalisés entre les éléments.
ListView.custom : Pour une personnalisation avancée de la façon dont les éléments sont affichés.

Personnalisation :
- Vous pouvez personnaliser l’apparence des éléments dans ListView en utilisant des widgets tels que ListTile, Card, Container, etc.
- N’oubliez pas d’ajouter des interactions (comme des gestes de balayage ou des clics) pour rendre l’expérience utilisateur plus riche.
Performance :
- ListView.builder est recommandé pour les performances optimales, car il ne crée que les éléments visibles à l’écran.

Créer une ListView dans Flutter

Pour créer une ListView dans Flutter, vous pouvez utiliser les éléments et propriétés suivants :

children :
- 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.
- Cet attribut est le plus couramment utilisé pour définir les éléments de la liste. Vous pouvez lui fournir une liste de widgets à afficher dans la ListView.
- Exemple:

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()

Le Widget ListViewest 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 type IndexedWidgetBuilder qui va créer les enfants à la demande, au fur et à mesure qu’ils seront visibles,
ListView.builder a 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 ListViewBuilder qui est une classe sans état (StatelessWidget). Il renvoie un nouveau Scaffold composé de appBar et de body.
Dans le body, on a un ListView.builder avec itemcount 8 et itemBuilder qui créera un nouveau widget encore et encore jusqu’à 8 fois car nous avons itemCount=8 .
Si nous n’utilisons pas itemCount dans ListView.builder , nous obtiendrons des éléments de liste infinis, il est donc recommandé d’utiliser itemCount pour éviter de telles erreurs.
L’itemBuilder renvoie ListTile.Ce ListTile se construira encore et encore jusqu’à 8 fois.
Exemple d’application

Code

Résultat

ListView.separated()

La ListView.separated intè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 ListView dans Flutter

Exemple 01

1- Commencez par le code typique :

2-Ajouter le ListView:

ListView le plus simple possible

body: ListView(
          children: [
           Text('HTML5'),
           Text('CSS3'),
           Text('PHP8'),
           Text('FLUTTER'),
          ],
        ),

On l’habille un peu

body: ListView(
          children: [
           ListTile(
              title: Text('HTML5'),
            ), // ListTile
            ListTile(
              title: Text('CSS3'),
            ), // ListTile
            ListTile(
              title: Text('PHP8'),
            ), // ListTile
            ListTile(
              title: Text('FLUTTER'),
            ), // ListTile
          ],
        ),

Et il ne doit pas s’agir uniquement de ListTiles :

ElevatedButton(
              child: Text('Press Me'),
              onPressed: () {},
            ),

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

App02

Créez une application qui affiche une liste de tâches. Chaque tâche doit avoir un titre et une description.

1- Commencez par créer un modèle de données pour représenter une tâche. Il devrait contenir des champs pour le titre et la description.
2- Créez une liste de quelques tâches fictives.
3- Créez une nouvelle page pour afficher la liste des tâches.
4- Utilisez une ListView.builder pour afficher la liste des tâches.
5- Pour chaque tâche dans la liste, affichez le titre et la description dans une Card.
6- Ajoutez un bouton « Ajouter » en bas de la page pour permettre à l’utilisateur d’ajouter une nouvelle tâche.
7- Lorsque l’utilisateur appuie sur le bouton « Ajouter », ouvrez une nouvelle page avec un formulaire permettant de saisir le titre et la description de la nouvelle tâche.
8- Lorsque l’utilisateur soumet le formulaire, ajoutez la nouvelle tâche à la liste et revenez à la page principale pour afficher la liste mise à jour.
9- Ajoutez également la possibilité de supprimer une tâche de la liste en faisant glisser la Card correspondante vers la gauche ou la droite.
10- Ajoutez enfin la possibilité de modifier une tâche existante en appuyant dessus pour l’éditer.

Solution

Tout d’abord, créez une nouvelle classe Dart pour votre modèle de tâche. Vous pouvez le faire dans un fichier séparé, ou dans le même fichier que votre code d’interface utilisateur.
Dans la classe, définissez deux champs pour le titre et la description de la tâche. Vous pouvez utiliser le type String pour les deux champs.

class Task {
  String title;
  String description;

  Task({this.title, this.description});
}

Dans cet exemple, la classe Task contient deux champs, title et description, qui sont tous les deux des chaînes de caractères (String). La classe a également un constructeur qui prend deux paramètres optionnels : title et description.
Bien sûr, vous pouvez ajouter d’autres champs à votre classe Task si nécessaire, en fonction de ce que vous voulez stocker pour chaque tâche.

List tasks = [
  Task(title: 'Faire les courses', description: 'Acheter du lait, du pain, des oeufs'),
  Task(title: 'Aller à la salle de sport', description: 'Faire une séance de musculation'),
  Task(title: 'Réviser pour l\'examen', description: 'Relire les chapitres 1 à 3'),
  Task(title: 'Rendre le rapport', description: 'Finaliser le rapport et l\'envoyer par e-mail')
];

Flutter

Le widget ListView dans Flutter

Le widget ListView dans Flutter

Objectifs

Présentation

Créer une ListView dans Flutter

Les types de ListViews

ListView()

ListView.builder()

ListView.separated()

ListView.custom()

Exemples d’utilisation d’un `ListView` dans Flutter

Exemple 01

Exemple 02

Applications

App01

App02

Cours Flutter

Le Widget ListTile dans Flutter

Utiliser GridView dans Flutter

Flutter

Le widget ListView dans Flutter

Objectifs

Présentation

Créer une ListView dans Flutter

Les types de ListViews

ListView()

ListView.builder()

ListView.separated()

ListView.custom()

Exemples d’utilisation d’un ListView dans Flutter

Exemple 01

Exemple 02

Applications

App01

App02

Cours Flutter

Le Widget ListTile dans Flutter

Utiliser GridView dans Flutter

You may also like

Implémentation du Mode Clair et Sombre dans une Application Flutter

Le widget Theme et la classe ThemeData en Flutter

La classe ThemeData dans Flutter

Exemples d’utilisation d’un `ListView` dans Flutter