ListView -créer des listes déroulantes

ListView dans Flutter est une liste déroulante de widgets disposés linéairement. La création d’un widget de liste déroulante dans Flutter est assez simple à l’aide du widget ListView.

En fait, vous pouvez faire défiler la liste déroulante horizontalement ou verticalement en utilisant la propriété scrollDirection.

La caractéristique la plus importante de listview est que c’est un widget déroulant utilisant l’espace disponible sur l’écran. Parfois, nous avons besoin d’utiliser d’autres composants afin d’utiliser moins d’espace.

En fait, une liste peut contenir des champs de texte, des icônes, des images, des cases à cocher etc.

Les types de widgets ListView sont divisés en fonction de leur utilisation. Il y a quatre façons qui sont généralement utilisées pour le faire, qui sont les suivantes :

ListView
ListView.builder
ListView.separated
ListView.custom

ListView

C’est la forme par défaut de la classe ListView qui permet aux widgets enfants de défiler. L’utilisation par défaut est uniquement pour les widgets statiques.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text("Le widget ListView"),
            ),
            body: ListView(
              padding: const EdgeInsets.all(8),
              children: <Widget>[
                Container(
                  height: 50,
                  color: Colors.amber[600],
                  child: const Center(child: Text('Element A')),
                ),
                Container(
                  height: 50,
                  color: Colors.amber[500],
                  child: const Center(child: Text('Element B')),
                ),
                Container(
                  height: 50,
                  color: Colors.amber[100],
                  child: const Center(child: Text('Element C')),
                ),
              ],
            )));
  }
}

À présent, prenons un exemple dans lequel nous aurons à afficher un titre et un long texte. Si le texte dépasse la taille de l’écran, il deviendra automatiquement déroulant.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text("Le widget ListView"),
            ),
            body: ListView(children: <Widget>[
              Container(
                padding: EdgeInsets.all(15),
                child: Text('Collez le titre ici..', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
              ),
              Container(
                padding: EdgeInsets.all(15),
                child: Text('''Collez un long texte ici...''', style: TextStyle(fontSize: 16)),
              ),
            ])));
  }
}

Maintenant, remplacez ListVew par Column dans le code et voyez ce qui se passera.

Les propriétés du widget 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.

padding : prend la valeur de la classe EdgetInsets. Cette propriété organise l’ensemble de ListView et lui donne une marge interne.

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.

ScrollDirection : permet aux éléments de défiler horizontalement ou verticalement.

ListView.builder

Pour les listes dynamiques (le nombre d’éléments de liste découle du nombre de données), utilisez ListView.builder.

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

Voici un exemple qui affiche les mois de janvier à décembre.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MaListView(),
    );
  }
}

class MaListView extends StatelessWidget {
  final List mois = [
    "Janvier",
    "Février",
    "Mars",
    "Avril",
    "Mei",
    "Juin",
    "Juillet",
    "Aout",
    "Septembre",
    "Octobre",
    "Novembre",
    "Décembre"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder"),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(mois[index], style: TextStyle(fontSize: 30)),
            ),
          );
        },
        itemCount: mois.length,
      ),
    );
  }
}

De plus, l’utilisation de ListView est généralement combinée avec le widgetListTile. Ce widget est généralement utilisé pour créer des listes de contacts ou des mises en page qui nécessitent des images et des sous-titres. La structure de ListTile est quelque chose comme ceci :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MaListView(),
    );
  }
}

class MaListView extends StatelessWidget {
  final List mois = [
    "Janvier",
    "Février",
    "Mars",
    "Avril",
    "Mai",
    "Juin",
    "Juillet",
    "Août",
    "Septembre",
    "Octobre",
    "Novembre",
    "Décembre"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder"),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
                title: Text(mois[index], style: TextStyle(fontSize: 30)),
                subtitle: Text('Sous-titre ' + mois[index]),
                leading: CircleAvatar(
                  child: Text(
                      mois[index][0], // prendre le premier caractère du texte
                      style: TextStyle(fontSize: 20)),
                )),
          );
        },
        itemCount: mois.length,
      ),
    );
  }
}

ListView.separated

Similaire à ListView.builder mais avec une légère différence, nous pouvons insérer des widgets entre les éléments de la liste.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MaListView(),
    );
  }
}

class MaListView extends StatelessWidget {
  final List mois = [
    "Janvier",
    "Février",
    "Mars",
    "Avril",
    "Mai",
    "Juin",
    "Juillet",
    "Août",
    "Septembre",
    "Octobre",
    "Novembre",
    "Décembre"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder"),
      ),
      body: ListView.separated(
        itemBuilder: (context, index) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(mois[index], style: TextStyle(fontSize: 30)),
            ),
          );
        },
        separatorBuilder: (context, position) {
          return Container(
            color: Colors.greenAccent,
            child: Text('Un exemple de séparateur',
                style: TextStyle(fontSize: 20)),
          );
        },
        itemCount: mois.length,
      ),
    );
  }
}

Le choix du bon widget est très importante dans le processus de développement d’une application.

ListView -créer des listes déroulantes

ListView

Les propriétés du widget ListView

ListView.builder

ListView.separated

Laisser un commentaire Annuler la réponse