Arrondir un bouton avec la propriété shape
La manière la plus simple d’arrondir un bouton dans Flutter va être d’utiliser sa propriété shape. Voici donc les étapes à suivre pour lui donner des bords arrondis, voire le rendre complètement rond.
- Donner un style à notre bouton
Pour arrondir un bouton, commencez par modifier son apparence grâce à la propriété style, à laquelle vous allez assigner une valeur de ElevatedButton.styleFrom(). Cette méthode permet d’accéder à la propriété shape (forme), qui est celle qui nous intéresse.
- Définir la Shape du bouton :
Utilisez la propriété shape pour définir la forme du bouton en lui attribuant la valeur RoundedRectangleBorder() avec un rayon de bordure spécifique.
- Ajouter un bordRadius de type circular :
Dans RoundedRectangleBorder(), ajoutez la propriété borderRadius et assignez-lui la valeur BorderRadius.circular(). Cette méthode prend une valeur de type double, que vous pouvez ajuster pour obtenir l’arrondi souhaité. Plus la valeur est élevée, plus les coins seront arrondis. Notez également que plus votre bouton est grand, plus la valeur minimum nécessaire pour observer un arrondi sera élevée.
- Tester le rendu
Une fois que vous avez ajouté l’arrondi à votre bouton, relancez votre application Flutter pour observer les modifications.
Je vous mets ici un code d’exemple que vous pouvez utiliser pour vous entrainer :
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),
))
],
),
),
),
);
}
}Arrondir un bouton via la forme de son Container
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 lorsque vous allez cliquer dessus. Cela n’est pas très beau visuellement, je vous montre donc ici comment rendre le Container rond, pour éviter ce problème.
Pour cela, vous devrez utiliser la propriété decoration de votre Container, à laquelle vous donnerez une valeur de BoxDecoration(). C’est via celle-ci que vous pourrez accéder à la propriété borderRadius, à laquelle vous donnerez encore une valeur de BorderRadius.circular(). Votre Container étant maintenant de forme ronde, votre bouton contenu dedans va prendre la même forme.
Je vous remets ici un code d’exemple que vous pouvez utiliser pour vous entrainer :
import 'package:flutter/material.dart';
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(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.greenAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
child: const Text(
"Bouton rond",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
),
],
),
),
),
);
}
}
