Les booléens : Introduction aux variables dans Flutter


Avatar de Pierre Courtois

La classe bool va vous être particulièrement utile pour gérer des situations avec plusieurs résultats possibles. Par exemple, elle est à la base des conditions if et else, ainsi que des boucles. Dans cet article, je vous explique comment fonctionnent les booléens et ce que vous pouvez faire avec.


Qu’est-ce que la classe bool ?

La classe bool vient du terme booléen, qui signifie quelque chose qui ne peut prendre que deux valeurs distinctes. En l’occurrence, ces deux valeurs sont ici true (vrai) et false (faux). Ces variables vont donc nous permettre de gérer des situations ayant uniquement deux résultats possibles. 

Par exemple, admettons que j’ai une condition du type Age doit être égal ou supérieur à 18. Ma variable analysée ne pourra renvoyer que deux résultats : 

  • true -> Age est bien égal ou supérieur à 18 ; 
  • false -> Age est inférieur à 18.

Créer une variable de type bool

La class bool ne présente pas de syntaxe particulière. Les variables de ce type sont très faciles à créer et vous ne pouvez leur donner qu’une valeur de true ou false (sans guillemets). Par exemple : 

bool variableVrai = true ; 
bool variablefalse = false ; 

Si vous ne connaissez pas à l’avance la valeur de votre variable bool, vous pouvez aussi l’annoncer de cette manière et lui donner une valeur plus tard : 

bool? variableNonDefinie ; 

Le point d’interrogation indique que votre variable peut avoir une valeur nulle. 

Comment faire si je veux que ma variable ne soit PAS true ou false ?

Une autre manière de dire qu’une variable est fausse est de dire qu’elle n’est pas vraie. La syntaxe pour indiquer cet évènement est donc d’ajouter un point d’exclamation derrière votre true, ou false, qui indique que l’on veut son opposé. Par exemple : 

String event = false ; 

if(event == true){
	print(“L’évènement est vrai”) ; 
}
if(event == true!){
	print('L’évènement est faux'); 
}

L’évènement est faux

Ici, j’indique dans la deuxième condition que je veux afficher le message “L’évènement est faux” si event a la valeur opposée de true. L’opposé étant false, c’est bien ce message qui s’affiche dans ma console de débogage.

Où vais-je retrouver ma classe bool ?

Comme expliqué dans la partie précédente, les booléens vont nous aider à : 

  • Gérer des interactions (Faire ça si ma variable vaut ça) ; 
  • Créer des boucles (Répéter cette action tant que cette affirmation est vraie) ; 
  • Valider une donnée (Réaliser une action différente selon ce qui est retourné) ; 
  • Afficher un rendu différent (Afficher ça, si ma variable vaut ça).

Gérer des évènements 

La première utilité de la class bool est de pouvoir gérer un panel d’évènement et de renvoyer un résultat propre à chacun d’entre eux : 

bool pressed = false;

Checkbox(
value : pressed
 onPressed: () {
    setState(() {
      pressed = !pressed;
    });
  },
  child: Text("Cochez moi"),
),

Ici ma Checkbox ne peut avoir que deux états : être cochée ou pas. J’indique donc que sa valeur est celle de ma variable pressed qui est de type bool et qu’elle changera quand j’appuierai sur le bouton. Elle passera donc à false si sa valeur actuelle est true et inversement. 

Créer des boucles 

Le fonctionnement des boucles repose lui aussi sur les booléens. Je veux répéter une action donnée, tant qu’une situation est vérifiée et arrêter dès que ce n’est plus le cas. Par exemple : 

i = 0; 

while(i > 5){
	print(“Le compte est de $i)
	i++
}

Ici, le compte va être affiché dans la console jusqu’à ce que ma variable i prenne une valeur de 5. À chaque itération, ma boucle va vérifier si i est égal à 5. Si la réponse est false, je réalise l’action, si c’est true, je quitte la boucle. 

Valider une donnée

Parfois, il est souhaitable de réaliser une action différente selon la donnée qui est entrée par l’utilisateur ou des données qui vous sont retournées. Par exemple : 

String mdp = “123456”; 

