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 :
ListViewListView.builderListView.separatedListView.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.