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 :

  1. 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:

     

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

       

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

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

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

   

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

class Task {
  String title;
  String description;

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

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')
];