Flutter : comment créer un bouton arrondi sous forme d'icône ?
Le Material Design est une norme de design créée par les équipes de Google. Elle est maintenant utilisée dans toutes les applications proposées par la société et est devenue la norme utilisée sur Android, le système d'exploitation mobile. Le bouton arrondi flottant est un des éléments proposés par cette norme de design. Visible en permanence sur une page, il permet de focaliser l'attention de l'utilisateur sur une action principale. Le framework Flutter propose ses propres outils pour intégrer un bouton comme celui-ci dans votre front-end.
La classe "FloatingActionButton", dont l'utilisation est similaire à celle présente dans le kit de développement d'applications Android, existe dans Flutter. On peut paramétrer l'action exécutée avec l'attribut "onPressed". Vous remarquerez sur la plupart des applications de Google qu'une icône est liée à ce bouton. On peut en définir une avec l'attribut "Icon". La couleur du bouton est définie par l'attribut "backgroundColor", tandis que l'attribut "focusColor" définit la couleur quand le focus est réalisé sur le bouton. On peut également définir un texte qui sera affiché à côté de l'icône. Ajoutez votre texte dans l'attribut "label".
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.add),
backgroundColor: Colors.green,
focusColor: Colors.grey,
label: Text('Ajouter'),
elevation: 10,
),
Vous pouvez également utiliser la classe "ClipOval" pour réaliser le même type de widget. En définissant comme enfant un container avec une largeur égale à la hauteur, le bouton sera parfaitement rond. Vous pouvez définir une couleur, et même appliquer un effet de changement de couleur avec le widget "Inkwell".
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // Couleur qui "envahit" le bouton lors du focus
child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
onTap: () {},
),
),
)