Comment créer un bouton avec le widget ElevatedButton ?
ElevatedButton est un widget de base de Flutter, qui comme son nom l’indique va vous permettre de créer un bouton. Celui-ci dispose de nombreux paramètres pour gérer sa forme et les actions qu’il va réaliser lorsqu’on clique dessus. Toutefois, celui-ci ne demande que deux paramètres pour fonctionner :
- child → L’enfant qui va symboliser votre bouton, par exemple un texte ou un icon ;
- onPressed → L’action qui va être réalisée lorsqu’on clique sur le bouton.
Voici un exemple tout simple de bouton, qui va afficher un texte quand on clique dessus :
import 'package:flutter/material.dart';
void main() => runApp(const ElevatedButtonExemple());
class ElevatedButtonExemple extends StatelessWidget {
const ElevatedButtonExemple({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Exemple d'ElevatedButton")),
body: Center(
child: Column(
children: <Widget>[
const SizedBox(height: 30),
ElevatedButton(
onPressed: (){print(“Mon bouton marche !”};}
child: const Text('Afficher texte'),
),
],
),
),
),
);
}
}Donner une couleur à mon ElevatedButton
Le widget ElevatedButton ne dispose pas d’un paramètre couleur. En revanche, vous pouvez utiliser son paramètre “style” auquel vous allez donner une valeur de ElevatedButton.styleFrom(). C’est cette méthode qui va vous permettre, entre autres de modifier la couleur de votre bouton, mais aussi de gérer d’autres paramètres de style.
Voici un exemple :
class ElevatedButtonExemple extends StatelessWidget {
const ElevatedButtonExemple({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Couleur ElevatedButton")),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
ElevatedButton(
onPressed: (){},
child: const Text('Afficher texte'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueGrey
),
),
],
),
),
),
);
}
}Réaliser une action avec une pression longue
Il est possible que vous souhaitiez réaliser une action différente avec votre bouton lorsque l’utilisateur appui longuement dessus. Par exemple, ouvrir un menu d’options pour supprimer, modifier ou partager un message. Cela vous est possible grâce au paramètre onLongPress.
Voici un exemple tout simple où un appui court affiche un texte et rester appuyer en affiche un autre :
class ElevatedButtonExemple extends StatelessWidget {
const ElevatedButtonExemple({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Exemple d'ElevatedButton")),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
ElevatedButton(
onPressed: () {
print("J'affiche mon message");
},
onLongPress: () {print("J'affiche un autre message");},
child: const Text('Enabled'),
),
],
),
),
),
);
}
}Arrondir un ElevatedButton
Il existe deux manières d’arrondir un ElevatedButton. La première est tout simplement d’utiliser le paramètre shape qui est fourni par ce widget et d’utiliser la méthode RoundedRectangleBorder(). Cette méthode dispose elle-même d’un paramètre borderRadius auquel vous allez donner une valeur de BorderRadius.circular(x). Plus la valeur de X est élevée, plus votre bouton sera arrondi.
Voici un exemple :
class ElevatedButtonExemple extends StatelessWidget {
const ElevatedButtonExemple({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.greenAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
child: const Text(
textAlign: TextAlign.center,
"Bouton rond",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
))
],
),
),
),
);
}
}Le problème de cette méthode est que si votre bouton est contenu dans un widget de type Container, vous allez observer une légère différence de couleur entre les deux couches.
C’est pourquoi, je vous conseille d’arrondir votre ET son Container, pour éviter ce problème :
class ElevatedButtonExemple extends StatelessWidget {
const ElevatedButtonExemple({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.42,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.greenAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
child: const Text(
textAlign: TextAlign.center,
"Mon bouton rond",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
)),
)
],
),
),
),
);
}
}Ajouter une ombre sous mon bouton
Il est possible d’ajouter une ombre sous votre bouton en le plaçant dans un Container, auquel vous allez attribuer une ombre. Celui-ci ne dispose pas directement d’un paramètre shadow, mais peut prendre comme argument une BoxDecoration(), qui elle possède ce paramètre. Vous allez ensuite pouvoir gérer le style de votre ombre grâce à la BoxShadow :
class ElevatedButtonExemple extends StatelessWidget {
const ElevatedButtonExemple({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.42,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 5),
),
],
),
child: ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.greenAccent,
),
child: const Text(
textAlign: TextAlign.center,
"Bouton avec une ombre",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
)),
)
],
),
),
),
);
}
}Changer la couleur de mon bouton lorsque je clique dessus
Admettons que vous souhaitez changer la couleur des boutons sur lesquels l’utilisateur a cliqué (par exemple pour montrer sa sélection). Cela sous-entend que vos boutons auront deux états possible : cliqué/pas cliqué. Nous avons donc ici affaire à un booléen.
Pour changer la couleur de votre bouton quand vous cliquez dessus, vous aurez donc 3 choses à faire :
- Créer une variable booléenne qui va contenir l’état de votre bouton (true/false) ;
- Indiquer la couleur à afficher si true et celle à afficher si false ;
- Changer l’état de la variable quand l’utilisateur clique sur le bouton.
Une fois mis sous forme de code, voilà ce que cela va donner :
bool selected = true;
class ElevatedButtonExemple extends StatefulWidget {
const ElevatedButtonExemple({super.key});
@override
State<ElevatedButtonExemple> createState() => _ElevatedButtonExempleState();
}
class _ElevatedButtonExempleState extends State<ElevatedButtonExemple> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Exemple d'ElevatedButton")),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.42,
child: ElevatedButton(
onPressed: () {
setState(() {
selected = !selected;
});
if (selected == true) {
print("Mon bouton est vert");
}
if (selected == false) {
print("Mon bouton est rouge");
}
},
style: ElevatedButton.styleFrom(
backgroundColor:
selecteded ? Colors.greenAccent : Colors.red,
),
child: const Text(
textAlign: TextAlign.center,
"Mon bouton",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
)),
)
],
),
),
),
);
}
}Faire un bouton avec un dégradé de couleur
Le paramètre backgroundColor ne permet pas de faire un dégradé de couleur avec un ElevatedButton. Il va donc falloir ruser et placer notre bouton dans un Container. C’est via le paramètre style de ce Container, qu’il va être possible d’utiliser la méthode BoxDecoration() qui permet de créer un dégradé. Ne reste plus qu’à donner un fond transparent à votre bouton et le tour est joué :
class ElevatedButtonExemple extends StatefulWidget {
const ElevatedButtonExemple({super.key});
@override
State<ElevatedButtonExemple> createState() => _ElevatedButtonExempleState();
}
class _ElevatedButtonExempleState extends State<ElevatedButtonExemple> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 30),
Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.42,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors: <Color>[
Color.fromARGB(255, 134, 166, 239),
Color.fromARGB(255, 130, 238, 238),
]),
),
child: ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.transparent,
),
child: const Text(
textAlign: TextAlign.center,
"Mon bouton",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
)),
)
],
),
),
),
);
}
}Pour cet exemple, j’ai fait un dégradé de type linéaire, mais il est aussi possible d’en faire un de type circulaire. Le point de départ et d’arrivée du gradient peut aussi être modifié grâce aux paramètres begin et end. Enfin, sachez aussi qu’il est possible de mettre autant de couleurs que vous le souhaitez à votre dégradé.
Conclusion
Vous êtes désormais capable de mettre en place des boutons qui permettront à vos utilisateurs de réaliser diverses actions. Avec un peu d’entrainement, vous serez très vite en mesure de créer une application mobile dynamique.
Et pourquoi ne pas continuer dans cette voie en apprenant à créer des box à cocher vous valider ou invalider des options ?
