Back

Le widget ListView dans Flutter

Le widget ListView dans Flutter

Le widget ListView dans Flutter

  1. Présentation

    • 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.



  2. 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.



  3. 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 :
      • Le widget ListView dans Flutter

    • 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.
      • 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
        • 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"),
                      ],
                    )),
              );
            }
          }
        • Résultat
        • Le widget ListView dans Flutter




    • 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()
  4. Exemples d’utilisation d’un ListView dans Flutter

    • Exemple 01
      • 1- Commencez par le code typique :
        • Le widget ListView dans Flutter

      • 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
        • Le widget ListView dans Flutter




  5. 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






Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement