Flutter Widgets Material (p.
1)
Flutter Référence Widgets Material (FR)
Volume 2 Généré le 03 September 2025
Ce document couvre les widgets Material Design de Flutter, avec explications
et exemples pratiques.
Référence Flutter (FR) Volume 2
Introduction (p.1)
Les widgets Material implémentent les composants visuels recommandés par Google.
Ils fournissent la structure de page (Scaffold), les boutons, champs de texte,
dialogues, snackbars et autres éléments interactifs.
Référence Flutter (FR) Volume 2
Scaffold & AppBar (p.1)
**Scaffold** : structure de page standard avec AppBar, body, Drawer, FAB, etc.
**AppBar** : barre supérieure avec titre, actions, menus.
Exemple :
```dart
Scaffold(
appBar: AppBar(title: const Text("Accueil")),
body: const Center(child: Text("Contenu")),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
```
Référence Flutter (FR) Volume 2
Drawer & BottomNavigationBar (p.1)
**Drawer** : menu latéral coulissant.
**BottomNavigationBar** : barre d onglets en bas de l écran.
Exemple Drawer :
```dart
Scaffold(
drawer: Drawer(
child: ListView(
children: const [
DrawerHeader(child: Text("Menu")),
ListTile(title: Text("Option 1")),
ListTile(title: Text("Option 2")),
],
),
),
);
```
Référence Flutter (FR) Volume 2
TabBar & TabBarView (p.1)
**TabBar** : onglets horizontaux.
**TabBarView** : contenu associé aux onglets.
Exemple :
```dart
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(tabs: [Tab(text: "A"), Tab(text: "B")]),
),
body: const TabBarView(children: [Center(child: Text("Page A")), Center(child: Text("Page
B"))]),
),
);
```
Référence Flutter (FR) Volume 2
Text & Inputs (p.1)
**Text** : affiche une chaîne.
**TextField** : champ de saisie.
**TextFormField** : champ de saisie avec validation, utilisé dans un Form.
Exemple :
```dart
Form(
child: TextFormField(
decoration: const InputDecoration(labelText: "Email"),
validator: (value) => value!.contains("@") ? null : "Email invalide",
),
);
```
Référence Flutter (FR) Volume 2
Boutons (p.1)
- **ElevatedButton** : bouton en relief.
- **OutlinedButton** : bouton contour.
- **IconButton** : bouton avec icône.
Exemple :
```dart
ElevatedButton(onPressed: () {}, child: const Text("Valider"));
OutlinedButton(onPressed: () {}, child: const Text("Annuler"));
IconButton(onPressed: () {}, icon: const Icon(Icons.favorite));
```
Référence Flutter (FR) Volume 2
Contrôles (p.1)
- **Checkbox** : case à cocher.
- **Radio** : bouton radio.
- **Switch** : interrupteur.
- **Slider** : curseur.
Exemple :
```dart
Checkbox(value: true, onChanged: (v) {});
Radio(value: 1, groupValue: 1, onChanged: (v) {});
Switch(value: false, onChanged: (v) {});
Slider(value: 0.5, onChanged: (v) {});
```
Référence Flutter (FR) Volume 2
SnackBar (p.1)
**SnackBar** : message temporaire en bas de l écran.
Exemple :
```dart
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Enregistré !")),
);
```
Référence Flutter (FR) Volume 2
Dialogues (p.1)
**Dialog** et **AlertDialog** : fenêtres modales.
Exemple :
```dart
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text("Titre"),
content: const Text("Contenu"),
actions: [
TextButton(onPressed: () => Navigator.pop(context), child: const Text("Fermer")),
],
),
);
```
Référence Flutter (FR) Volume 2
BottomSheet (p.1)
**BottomSheet** : panneau glissant depuis le bas.
Exemple :
```dart
showModalBottomSheet(
context: context,
builder: (_) => const Padding(
padding: EdgeInsets.all(16),
child: Text("Options ici"),
),
);
```
Référence Flutter (FR) Volume 2
Card & ListTile (p.1)
**Card** : conteneur stylisé avec ombre.
**ListTile** : ligne avec icône, titre, sous-titre.
Exemple :
```dart
Card(
child: ListTile(
leading: const Icon(Icons.person),
title: const Text("Nom"),
subtitle: const Text("Sous-titre"),
trailing: const Icon(Icons.arrow_forward),
),
);
```
Référence Flutter (FR) Volume 2
Chip & Tooltip & Stepper (p.1)
**Chip** : petit élément visuel (tag, catégorie).
**Tooltip** : bulle d aide.
**Stepper** : étapes avec progression.
Exemple :
```dart
Chip(label: const Text("Tag"));
Tooltip(message: "Astuce", child: Icon(Icons.info));
Stepper(
steps: const [
Step(title: Text("Étape 1"), content: Text("Info")),
Step(title: Text("Étape 2"), content: Text("Détails")),
],
);
```
Référence Flutter (FR) Volume 2