If(mdp == “123456”){
	connecterUtilisateur(),
} 
else {
print(“Le mot de passe est eronné”),
}

Ici mon mot de passe a une valeur de “123456”. Mon if() va donc renvoyer une valeur de true et lancer la fonction qui va me permettre de connecter l’utilisateur à son profil. 

Afficher un rendu différent

Ce cas de figure est sûrement le plus “compliqué” à gérer quand on débute avec la class bool, mais s’avère pourtant être très pratique. Par exemple, admettons que je souhaite récupérer des données dans ma base de données firestore et les afficher à l’écran. Il existe au moins trois cas de figures : 

  1. Les données sont en cours de récupération ; 
  2. Les données n’ont pas pu être récupérées ; 
  3. Les données ont pu être récupérées. 

Je vais donc vouloir afficher quelque chose de différent à l’écran, selon l’état de récupération de mes données : 

if (snapshot.hasError) {
   return Container(
     child: const Center(
           child: Text("Les informations n'ont pas pu charger")));
   }
if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
   }
return Container(
	height: 30, 
	width : double.infinity,
	child: Text(“Les informations ont été récupérées”),//Comportement par défaut si aucune des deux conditions n'est remplie.

Un message différent va s’afficher selon si mes données ont pu être récupérées ou pas. Tant que le statut est en ‘waiting”, c’est un icon de chargement qui est affiché à la place du message. 

Gérer des opérations dans Flutter avec la class bool

Il existe plusieurs opérateurs qui vont nous permettre de travailler avec la class bool dans Flutter et créer des conditions plus ou moins complexes : 

  1. == : x est égal à y ;
  2. =! : x n’est pas égal à y ; 
  3. && : x ET y ;
  4. || : x OU y. 

En utilisant ces quatres signes, vous pourrez créer toutes les conditions que vous souhaitez. Par exemple : 

String couleur = 'Orange'; 

If(couleur == 'Orange'){
	print('1. Vrai')
}
if(couleur =! 'Rouge'){
	print('2. Vrai')
}

if(couleur == 'Rouge' || couleur == 'Orange'){
	print('3. Vrai')
}
if(couleur =! 'Rouge' || couleur == 'Orange'){
	print('4. Vrai')
}

Ici, toutes les conditions renvoient true, les 4 messages vont donc s’afficher dans la console.

&&

Le signe && vous permet de cumuler plusieurs conditions. Par exemple : 

String couleur = "Orange"; 
int age = 19 ; 

if(couleur == "Orange" && age > 18){
	print("Vrai"),
} else {
	print("Faux"),
}

Vrai

Voici un tableau permettant de comprendre comment fonctionnent les conditions cumulatives dans Flutter.

Gérer les conditions de type && (ET) dans Flutter
x y x && y
true true true
true false false
false true false
false false false

||

Le signe || vous permet de renvoyer true si au moins une des conditions est vraie. Par exemple : 

String couleur = "Orange"; 
int age = 11 ; 

if(couleur == "Orange" || age > 18){
	print("Vrai"),
} else {
	print("Faux"),
}

Vrai

Voici un tableau permettant de comprendre comment fonctionnent les conditions optionnelles dans Flutter. 

Gérer les conditions de type || (OU) dans Flutter
x y x || y
true true true
true false true
false true true
false false false

Mélanger des && et des ||

Une fois que vous maitriserez les différents opérateurs, vous allez pouvoir les cumuler pour créer des conditions plus complexes. Pour vous entrainer, vous pouvez par exemple vous entrainer à résoudre ce système de condition : 

String animal = "Chat";
String couleur = "Orange"; 
String nom = "Garfield";
int age = 11 ; 

if((animal = "Chien" || animal = "Chat") && age < 8){
print("Réponse 1"),
} 
if((animal =! "Chien" || nom == "Garfield") &&(age == 11 || couleur == "Orange"){
print("Réponse 2"),
} 
if(animal == "chat" && nom == "Garfield"){
print("Réponse 3"),
} 
if((couleur == "Rouge" || age =! 11) && nom == "Garfield"){
	print("Réponse 3"),
}
Avatar de Pierre Courtois