Les listes : Introduction aux variables dans Flutter

Créer une liste dans Flutter

Comme leur nom l’indique, les variables de type List, vons vous permettre de créer des listes, aussi appelées arrays en anglais. Celles-ci seront symbolisées par des crochets entre lesquels on va séparer nos éléments par des virgules. Aussi, notre liste aura un type, qui va définir le type de valeurs qu’elle va pouvoir contenir : String, Int, Bool, etc. Par exemple :

List<String> names = [“Pierre”, “Paul”, “Jacques”]; 
List<Int> age = [12, 37, 23, 17, 73];

Il est toutefois possible de créer des listes dites dynamic, c’est-à-dire, qui peuvent conserver plusieurs types de données. Par exemple :

List<dynamic> items = [“Paris”, 9, true, Texteditingcontroler(), MyNewWidget()];

Vous pouvez ainsi conserver n’importe quoi dans un Class List, tant que vous désignez bien les valeurs que celui-ci va contenir.

List.generate()

Parfois, il peut être trop long de créer votre liste à la main. C’est à ce moment que la méthode List<>.generate devient utilise. En effet, celle-ci va vous permettre de générer très rapidement des listes de 1000 items, voire plus. Voici un exemple :

var myList = List<int>.generate(4, (int index) => index + 1, growable: true);
print(myList);
↪ 1, 2, 3, 4

