web-dev-qa-db-fra.com

Créer un bouton avec une bordure arrondie

Comment feriez-vous une FlatButton en un bouton avec une bordure arrondie? J'ai la forme de bordure arrondie à l'aide de RoundedRectangleBorder mais j'ai besoin de colorer la bordure.

new FlatButton(
  child: new Text("Button text),
  onPressed: null,
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)

Exemple d’apparence d’un bouton avec un bouton arrondi:  image

flutter
14
S.D.

Utilisez OutlineButton au lieu de FlatButton.

new OutlineButton(
  child: new Text("Button text"),
  onPressed: null,
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)
29
Rémi Rousselet
new OutlineButton(  
 child: new Text("blue outline") ,
   borderSide: BorderSide(color: Colors.blue),
  ),

// this property adds outline border color
6
cindy

Pour utiliser le bouton de bordure arrondie avec une couleur de bordure, utilisez ceci 

OutlineButton(
                    child: new Text("Button Text"),borderSide: BorderSide(color: Colors.blue),
                    onPressed: null,
                    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0))
                ),
2
Faris Muhammed

Si vous ne voulez pas utiliser OutlineButton et que vous voulez vous en tenir à RaisedButton normal, vous pouvez envelopper votre bouton dans ClipRRect ou ClipOval comme

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    child: Text("Button"),
    onPressed: () {},
  ),
),
1
CopsOnRoad

Utiliser la forme StadiumBorder

              OutlineButton(
                onPressed: () {},
                child: Text("Follow"),
                borderSide: BorderSide(color: Colors.blue),
                shape: StadiumBorder(),
              )
0
Ahmed