Les bases de Flutter : Introduction aux variables

À quoi servent les variables dans Flutter ?

Lorsqu’on code avec Flutter, une première notion à comprendre est celle des variables. Les variables sont une valeur qu’on va stocker sous un nom unique, pour pouvoir plus facilement la réutiliser à différents endroits par la suite. Ces valeurs peuvent prendre différentes formes, comme des mots, des chiffres, des listes, etc.

Par exemple, admettons que je souhaite appliquer une couleur spécifique à plusieurs endroits dans mon application. Plutôt que de devoir retenir à chaque fois la valeur RGB de celle-ci, je vais la stocker une fois dans une variable que je vais appeler ma_couleur_favorite et que je pourrai réutiliser à chaque fois que j’en aurai besoin.

Voici donc à quoi servent les variables : Garder en mémoire des éléments, afin de pouvoir les réutiliser à notre guise.

Créer une variable avec Flutter

La première chose à faire avant d’utiliser une variable est de la définir. On va donc devoir lui donner les attributs suivants :

Un état : final, late ou const (pas toujours obligatoire), qui va définir ;
Un type : String, int, bool, List, etc ;
Un nom : Idéalement en snake case comme on l’appelle, c’est-à-dire avec des _ qui viennent remplacer les espaces et tout en minuscule.
Une valeur : Qui correspond au type de variable (Pas toujours obligatoire non plus). Par exemple, une variable String ne pourra contenir que des mots ou des phrases. Vous ne pourrez pas lui faire contenir un chiffre.

Voici quelques variables d’exemple pour comprendre le principe :

const String my_car = "Peugeot 206";
final int mon_age = 25; 
List<String> list_animaux = ["loup", "renard", "belette"] ;
late <bool> ma_future_valeur;

Dans le dernier cas, j’ai bien créé une variable ma_future_valeur, mais je ne lui ai pas encore donné de valeur. Je pourrai toujours le faire plus tard.

État d’une variable

Cette notion n’est pas simple à comprendre quand on débute, et j’ai encore moi-même du mal avec. Lorsque vous créez une fonction, il est possible de lui donner un “état” qui va définir son comportement.

Final

Mettre Final devant votre variable, veut dire que celle-ci ne pourra plus être modifiée par la suite. Vous pouvez donc l’utiliser pour représenter une valeur qui ne devra plus changer après avoir été définie.

Const

Les variables Const, comme les variables Final, ne peuvent pas être changées une fois qu’elles ont été assignées. La différence entre les deux types réside donc dans le moment où une valeur doit être assigné à la variable. Dans le cas de Final, je peux tout à fait laisser une valeur vide et l’assigner plus tard, durant l’utilisation de mon application. En revanche, une variable Const doit posséder une valeur dès le moment où mon application se lance. Pour donner un exemple, admettons que j’ai une variable ma_couleur_prefere. Si je la mets sous forme de Const, celle-ci doit avoir une valeur dès le moment où mon application se lance. En revanche, si c’est une variable Final, je peux tout à fait demander à l’utilisateur de me renseigner sa couleur préférée, qui sera ensuite conservée dans ma variable.

Late

La particularité d’une variable late est qu’elle ne va être initialisée qu’à partir du moment où elle va être utilisée. Cela peut donc s’avérer pratique dans certains cas, lorsqu’on sait que l’on va utiliser une variable pendant l’utilisation de l’application, mais que l’on a pas encore de valeur à lui donner.

Les variables late ont été largement remplacées avec l’introduction du “null safety”. En mettant simplement un ? derrière le type de sa fonction, on indique que celle-ci peut avoir une valeur null, ce qui évite de faire planter l’application au moment de l’initialisation.

Si vous vous sentez déjà un peu perdu, ne vous inquiétez pas, tout deviendra plus clair avec un peu de pratique.

Les types de variable

Avant de pouvoir utiliser une variable, vous allez devoir lui attribuer un type. Cette étape est très importante, car le type de votre variable va définir ce que celle-ci peut contenir ou pas. Par exemple, vous ne pourrez pas stocker un chiffre dans une variable qui a été prévu pour stocker du texte.

Il existe tout un tas de variables dans Flutter, permettant de stocker diverses valeurs, mais voici celles que vous serez amené à utiliser le plus souvent.

String

