À quoi sert le widget Checkbox ?
Le widget Checkbox dans Flutter est utilisé pour capturer des réponses de type booléen (vrai/faux, activé/désactivé) dans une interface utilisateur. Il permet à l’utilisateur de sélectionner ou désélectionner des options, souvent en lien avec des multiples choix dans des formulaires ou des listes d’options.
Vous pouvez par exemple l’utiliser pour créer :
- Un formulaire d’inscription : Demander à l’utilisateur s’il accepte les conditions générales d’utilisation.
- Une liste de tâches : Permettre de marquer des tâches comme terminées ou en attente dans une application de gestion de tâches.
- Un filtrage : Sélectionner plusieurs filtres pour affiner une recherche ou des résultats dans une application e-commerce.
- Des paramètres de notifications : Activer ou désactiver les notifications pour différents types d’événements.
- Des Choix multiples : Offrir la possibilité de sélectionner plusieurs préférences dans des questionnaires ou des sondages.
Mise en place d’une Checkbox
La Checkbox dans Flutter est assez simple à mettre en place. Vous aurez simplement besoin de créer une variable de type booléen, dans laquelle vous allez stocker l’état de la box (vrai/faux, cochée/décochée). Lorsque l’utilisateur va cliquer sur la box, l’état de cette variable pourra alors être changé grâce à setState()
Exemple
Le code suivant montre comment implémenter une Checkbox dans une application Flutter.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de Checkbox'),
),
body: Center(
child: CheckboxWidget(),
),
),
);
}
}
class CheckboxWidget extends StatefulWidget {
@override
_CheckboxWidgetState createState() => _CheckboxWidgetState();
}
class _CheckboxWidgetState extends State<CheckboxWidget> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Accepter les conditions'),
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
),
],
);
}
}Dans cet exemple, la propriété value de la Checkbox contrôle si elle est cochée (true) ou décochée (false). La méthode onChanged permet de réagir aux modifications d’état et lorsqu’un changement se produit, la valeur de isChecked est mis à jour avec la méthode setState.
Propriétés principales pour personnaliser la Checkbox
Flutter permet de personnaliser la Checkbox via plusieurs propriétés. Voici quelques-unes des plus couramment utilisées.
activeColor
Cette propriété permet de définir la couleur de la Checkbox lorsqu’elle est cochée :
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
activeColor: Colors.green, // Couleur active personnalisée
),checkColor
Elle permet de changer la couleur de la « coche » (le symbole validé à l’intérieur de la case) lorsque la Checkbox est cochée :
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
checkColor: Colors.white, // Couleur de la coche
),shape
La propriété shape permet de modifier la forme de la case à cocher. Par défaut, celle-ci est un carré avec des angles droits, mais vous pouvez la personnaliser en utilisant cette propriété pour créer des formes rondes, des bordures arrondies, etc :
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5), // Bordures arrondies
),
),Conclusion
Le widget Checkbox est un élément indispensable de toute application Flutter, tant ses usages sont nombreux. Vous avez désormais comment gérer des boutons et des cases à cocher, mais comment faire pour que l’utilisateur puisse entrer du texte ? Je réponds à cette question dans le prochain article :
