Comment changer la couleur d'arrière-plan du bouton surélevé (ElevatedButton) dans Flutter à partir d'une fonction ?
Le framework Flutter permet de créer votre application avec un système de composants. Ces composants sont ensuite agencés dans une interface, pour finalement créer votre application. Celle-ci pourra fonctionner de la même manière sur ordinateur, smartphone, ou en tant que site interne. Pour créer l'interface de vos rêves, toutes sortes de composants sont disponibles : des champs de textes, des formulaires, des listes ou encore des boutons. Pour chaque type de composant, il existe des variantes différentes. C'est notamment le cas pour la classe "ElevatedButton". Cette classe correspond à un bouton avec un style donnant l'impression qu'il "dépasse" du reste des éléments, afin de le mettre en valeur. Comme tous les composants proposés par le framework, celui-ci peut être adapté selon vos besoins. Il est possible de modifier sa couleur, et pour cela, on peut faire appel à des classes différentes.
La classe "ElevatedButton" propose sa propre méthode de customisation, la méthode statique "styleFrom". Cette méthode accepte des paramètres permettant de personnaliser l'apparence de votre bouton. Parmi eux, la couleur de fond peut être modifiée avec le paramètre "primary". On peut également changer la couleur de l'ombre et d'autres.
ElevatedButton(
child: Text('Mon bouton'),
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.green),
)
Une autre solution possible est de faire appel à la classe "ButtonStyle". Cette classe plus générale permet de modifier l'apparence de n'importe quel bouton. La propriété "backgroundColor" doit être paramétrée pour changer la couleur de votre bouton.
ElevatedButton(
child: Text('Button'),
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
)