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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Используйте форму StadiumBorder

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

Ответ 3

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

// this property adds outline border color

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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)),
        )

Ответ 7

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

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