Changer la couleur d’un bouton quand on clique dessus
Flutter permet assez facilement de changer la couleur d’un bouton ou de n’importe quel élément visuel, en cliquant dessus. En réalité, ce n’est d’ailleurs pas tant le clic, que l’état d’une variable booléen qui va vous permettre de gérer ce comportement. Vous pouvez donc adapter ce guide, pour changer la couleur d’un élément visuel avec autre chose qu’un clic.
Voici donc comment changer la couleur d’un bouton Flutter lorsqu’on clique dessus :
- Créez un bouton avec le design souhaité, par exemple, vous pouvez utiliser le widget ElevatedButton ;
- Créez une variable de type booléen qui va déterminer la couleur de votre bouton selon son état true/false ;
- Utilisez cette variable de type booléen avec la propriété color: et attribuez deux couleurs ;
- Placez un setState dans la propriété onPressed du bouton qui va à la fois permettre de changer l’état de votre variable booléenne, mais aussi de reconstruire votre widget. Ainsi, la couleur de votre bouton va désormais changer à chaque clic.
Voici un exemple très simple que vous pouvez vous amuser à modifier selon vos besoins :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Center(
child: Text("Changer la couleur d'un bouton"),
)),
body: Center(
child: ColorChangingButton(),
),
),
);
}
}
class ColorChangingButton extends StatefulWidget {
@override
_ColorChangingButtonState createState() => _ColorChangingButtonState();
}
class _ColorChangingButtonState extends State<ColorChangingButton> {
bool isColorChanged = false;
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
setState(() {
isColorChanged = !isColorChanged;
});
},
style: ElevatedButton.styleFrom(
backgroundColor: isColorChanged ? Colors.blue : Colors.red,
),
child: isColorChanged
? const Text(
'Bleu',
style: TextStyle(fontSize: 20, color: Colors.white),
)
: const Text(
'Rouge',
style: TextStyle(fontSize: 20, color: Colors.white),
),
);
}
}
