Le Widget CheckboxListTile dans Flutter
Le Widget CheckboxListTile dans Flutter
-
Objectifs
- À la fin de ce cours, vous serez capables de :
- Comprendre ce qu’est le widget CheckboxListTile.
- Savoir comment l’utiliser pour créer une liste de cases à cocher dans une application Flutter.
- Explorer les propriétés clés du widget CheckboxListTile.
- Réaliser des exercices pratiques pour mettre en pratique ce qu’ils ont appris.
-
Présentation
- Le widget CheckboxListTile dans Flutter est un composant d’interface utilisateur qui combine une case à cocher et un libellé dans une liste. Il est largement utilisé dans les applications pour permettre aux utilisateurs de sélectionner plusieurs options parmi une liste.
- Le widget
CheckboxListTile
dans Flutter est utilisé pour afficher une case à cocher accompagnée d’un libellé dans une liste. Il est souvent utilisé dans les listes de paramètres ou de préférences utilisateur où l’utilisateur peut sélectionner plusieurs options à la fois. CheckboxListTile
est un widget intégré à Flutter. Nous pouvons dire que c’est une combinaison de CheckBox avec un ListTile . Ses propriétés telles que value , activeColor et checkColor sont similaires au widget CheckBox , et title , subtitle , contentPadding , etc. sont similaires au widget ListTile.-
Les Composants du widget CheckboxListTile
- Le widget CheckboxListTile se compose des éléments suivants :
- Case à cocher (Checkbox) : Permet à l’utilisateur de sélectionner ou de désélectionner une option.
- Libellé (title) : Affiche le texte descriptif associé à la case à cocher.
- Sous-titre (subtitle) : Affiche un texte supplémentaire en dessous du libellé.
- Activité (onChanged) : Déclenche une action lorsqu’il y a un changement d’état de la case à cocher.
-
Les Propriétés du widget CheckboxListTile
- Voici quelques-unes des propriétés clés du widget CheckboxListTile :
value
: Un booléen qui définit si la case à cocher est cochée ou non.onChanged
: Une fonction de rappel qui est appelée lorsque l’utilisateur coche ou décoche la case à cocher.title
: Le texte principal affiché à côté de la case à cocher.subtitle
: Le texte supplémentaire affiché sous le titre.controlAffinity
: L’alignement de la case à cocher par rapport au libellé.- En utilisant les propriétés de la classe CheckboxListTile, nous pouvons modifier les couleurs et également écouter les changements d’état.
- contentPadding : Vous permet de définir le padding autour du contenu de la tuile.
- value : Vous permet de définir si la case à cocher est cochée ou non.
- secondary : Vous permet de définir le widget à afficher à côté de la case à cocher.
- tileColor : Vous permet de définir la couleur de fond de la tuile.
- selectedTileColor : Vous permet de définir la couleur de fond de la tuile lorsque la tuile est sélectionnée.
- controlAffinity : Vous permet de définir l’alignement de la case à cocher par rapport au texte (par exemple, leading pour aligner la case à cocher à gauche du texte).
-
Comment utiliser le widget CheckboxListTile dans Flutter
- Par défaut, Flutter CheckboxListTile peut afficher deux lignes de texte. Le titre et le sous-titre . Comme la première ligne de texte n’est pas facultative mais la deuxième ligne de texte ou le sous-titre est facultatif. La texture des widgets de début et de fin peut être modifiée en fonction des propriétés données.
- Syntaxe
- Exemples
- Utiliser un seul widget CheckboxListTile
- Utiliser plusieurs widgets CheckboxListTile
-
Activités
-
Activité:01
- Titre : Ajout d’images aux CheckboxListTile
- Objectif :
- Dans cet exercice, vous allez pratiquer l’utilisation de Flutter pour afficher des images à côté des éléments d’une liste de cases à cocher.
- Description :
- Vous avez été fourni avec un code Flutter qui affiche une liste de cases à cocher pour différents fruits. Votre tâche consiste à ajouter une image représentant chaque fruit à côté de son nom dans la liste.
- Composants : Vous utiliserez les composants suivants :
- CheckboxListTile : Utilisé pour afficher chaque élément de la liste avec une case à cocher et un libellé.
- CircleAvatar : Utilisé pour afficher une image dans un cercle.
- Propriétés : Vous pouvez utiliser les propriétés suivantes pour afficher les images :
- leading de CheckboxListTile : Cette propriété vous permet de définir un widget à afficher à gauche du titre.
- backgroundImage de CircleAvatar : Cette propriété vous permet de définir l’image à afficher dans le cercle.
- secondary: Vous utiliserez la propriété secondary de CheckboxListTile pour définir un widget à afficher à droite du titre
- Travail demandé :
- Copiez le code fourni ci-dessus dans un nouveau projet Flutter.
- Utilisez la propriété subtitle de CheckboxListTile pour définir une description du fruit sous le nom, en utilisant le widget Text.
- Assurez-vous que chaque description correspond au fruit mentionné dans le texte ci-dessus.
- Pour chaque CheckboxListTile, ajoutez une image représentant le fruit mentionné dans le texte à côté de celui-ci.
- Assurez-vous que l’image correspond au fruit mentionné dans le texte de chaque CheckboxListTile.
- Utilisez les images téléchargées des fruits et assurez-vous de les ajouter au répertoire assets de votre projet.
- Testez l’application pour vous assurer que les images sont correctement affichées à côté des noms des fruits.
- Remarque :
- Assurez-vous de télécharger les images des fruits et de les ajouter à votre projet Flutter. Vous pouvez les placer dans le répertoire assets de votre projet et les référencer dans votre code à l’aide de l’URL appropriée.
-
Activité:02
- Titre : Utilisation d’un seul CheckboxListTile pour afficher plusieurs fruits
- Objectif : Dans cet exercice, vous allez apprendre à optimiser votre code en utilisant un seul CheckboxListTile pour afficher plusieurs fruits avec leurs images respectives.
- Description :
- Vous avez déjà réussi à afficher une liste de cases à cocher pour différents fruits en utilisant un CheckboxListTile pour chaque fruit. Cette fois-ci, vous allez améliorer votre code en utilisant une seule instance de CheckboxListTile pour afficher les trois fruits avec leurs images respectives.
- Composants : Vous utiliserez les mêmes composants que dans l’exercice précédent :
- CheckboxListTile : Utilisé pour afficher les cases à cocher avec les libellés et les images.
- CircleAvatar : Utilisé pour afficher les images dans des cercles.
- Propriétés : Vous pouvez utiliser les propriétés suivantes pour afficher les images :
- secondary de CheckboxListTile : Utilisé pour définir un widget à afficher à droite du titre.
- backgroundImage de CircleAvatar : Utilisé pour définir l’image à afficher dans le cercle.
- Travail demandé :
- Copiez le code fourni dans un nouveau projet Flutter.
- Utilisez une seule instance de CheckboxListTile pour afficher les trois fruits : pomme, banane et cerise.
- Déclarez trois variables booléennes distinctes pour suivre l’état de chaque fruit.
- Utilisez la propriété secondary pour afficher les images des fruits à côté de leur nom dans le CheckboxListTile.
- Testez l’application pour vous assurer que les images sont correctement affichées à côté des noms des fruits et que les cases à cocher fonctionnent comme prévu.
-
Activité:03
- Titre : Utilisation avancée de CheckboxListTile pour afficher plusieurs fruits avec mise en forme personnalisée
- Objectif :
- Dans cet exercice, vous allez explorer les propriétés de mise en forme de CheckboxListTile pour personnaliser l’apparence de la liste de cases à cocher affichant différents fruits.
- Description :
- Après avoir réussi à afficher une liste de cases à cocher pour différents fruits en utilisant un CheckboxListTile pour chaque fruit, vous allez maintenant vous concentrer sur la personnalisation avancée de l’apparence visuelle de ces éléments. Vous utiliserez une seule instance de CheckboxListTile pour afficher les trois fruits (pomme, banane et cerise) avec leurs images respectives, tout en explorant différentes propriétés de mise en forme pour styliser la liste de cases à cocher.
- Composants :
- CheckboxListTile : Utilisé pour afficher les cases à cocher avec les libellés et les images.
- CircleAvatar : Utilisé pour afficher les images dans des cercles.
- Travail demandé :
- Changer la couleur des carreaux : « Utilisez la propriété tileColor de CheckboxListTile pour changer la couleur de fond du carreau de chaque carreau. Assurez-vous que la couleur de fond est différente sur tous les carreaux. »
- Case à cocher de style : « Modifiez la couleur de la case à cocher en vert en utilisant la propriété checkColor de CheckboxListTile. Assurez-vous que la case à cocher a un style solide et distinct en utilisant la propriété activeColor. »
- Rendre la case à cocher circulaire : « Rendez la case à cocher circulaire en utilisant la propriété shape de CheckboxListTile. Assurez-vous que toutes les cases à cocher ont une forme circulaire. »
- Styliser la liste de cases à cocher : « Personnalisez la mise en forme générale de la liste de cases à cocher en ajoutant un espace supplémentaire autour des éléments. Utilisez la propriété contentPadding pour ajuster l’espacement. »
- Personnalisation du titre : « Changez la police du texte du titre en gras et augmentez sa taille en utilisant la propriété style de la sous-propriété title de CheckboxListTile. »
- Personnalisation du sous-titre : « Ajoutez une description sous le titre de chaque fruit en utilisant la propriété subtitle de CheckboxListTile. Assurez-vous que la description est claire et facilement lisible. »
- Définir la même hauteur pour tous les CheckboxListTile et ajouter de l’espace à gauche et à droite, vous pouvez utiliser la propriété contentPadding de CheckboxListTile.
CheckboxListTile(
title: const Text('Sample Label'),
value: false,
onChanged: () {},
),
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Application';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State createState() => _MyStatefulWidgetState();
}
/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
const SizedBox(height: 30,),
CheckboxListTile(
title: const Text('Pomme'),
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
],
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Application';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State createState() => _MyStatefulWidgetState();
}
/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State {
bool isPommeChecked = false;
bool isBananeChecked = false;
bool isCeriseChecked = false;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
CheckboxListTile(
title: const Text('Pomme'),
value: isPommeChecked,
onChanged: (bool? value) {
setState(() {
isPommeChecked = value!;
});
},
),
CheckboxListTile(
title: const Text('Banane'),
value: isBananeChecked,
onChanged: (bool? value) {
setState(() {
isBananeChecked = value!;
});
},
),
CheckboxListTile(
title: const Text('Cerise'),
value: isCeriseChecked,
onChanged: (bool? value) {
setState(() {
isCeriseChecked = value!;
});
},
),
],
),
);
}
}