Les variables de type String, vont vous permettre de manipuler des chaînes de caractères, c’est-à-dire aussi bien des lettres, que des mots ou des phrases. On peut ensuite utiliser ces chaînes dans des fonctions, ou pour afficher des messages dans la console.

Par exemple :

String mon_message = "Je débute sur Flutter";
print(mon_message);

↪ Je débute sur Flutter

Il est important de mettre une variable String, entre guillemets. Vous pouvez utiliser les guillemets simples, ‘ ’, ou doubles, “ ”, mais Flutter recommande plutôt d’utiliser les secondes.

Une seconde chose qui va être possible avec les variables de type String, est la concaténation. C’est-à-dire, coller deux chaînes de caractères l’une à l’autre, en mettant un signe $ devant notre variable. Par exemple :

String jour = "Mercredi";
print("Aujourd’hui, nous sommes $jour.");

↪ Aujourd’hui, nous sommes Mercredi.

Stocker des mots ou des phrases dans une variable peut être très pratique. Par exemple, cela peut vous servir à personnaliser un message de bienvenu, en y mettant le nom de l’utilisateur que vous aurez récupéré.

Int et double

Les chiffres, quant à eux, sont stockés dans des variables de type int ou bien double. La différence entre l’un et l’autre réside dans le fait que les variables double peuvent contenir des valeurs décimal et pas les int. Par exemple :

int chiffre_rond = 3;
double valeur_decimal = 3.14;

Contrairement aux variables String, les valeurs des int et des double n’ont pas besoin d’être mises entre des guillemets.

Ces valeurs peuvent ensuite être utilisées pour définir des tailles, des rayons, des marges, etc ou bien faire des calculs comme des additions, soustractions, etc. Enfin, il est intéressant de savoir que les int et les doubles peuvent être incrémentés et décrémentés de manière très simple, c’est-à-dire ajouter ou retirer 1. Par exemple :

int mon_nombre = 20;
mon_nombre ++;
print(mon_nombre); 

↪ 21

mon_nombre --;
print(mon_nombre); 

↪ 20

Bool

Les variables bool, pour booléen, ne peuvent quant à elle contenir que des valeurs true ou false (vrai ou faux). On va pouvoir beaucoup les utiliser dans deux types de situations.

Pour créer des fonctions avec des conditions :

var booleen = true
if(booleen == true){ 
	print("Ma valeur est vrai"); 
else(){
	print("Ma valeur est faux"); 
}

↪ Ma valeur est vrai

Ou pour définir quelque chose qui ne peut avoir que deux états. Par exemple, une checkbox, ne peut avoir que deux états, cochée, ou pas cochée. On va donc associer true à une case cochée et false à une case décochée.

List et Map

Enfin, vous serez probablement amené à utiliser des List ainsi que ce qu’on appelle des Maps. Les List comme leur nom l’indique, sont simplement une collection de plusieurs items, qui peuvent parfois être du même type et parfois pas.

List<String> -> Ma liste ne peut contenir que des chaînes de caractères et rien d’autre ;
List<dynamic> -> Ma chaîne peut contenir n’importe quoi, y compris d’autres listes.

Les variables listes doivent être présentées sous formes de crochets, comme cela :

List<String> ma_list = ["Pierre", "Paul", "Jacques"];

Les Maps quant à elles, sont des listes de paires, clé : valeur, et s’ouvrent avec des accolades. Voici par exemple une Map, qui pourrait servir à représenter une personne :

Map<dynamic, dynamic> identite = {
	"Nom": "Alan Smithee", 
	"Age": 48, 
	"Lieu": "Paris",
	"Animaux" {
			"Chat": 2,
			"Chien": 1,
			"Poisson": 5
			}
}

Je ne vais pas vous présenter ici, comment naviguer dans des Lists et des Maps, ajouter, supprimer ou modifier des éléments. Pour en savoir, rendez vous sur mon article dédié à la Class List et celui dédié à la Class Map.

Conclusion

Comprendre à quoi servent les variables et comment les déclarer est la première étape pour coder en Dart. Toutefois, les créer ne va probablement pas suffire pour faire une application digne de ce nom. C’est pourquoi je vais vous expliquer comment les manipuler, grâce à différents opérateurs, dans l’article suivant :

Les bases de Flutter : Introduction aux opérateurs →

Si vous souhaitez en apprendre plus sur les différentes variables présentées dans cet article, je vous invite également à consulter ces guides détaillés :