Introduction
Bonjour à tous, j’espère que vous allez bien. Flutter est un framework open-source développé initialement par google. Ce framework est basé sur le langage Dart, un langage assez proche de JavaScript par sa syntaxe et son histoire. Aujourd’hui nous abordons un terme important dans le développement d’application mobile avec Flutter, à savoir les widgets.
Qu’est-ce qu’un widget ?
Un widget est un élément basique qui vous permet de construire vos écrans en Flutter. Les widgets décrivent à quoi vos interfaces utilisateurs ou vues devraient ressembler. On peut imaginer qu’un widget représente un bloc Lego que vous pouvez assembler avec d’autres bloc Lego (Widgets) pour construire une structure.
Certains widgets sont visuels, c’est à dire apparaissent à l’écran, d’autres non. Flutter met à notre disposition une multitude de widgets.
Concrètement, les widgets sont des classes en Dart qui héritent directement ou indirectement de la classe Widget. Comme nous avons vu dans le chapitre La Programmation Orientée Objet en Dart, une classe est un « élément » logiciel qui est composé de constructeurs, d’attributs et de méthodes.
class Chat{
String? nom;
String? couleur;
int? age;
Chat(String? nom, String? couleur, int? age){
this.nom = nom;
this.couleur = couleur;
this.age = age;
}
void mioler(){
print("$nom miaou");
}
void manger(String nourriture){
print("Miam, je mange $nourriture");
}
void marcher(){...}
}Ainsi, vous pouvez le paramétrer selon votre besoin. En se basant sur notre exemple précédent, on peut décider de créer un objet chat en ne précisant que le nom, la couleur ou l’âge :
...
void main(){
Chat c1 = Chat(nom: "Milou");
print(c1.nom); //Sortie Milou
Chat c2 = Chat(couleur: "Gris");
print(c1.nom); //Sortie Gris
Chat c3 = Chat(age: "12");
print(c1.age); //Sortie 12
//Ou
Chat c4 = Chat(nom:"Milou", couleur: "Gris", age:"12");
...
}Il en est ainsi pour les widgets. Voyons un exemple avec le widget text qui nous permet d’afficher du text à l’écran :
Text(
'Hello, Ruth! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.bold),
)Ce code donne le résultat suivant :
Toutefois, les widgets peuvent être classés en deux catégories : Les widgets sans état ou encore StatelessWidget et les widgets avec état ou StatefulWidget. Voyons ensemble en détail, de quoi il s’agit.
Les widgets sans état
Les stafelessWidget sont des widgets qui n’ont aucun état. C’est à dire qu’une fois qu’ils ont déjà été construits, il ne peuvent plus changer d' »aspect » ou d’état pendant l’exécution du programme. C’est le cas du widget Text.
class Text extends StatelessWidget {
...
const Text(
String this.data, {
Key? key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
});
...
@override
Widget build(BuildContext context){...}
...
}Le widget Text hérite de StatelessWidget. Par conséquent, on dit que le widget Text est immuable.
Les widgets avec état
Les stafefulWidget sont des widgets qui ont un état. C’est à dire qu’une fois qu’ils ont déjà été construits, il peuvent changer d' »aspect » à la suite d’une action de l’utilisateur ou un processus pendant l’exécution du programme. C’est le cas du widget Image qui permet d’afficher des images à l’écran.
class Image extends StatefulWidget {
...
const Image({
Key? key,
required this.image,
this.frameBuilder,
this.loadingBuilder,
this.errorBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.opacity,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.isAntiAlias = false,
this.filterQuality = FilterQuality.low,
});
...
@override
Widget build(BuildContext context){...}
...
}NB: vous pouvez remarquer qu’une méthode build est déclarée. En effet, quand une classe hérite de la classe StatelessWidget ou StatefulWidget, celle-ci doit obligatoirement redéfinir cette méthode, qui se charge de construire le widget.
Quelques widgets basiques
Flutter met à notre disposition une multitude de widgets. Nous allons parler de quelques-uns, les plus utilisés. Vous pouvez visiter le site officiel de Flutter pour voir la bibliothèque des widgets que vous pourrez utiliser dans vos applications.
Text
Ce widget nous permet d’afficher du text à l’écran. Il contient plusieurs paramètres facultatifs dont le text à afficher qui est obligatoire.
Text(
//Désigne le text doit s'afficher
'Hello, Ruth! How are you?',
//Permet d'aligner le text.
textAlign: TextAlign.center,
//Permet d'appliquer un style au text qui s'affiche à l'écran
style: const TextStyle(fontWeight: FontWeight.bold),
)Column
Si vous avez besoin d’afficher une liste non scrollable de widgets de façon verticale (par défaut, de haut en bas), vous pouvez utiliser Column.
Column(
//List de widget enfant
children: const <Widget>[
//Premier enfant
Text('Deliver features faster'),
//Deuxième enfant
Text('Craft beautiful UIs'),
//Troisie enfant
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
)
Row
Row permet d’afficher une liste non scrollable de widget comme le widget Column mais cette fois en ligne ou de façon horizontale (par défaut, de gauche à droite).
Row(
children: const <Widget>[
Expanded(
child: Text('Deliver features faster', textAlign: TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
)
ListView
ListView permet d’afficher une liste de widget scrollable.
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
GridView
GridView permet d’afficher une grille scrollable de widget. Un peu comme une galerie d’image ou une galerie de produit sur un site e-commerce.
GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[100],
child: const Text("He'd have you all unravel at the"),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[200],
child: const Text('Heed not the rabble'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[300],
child: const Text('Sound of screams but the'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[400],
child: const Text('Who scream'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[500],
child: const Text('Revolution is coming...'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[600],
child: const Text('Revolution, they...'),
),
],
)
ElevatedButton
ElevatedButton permet d’afficher un bouton surélevé à l’écran.
ElevatedButton(
onPressed: () {},
child: const Text('Enabled'),
),
Image
Image permet d’afficher une image à partir de différentes sources (via une url, un fichier sur ma mémoire du téléphone, etc).
//Afficher une image sur internet
Image.network("https://www.youskil.com/wp-content/uploads/2022/10/cropped-ys_logo.png"),
//Afficher une images depuis les assets
Image.asset("assets/images/...jpg"),
Conclusion
Les widgets sont des éléments absolument incontournables dans la conception d’application en Flutter. Si vous souhaitez être assez à l’aise dans la construction de vos applications, je vous invite fortement à vous familiariser avec la bibliothèque de widget. Je vous remercie pour votre attention. En attendant, n’hésitez pas à laisser un commentaire au bas de cet article si vous rencontrez des difficultés. Peace !
Excellent travail, je suis motivé d’apprendre avec vous.