Comment créer un bouton arrondi / un bouton avec border-radius dans Flutter ?

Grâce au framework Flutter, vous pouvez créer une application qui, à partir de la même base de code, fonctionnera à la fois sur les deux systèmes d'exploitation mobiles les plus populaires, Android et iOS. Cette plateforme va même s'élargir, car les équipes de développement sont en train de travailler sur le support du Web et des systèmes d'exploitation des ordinateurs de bureau. Cette plateforme apporte un grand confort d'utilisation, mais nécessite de maitriser un langage particulier : le langage Dart. Il faut donc réapprendre des modifications que l'on effectuait dans d'autres langages, comme modifier la forme d'un bouton pour qu'il devienne arrondi.

Il existe plusieurs solutions pour arrondir un bouton avec Flutter. La plus simple est d'utiliser la propriété "Border Radius". Issue du langage CSS, qui permet de gérer l'affichage des sites internet, c'est ce nom de propriété qui a été repris par les équipes de Google pour intégrer le langage Dart. Vous pouvez créer un bouton avec les widgets "FlatButton" ou bien "RaisedButton" selon le style que vous voulez lui donner. Les 2 classes possèdent la propriété "shape" qui permet de définir la forme du bouton. Affectez à cette propriété un objet de la classe "RoundedRectangleBorder". Dans cet objet, vous pouvez définir la propriété "borderRadius". Pour arrondir la bordure, la méthode "BorderRadius.cicular()" accepte un nombre correspondant à la taille de l'arrondi. À 0, le bord est droit. Plus la valeur est élevée, plus le bouton est arrondi.

//Exemple de bouton avec un bord arrondi
FlatButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
        side: BorderSide(color: Colors.green)),
      color: Colors.white,
      textColor: Colors.green,
      padding: EdgeInsets.all(8.0),
      onPressed: () {},
      child: Text(
        "Voici un bouton arrondi",
        style: TextStyle(
          fontSize: 12.0,
        ),
      ),
    )

Android