Décortiquons tout cela. Ici, j’annonce une variable de type List<int> (ma liste va donc contenir des chiffres. Puis j’utilise la méthode .generate pour créer une liste contenant 4 éléments. Chaque élément sera le résultat du calcul de mon index + 1. La méthode commence son compte à 0, donc mon premier élément sera 1 + 0 = 1, puis 1 + 1 = 2, etc. Enfin, growable a une valeur de true, ce qui veut dire que je pourrai augmenter la taille de mon Class List par la suite en ajoutant des éléments. Ce comportant ne sera pas possible si growable a une valeur de false.

L’exemple donné ici est très simple, mais vous pouvez tout à fait utilise des méthodes plus complexes pour votre liste. Par exemple, demander à ce qu’à chaque itération, une nouvelle couleur soit créé par une méthode et ajoutée à votre liste.

La chose principale à retenir est que vous devez indique au début la longueur de votre liste et que votre index augmente de 1 à chaque itération jusqu’à attendre la limite que vous avez fixée.

Comment faire si je veux qu’un élément ne soit ajouté qu’une fois sur deux à ma liste ?

Malheureusement, la méthode .generate ne vous permet pas de réaliser des actions différentes selon l’index. Toutefois, vous pouvez tout à faire utiliser une boucle while() ou if(), et changer l’incrémentation ou réaliser des actions différentes selon l’index.

Récupérer une liste de Firebase

Un des intérêts de Firebase est de pouvoir stocker vos listes dans un document. Par exemple, admettons que vous ayez créé une application de musique et que les titres aimés par vos utilisateurs soient stockés sous formes de liste. Vous pouvez récupérer cette valeur sur le document qui vous intéresse, la stocker dans une variable en front-end et l’utiliser.

Pour récupérer une liste dans un de vos documents, deux options s’ouvrent à vous :

Ouvrir une instance firestore, utiliser la méthode .get() et stocker votre variable List en haut de votre widget ;
Utiliser un Streambuilder, et créer votre Variable List à l’intérieur de celui (pas toujours souhaitable si vous n’avez pas besoin de faire apparaître votre liste à l’écran).

Voici un exemple de comment récupérer une liste dans Firestore, avec la première manière :

myList = await FirebaseFirestore.instance .collection('Ma collection') .doc(id_du_doc) .get() .then((value) { return value.data()['Ma liste']; });

Ici ma fonction est dite asynchrone (il y a marqué await devant). Cela veut dire que mon code va se mettre en pause, le temps que myList obtienne un résultat. Le corps de ma fonction doit donc être marqué comme étant asynchrone, en plaçant async devant.

Manipuler les items de votre variable List

Une fois votre liste créée, vous allez bien-sûr pouvoir récupérer les items qui s’y trouvent, mais aussi en ajouter ou supprimer, ou les modifier.

Les index

Une notion très importante quand on parle de liste est celui d’index. Un index est une valeur numérique qui représente la place d’un élément dans une liste et va vous permettre de retrouver celui-ci. Admettons que j’ai une liste de prénom [“Pierre”, “Paul”, Jacques”] et que je souhaite récupérer le premier prénom de ma liste. Je vais pouvoir retrouver celui-ci avec mon index.

La particularité de ce système est que les index ne commencent pas par 1, mais par 0. Je ne vais donc pas retrouver le premier élément d’une liste avec l’index 1, mais avec 0. Il est donc toujours important de garder cette notion en tête, surtout si vous utilisez la longueur de la liste pour trouver un élément en particulier. Par exemple, le dernier élément de ma liste ne sera pas à l’index n, mais à l’index n-1.

Trouver l’index d’un élément

Pour trouver l’index d’un élément qui se trouve dans votre liste, Flutter met à disposition la méthode .indexOf(). Voici un exemple :

List letters = [A, B, C, D]; 
print(letters.indexOf(‘B’);
↪ 1

Si la méthode renvoie une valeur de -1, c’est que l’élément que vous cherchez n’existe pas dans la liste.

Si un élément apparait plusieurs fois dans la liste et que vous souhaitez trouver son dernier index, vous pouvez utiliser la méthode .lastIndexOf() :

List letters = [A, B, C, D, B]; 
print(letters.indexOf(‘B’);
↪ 4

Ajouter un élément

Pour ajouter un élément à votre liste, il vous suffit d’utiliser la méthode .add(). Par exemple :

List chiffres = [0, 1, 2]; 
chiffres.add(3); 
print(chiffres) 
↪ 0, 1, 2, 3

Pour ajouter plusieurs éléments en une seule fois, vous pouvez utiliser la méthode .addAll() :

List chiffres = [0, 1, 2]; 
chiffres.add({3, 4, 5}); 
print(chiffres) 
↪ 0, 1, 2, 3, 4, 5

Les éléments sont ajoutés à la fin de votre liste. Si vous souhaitez donner un index précis à un élément, vous faites là une action de modification et non pas d’ajout.

Insérer un élément

La méthode .insert() vous permet d’insérer un nouvel élément entre deux éléments, à un index donné :

List<int> chiffres = [0, 2, 3];
int index = 1; 
chiffres.insert(index, 1); 
print(chiffres);
↪ 0, 1, 2, 3

Il existe aussi une méthode .insertAll() qui vous permet d’ajouter plusieurs éléments entre crochets et séparés par une virgule :

List<int> chiffres = [0, 3];
List<int> nouveauxChiffres = [1, 2]; 
chiffres.insert(1, nouveauxChiffres); 
print(chiffres);
↪ 0, 1, 2, 3

Les éléments que vous insérez doivent être du même type que la liste. Par exemple, une liste de type int ne pourra contenir que des chiffres.

Modifier un élément

La manière la plus simple de modifier un élément déjà existant dans une liste est de lui donner une nouvelle valeur. Par exemple :

List<int> chiffres = [0, 1, 1, 3]; 
chiffres[2] = 2; 
print(chiffres); 
↪ 0, 1, 2, 3

Toutefois, il existe aussi une méthode .replaceRange(), permettant de changer plusieurs valeurs qui se suivent dans une liste, en une seule fois. Il suffit d’indiquer l’index de début, celui de fin, puis la liste des nouveaux éléments :

List<int> chiffres = [0, 1, 2, 3]; 
chiffres.replaceRange(2, 3, [4, 5])
print(chiffres); 
↪ 0, 1, 4, 5

Supprimer un élément

Il vous est possible de supprimer un élément d’un Class List, en utilisant la méthode .remove() :

List<String> lettres = [A, B, C, D]; 
chiffres.remove(‘B’); 
print(lettres);
↪ A, C, D

Pour supprimer un élément en utilisant son index plutôt que sa valeur, il faudra utiliser .removeAt() :

List<String> lettres = [A, B, C, D]; 
chiffres.removeAt(2); 
print(lettres);
↪ A, C, D

Vous pouvez supprimer plusieurs éléments qui se suivent en utilisant la méthode .removeRange() :

List<String> lettres = [A, B, C, D]; 
chiffres.removeAt(1,2); 
print(lettres);
↪ A, D

La méthode removeLast(), comme son nom l’indique, vous permet de supprimer la dernière valeur contenue dans votre liste :

List<String> lettres = [A, B, C, D]; 
chiffres.removeLast(); 
print(lettres);
↪ A, B, C

Enfin, removeWhere() vous permet de retirer toutes les valeurs d’une liste qui répondent à un critère. Par exemple :

List<int> numbers = [0 ,1, 2, 3, 4 , 5, 6, 7, 8, 9];
numbers.removeWhere((item) => item%2 == 0);
print(numbers); 
↪ 1, 3, 5, 7, 9

Afficher sa Class List à l’écran

Bien-sûr, vos listes ne sont pas faites que pour être stockées dans des variables et peuvent être affichées à l’écran. Vous devrez pour cela utiliser le widget Listview.

Les Listeviews sont relativement simples à utiliser et fonctionnent un peu comme les colonnes et les lignes. Elles ont un paramètre children: [], qui va contenir vos ListTiles, c’est-à-dire les items de votre liste. Ces ListTiles peuvent être générés via des variables List, ou être créées à la main comme ici :

ListView(
  children: const <Widget>[
    ListTile(
      title: Text('Élément 1'),
    ),
    ListTile(
      title: Text('Élément 2'),
    ),
    ListTile(
      title: Text('Élément 3'),
    ),
  ],
),

Je m’arrête ici sur les Listviews car ce sujet mérite son propre article, mais vous pouvez déjà commencer à créer vos propres listes à la main, pour apprendre à les modifier. Je vous conseille aussi de consulter la documentation de Flutter à ce sujet.

Autres commandes Flutter en lien avec les listes

Voici d’autres commandes utilisables avec les listes, qui pourraient vous être utiles.

contains()

La méthode .contains() vous permet de savoir si une liste contient un élément ou non :

List<int> chiffres = [0, 1, 2, 3]; 
print(chiffres.contains(2));
↪ true

IsEmpty / isNotEmpty

Les propriétés IsEmpty et IsNotEmpty vous permettent de savoir si votre liste contient des éléments ou pas. Elles sont particulièrement utiles dans le cas où vous souhaitez réaliser deux actions différentes selon le résultat :

List<int> chiffres = []; 
if(chiffres.isEmpty){
	print("La liste est vide");
  }
else {
	print(chiffres);
}
↪ La liste est vide

Length

Comme son nom l’indique, la propriété .length renvoie la longueur de votre liste. Par exemple :

List<int> chiffres = [0, 1, 2, 3, 4, 5]; 
print(chiffres.length);
↪ 5

forEach()

La méthode .forEach() (pour chaque), vous permet de réaliser une action pour chaque élément présent dans votre liste :

List<int> chiffres = [0, 1, 2, 3]; 
chiffres.forEach((element){
	element = element + 1;
  }
)
print(chiffres); 
↪ 1, 2, 3, 4

Cette action ne doit pas nécessairement porter sur l’élément en lui-même. Par exemple, vous pouvez ajouter +1 à un compteur pour chaque élément contenu dans une liste. L’idée à retenir est que forEach() fonctionne un peu comme une boucle, qui s’arrête à la longueur de votre liste.

Clear()

La méthode .clear(), comme son nom l’indique, nettoie votre liste, c’est-à-dire supprime toutes les valeurs qui s’y trouvent :

List<int> chiffres = [0, 1, 2, 3]; 
chiffres.clear(); 
print(chiffres); 
↪ " "

List.filled()

Une manière rapide de créer une liste contenant plusieurs fois le même élément est là d’utiliser la méthode List.filled() :

final chiffre1 = List.filled(5, "1"); 
print(chiffre1);
↪ 1, 1, 1, 1, 1

Shuffle()

La méthode .shuffle() permet de mélanger aléatoirement les valeurs contenues dans votre liste :

List<int> chiffres = [0, 1, 2, 3, 4, 5]; 
chiffres.shuffle(); 
print(chiffres);
↪ 2,4,1,3,5

Sublist()

La méthode .sublist(), comme son nom l’indique, permet de créer une sous-liste de votre liste :

List<int> lettres = [A, B, C, D, E, F]; 
newList = lettres.sublist(1,3)
print(newList)
↪ B, C, D

Conclusion

Vous êtes désormais capable de créer des listes d’éléments, simples, dans Flutter. Mais comment faire pour créer des listes qui contiennent des clés associées à des valeurs ? Je vous apprends tout ça dans le prochain article :

Introduction aux variables dans Flutter : Les Maps →