Создать кнопку с закругленной границей

Question

Как бы вы превратили FlatButton в кнопку с закругленной границей? У меня есть округленная форма границы, используя RoundedRectangleBorder, но каким-то образом нужно покрасить границу.

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

Пример того, как будет выглядеть кнопка с закругленной кнопкой:

Answer 1

Итак, я сделал мой с полным стилем и цветами окантовки, как это:

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

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

Если вы не хотите использовать OutlineButton и хотите придерживаться обычного RaisedButton, вы можете заключить вашу кнопку в ClipRRect или ClipOval как:

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

Answer 4

Использование StadiumBorder форма

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

Answer 5

Для реализации кнопки с закругленными краями и цвета рамки используйте эту

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

Answer 6

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

// this property adds outline border color

Answer 7

Используйте OutlineButton вместо FlatButton.

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