Créer un bouton arrondi / bouton avec border-radius dans Flutter

Question

Je suis en train de développer une application Android en Flutter. Comment puis-je ajouter un bouton arrondi ?

Answer 1

1. Résumé de la solution

FlatButton et RaisedButton sont dépréciés.

Ainsi, vous pouvez utiliser shape qui a été placé dans le style la propriété, pour TextButton et ElevatedButton .

Il y a quelques changements depuis Flutter 2.0 :

• style le type de propriété a été modifié en ButtonStyle
• shape le type de propriété a été modifié en MaterialStateProperty<T>

2. Bouton arrondi

A l'intérieur de la style existe la shape propriété :

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

Bouton carré

Pour un bouton carré, vous pouvez utiliser ElevatedButton ou à ajouter d'une autre manière :

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
      side: BorderSide(color: Colors.red)
    )
  )
)

Exemple complet

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    ),
    SizedBox(width: 10),
    ElevatedButton(
      child: Text(
        "Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)

Answer 2

Vous pouvez utiliser le widget RaisedButton. Le widget RaisedButton possède une propriété de forme que vous pouvez utiliser comme indiqué dans l'extrait ci-dessous.

ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18.0),
                      side: BorderSide(color: Colors.teal, width: 2.0)))),
          child: Text('Submit'),
          onPressed: () {},
        ),

Answer 3

Mise à jour

Les boutons de gauche étant désormais obsolètes, utilisez les boutons de droite.

Deprecated    -->   Recommended

RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

---

• ElevatedButton

1. Utilisation de StadiumBorder

   

   ElevatedButton(
     onPressed: () {},
     child: Text('Button'),
     style: ElevatedButton.styleFrom(shape: StadiumBorder()),
   )

2. Utilisation de RoundedRectangleBorder

   

   ElevatedButton(
     onPressed: () {},
     child: Text('Button'),
     style: ElevatedButton.styleFrom(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(12), // <-- Radius
       ),
     ),
   )

3. Utilisation de CircleBorder

   

   ElevatedButton(
     onPressed: () {},
     child: Text('Button'),
     style: ElevatedButton.styleFrom(
       shape: CircleBorder(),
       padding: EdgeInsets.all(24),
     ),
   )

4. Utilisation de BeveledRectangleBorder

   

   ElevatedButton(
     onPressed: () {},
     child: Text('Button'),
     style: ElevatedButton.styleFrom(
       shape: BeveledRectangleBorder(
         borderRadius: BorderRadius.circular(12)
       ),
     ),
   )

---

OutlinedButton

1. Utilisation de StadiumBorder

   

   OutlinedButton(
     onPressed: () {},
     child: Text('Button'),
     style: OutlinedButton.styleFrom(
       shape: StadiumBorder(),
     ),
   )

2. Utilisation de RoundedRectangleBorder

   

   OutlinedButton(
     onPressed: () {},
     child: Text('Button'),
     style: OutlinedButton.styleFrom(
       shape: BeveledRectangleBorder(
         borderRadius: BorderRadius.circular(12),
       ),
     ),
   )

3. Utilisation de CircleBorder :

   

   OutlinedButton(
     onPressed: () {},
     child: Text('Button'),
     style: OutlinedButton.styleFrom(
       shape: CircleBorder(),
       padding: EdgeInsets.all(24),
     ),
   )

4. Utilisation de BeveledRectangleBorder

   

   OutlinedButton(
     onPressed: () {},
     child: Text('Button'),
     style: OutlinedButton.styleFrom(
       shape: BeveledRectangleBorder(
         borderRadius: BorderRadius.circular(12),
       ),
     ),
   )

---

Bouton de texte

TextButton fonctionne également de manière similaire à ElevatedButton et OutlinedButton Cependant, vous ne pouvez voir les formes que lorsque vous appuyez sur le bouton.

Answer 4

Vous pouvez simplement utiliser RaisedButton

---

Padding(
  padding: EdgeInsets.only(left: 150.0, right: 0.0),
  child: RaisedButton(
    textColor: Colors.white,
    color: Colors.black,
    child: Text("Search"),
    onPressed: () {},
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
)

Sortie :

Plus d'informations : RSCoder

Answer 5

Vous pouvez simplement utiliser RaisedButton ou vous pouvez utiliser InkWell pour obtenir un bouton personnalisé et aussi des propriétés comme onDoubleTap , onLongPress , etc. :

new InkWell(
  onTap: () => print('hello'),
  child: new Container(
    //width: 100.0,
    height: 50.0,
    decoration: new BoxDecoration(
      color: Colors.blueAccent,
      border: new Border.all(color: Colors.white, width: 2.0),
      borderRadius: new BorderRadius.circular(10.0),
    ),
    child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
  ),
),

Si vous voulez utiliser le splashColor et highlightColor les propriétés dans le InkWell utilisez l'option Material comme parent du widget InkWell au lieu de décorer le conteneur (en supprimant la propriété de décoration). Découvrez pourquoi ici .