Le Widget RadioListTile dans Flutter
Le Widget RadioListTile dans Flutter
-
Objectifs
- À la fin de ce cours, vous serez capables de :
- Comprendre ce qu’est le widget RadioListTile.
- Savoir comment l’utiliser pour créer une liste des options à cocher dans une application Flutter.
- Explorer les propriétés clés du widget RadioListTile.
- Réaliser des exercices pratiques pour mettre en pratique ce qu’ils ont appris.
-
Présentation
- Le widget RadioListTile dans Flutter est un composant d’interface utilisateur qui combine un bouton radio et un libellé dans une liste. Il est largement utilisé dans les applications pour permettre aux utilisateurs de sélectionner une seule option parmi une liste.
- Le widget
RadioListTile
dans Flutter est utilisé pour afficher un bouton radio accompagné 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 doit choisir une seule option parmi plusieurs. RadioListTile
est un widget intégré à Flutter. Nous pouvons dire que c’est une combinaison de RadioButton avec un ListTile. Ses propriétés telles que value, groupValue, activeColor et title, subtitle, contentPadding, etc. sont similaires au widget RadioButton et au widget ListTile.-
Les Composants du widget RadioListTile
- Le widget RadioListTile se compose des éléments suivants :
- Bouton radio (RadioButton) : Permet à l’utilisateur de sélectionner une option parmi plusieurs.
- Libellé (title) : Affiche le texte descriptif associé au bouton radio.
- Sous-titre (subtitle) : Affiche un texte supplémentaire en dessous du libellé.
- Action (onChanged) : Déclenche une action lorsque l’utilisateur sélectionne une option différente.
-
Les Propriétés du widget RadioListTile
- Voici les propriétés principales du widget RadioListTile :
value
: Un objet qui représente la valeur de l’option sélectionnée.groupValue
: Un objet qui représente la valeur de l’option actuellement sélectionnée dans le groupe.onChanged
: Une fonction de rappel qui est appelée lorsque l’utilisateur sélectionne une nouvelle option.title
: Le texte principal affiché à côté de l’option de sélection.subtitle
: Le texte supplémentaire affiché sous le titre.activeColor
: La couleur utilisée pour indiquer l’option sélectionnée.controlAffinity
: L’alignement de l’option de sélection par rapport au libellé.- En utilisant les propriétés de la classe RadioListTile, nous pouvons personnaliser l’apparence et le comportement des options de sélection dans une liste.
contentPadding
: Vous permet de définir le padding autour du contenu de la tuile.secondary
: Vous permet de définir le widget à afficher à côté de l’option de sélection.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 l’option est sélectionnée.
controlAffinity
: Vous permet de définir l’alignement de l’option de sélection par rapport au texte (par exemple, leading pour aligner l’option à gauche du texte).-
Utilisation du widget RadioListTile dans Flutter
- Le widget RadioListTile de Flutter est utilisé pour afficher une option sélectionnable dans une liste, avec un bouton radio à côté d’un libellé. Il permet à l’utilisateur de sélectionner une seule option parmi plusieurs.
- Syntaxe
- Exemples
- Utiliser un seul widget CheckboxListTile
- Utiliser plusieurs widgets CheckboxListTile
-
Activités
-
Activité:01
- Titre : Ajout d’images aux RadioListTile
- Objectif :
- Dans cet exercice, vous allez pratiquer l’utilisation de Flutter pour afficher des images à côté des éléments d’une liste de boutons radio.
- Description :
- Vous avez été fourni avec un code Flutter qui affiche une liste de boutons radio 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 :
- RadioListTile : Utilisé pour afficher chaque élément de la liste avec un bouton radio 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 RadioListTile : 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 RadioListTile 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 RadioListTile 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 RadioListTile, 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 RadioListTile.
- 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 RadioListTile pour afficher plusieurs fruits
- Objectif : Dans cet exercice, vous allez apprendre à optimiser votre code en utilisant un seul RadioListTile pour afficher plusieurs fruits avec leurs images respectives.
- Description :
- Vous avez déjà réussi à afficher une liste de choix pour différents fruits en utilisant un RadioListTile pour chaque fruit. Cette fois-ci, vous allez améliorer votre code en utilisant une seule instance de RadioListTile pour afficher les trois fruits avec leurs images respectives.
- Composants : Vous utiliserez les mêmes composants que dans l’exercice précédent :
- RadioListTile : Utilisé pour afficher les éléments de la liste 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 RadioListTile : 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 RadioListTile 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 RadioListTile.
- Testez l’application pour vous assurer que les images sont correctement affichées à côté des noms des fruits et que la sélection fonctionne comme prévu.
-
Activité:03
- Titre : Utilisation avancée de RadioListTile 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 RadioListTile pour personnaliser l’apparence de la liste de choix affichant différents fruits.
- Description :
- Après avoir réussi à afficher une liste de choix pour différents fruits en utilisant un RadioListTile 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 RadioListTile 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 choix.
- Composants :
- RadioListTile : Utilisé pour afficher les éléments de la liste 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 RadioListTile 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 RadioListTile. 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 RadioListTile. Assurez-vous que toutes les cases à cocher ont une forme circulaire. »
- Styliser la liste de choix : « Personnalisez la mise en forme générale de la liste de choix 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 RadioListTile. »
- Personnalisation du sous-titre : « Ajoutez une description sous le titre de chaque fruit en utilisant la propriété subtitle de RadioListTile. Assurez-vous que la description est claire et facilement lisible. »
- Définir la même hauteur pour tous les RadioListTile et ajouter de l’espace à gauche et à droite, vous pouvez utiliser la propriété contentPadding de RadioListTile.
RadioListTile(
title: const Text('Option 1'),
value: 1,
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = 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 {
int selectedValue = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
const SizedBox(height: 30,),
RadioListTile(
title: const Text('Option 1'),
value: 1,
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value!;
});
},
),
RadioListTile(
title: const Text('Option 2'),
value: 2,
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = 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 {
String? selectedFruit;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
RadioListTile(
title: const Text('Pomme'),
value: 'Pomme',
groupValue: selectedFruit,
onChanged: (String? value) {
setState(() {
selectedFruit = value;
});
},
),
RadioListTile(
title: const Text('Banane'),
value: 'Banane',
groupValue: selectedFruit,
onChanged: (String? value) {
setState(() {
selectedFruit = value;
});
},
),
RadioListTile(
title: const Text('Cerise'),
value: 'Cerise',
groupValue: selectedFruit,
onChanged: (String? value) {
setState(() {
selectedFruit = value;
});
},
),
],
),
);
}
}