Créez un bouton avec une bordure arrondie

Question

Comment ferais-tu un FlatButton en un bouton avec une bordure arrondie ? J'ai la forme de la bordure arrondie en utilisant RoundedRectangleBorder mais il faut en quelque sorte colorer la bordure.

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

Exemple de l'aspect d'un bouton arrondi :

Answer 1

Utilisez OutlinedButton au lieu de FlatButton .

OutlinedButton(
  onPressed: null,
  style: ButtonStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
  child: const Text("Button text"),
);

Answer 2

FlatButton(
          onPressed: null,
          child: Text('Button', style: TextStyle(
              color: Colors.blue
            )
          ),
          textColor: MyColor.white,
          shape: RoundedRectangleBorder(side: BorderSide(
            color: Colors.blue,
            width: 1,
            style: BorderStyle.solid
          ), borderRadius: BorderRadius.circular(50)),
        )

Answer 3

Utilisez StadiumBorder forma

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

Answer 4

J'ai donc fait le mien avec le style complet et les couleurs de la bordure comme ceci :

new OutlineButton(
    shape: StadiumBorder(),
    textColor: Colors.blue,
    child: Text('Button Text'),
    borderSide: BorderSide(
        color: Colors.blue, style: BorderStyle.solid, 
        width: 1),
    onPressed: () {},
)

Answer 5

new OutlineButton(  
 child: new Text("blue outline") ,
   borderSide: BorderSide(color: Colors.blue),
  ),

// this property adds outline border color