Flutter Chapitre 4 : Boutons

Chapitre 4 : Boutons

• Boutons plats (FlatButton): Composant Flutter pour créer des boutons.
• Utilisation de MaterialApp, Scaffold, AppBar et Center pour intégrer le bouton.
• L'attribut child contient le texte affiché sur le bouton.
• L'attribut onPressed est appelé lorsqu'on clique sur le bouton. Il exécute une fonction (ex: print('Flat Button was clicked')).
• Propriétés personnalisation : splashColor, color, textColor, disabledColor, highlightColor pour ajuster l'apparence (notamment couleurs).
• Boutons plats avec icône (FlatButton.icon): Ajout d'une icône à un bouton plat.
• L'attribut icon spécifie une icône (ex. Icon(Icons.call)).
• L'attribut label spécifie le texte du bouton (ex. Text('Call Me')).

Boutons surélevés (RaisedButton) et avec icône (RaisedButton.icon)

• RaisedButton: Bouton avec ombre (effet surélevé).
• La personnalisation inclut les couleurs : (color, textColor, disabledTextColor, disabledColor, splashColor).
• L'utilisation d'une SizedBox ajoute de l'espace entre les boutons.

Bouton d'action flottant (FloatingActionButton)

• FloatingActionButton: Bouton flottant sur l'écran, souvent utilisé pour les actions rapides.
• L'icône est spécifiée grâce à l'attribut child (ex. Icon(Icons.check)).
• L'attribut onPressed précise l'action à réaliser lors du clic.
• La personnalisation des couleurs est possible avec backgroundColor et foregroundColor.
• L'attribut mini permet de rendre le bouton plus petit.
• L'attribut elevation contrôle la hauteur de l'effet d'ombrage.
• L'attribut shape permet de modifier la forme du bouton avec une RoundedRectangleBorder qui permet de créer des arrondis.

Bouton d'action flottant étendu (FloatingActionButton.extended)

• FloatingActionButton.extended: Version améliorée du FloatingActionButton avec un label texte plus visible.
• L'attribut icon définit l'icône.
• L'attribut label définit le texte.
• Modification possible pour l'apparence visuelle à travers backgroundColor, foregroundColor.
• L'attribut mini permet de réduire la taille du bouton extended.
• L'attribut elevation contrôle la hauteur de l'effet d'ombrage.
• L'attribut shape permet de modifier la forme du bouton avec une RoundedRectangleBorder qui permet de créer des arrondis.

Barre de Boutons (ButtonBar)

• ButtonBar: Permet de regrouper plusieurs boutons dans une barre.
• Les boutons dans la ButtonBar peuvent être des RaisedButton ou FlatButton.
• L'attribut alignment contrôle l'alignement des éléments dans la barre.
• L'attribut children contient une liste des boutons à afficher.
• MainAxisAlignment.center centre horizontalement les éléments dans la ButtonBar.

Bouton déroulant (DropdownButton)

• DropdownButton: Affiche une liste déroulante d'options.
• L'attribut items définit la liste déroulante, générée avec la méthode map.
• onChanged gère les changements de sélection, mettant à jour l'état avec setState.
• L'attribut value détermine la sélection actuelle.
• L'attribut items est une liste d'objets DropdownMenuItem qui contiennent la valeur et le texte à afficher.

Testez vos connaissances sur les différents types de boutons dans Flutter, y compris les boutons plats et surélevés. Ce quiz explore leur utilisation, les propriétés de personnalisation et l'ajout d'icônes. Préparez-vous à vous plonger dans le monde des interfaces utilisateur Flutter !