如果你想使用MaterialButton，

=======================================

你可以添加RoundedRectangleBorder，就像这样，

MaterialButton(
  onPressed: () {},
  minWidth: MediaQuery.of(context).size.width * 0.4,
  height: 34,
  color: colorWhite,
  highlightColor: colorSplash,
  splashColor: colorSplash,
  visualDensity: VisualDensity.compact,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
    side: BorderSide(
      color: colorGrey,
      width: 0.6,
    ),
  ),
  child: Text("CANCEL"),
),

你也可以使用ButtonTheme():

下面是示例代码

ButtonTheme(
    minWidth: 200.0,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.green)),
    child: RaisedButton(
        elevation: 5.0,
        hoverColor: Colors.green,
        color: Colors.amber,
        child: Text(
            "Place Order",
            style: TextStyle(
                     color: Colors.white, fontWeight: FontWeight.bold),
        ),
        onPressed: () {},
    ),
),

你可以简单地使用RaisedButton或你可以使用InkWell来获得一个自定义按钮和属性，如onDoubleTap, onLongPress等:

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

如果你想在InkWell小部件中使用splashColor和highlightColor属性，使用Material小部件作为InkWell小部件的父部件，而不是装饰容器(删除装饰属性)。在这里阅读原因。

在容器小部件中包装一个TextButton，如下所示:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(5),
    border: Border.all(color: Colors.black),
  ),
  child: TextButton(
    onPressed: () {
      // To do
    },
    child: Text("Go to Change Language Screen "),
  ),
)

新的提升按钮

风格

customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
    ),
    primary: color,
);

Icon

Widget saveIcon() => iconsStyle1(
    Icons.save,
);

// Common icon style

iconsStyle1(icon) => Icon(
    icon,
    color: white,
    size: 15,
);

按钮使用

ElevatedButton.icon(
    icon: saveIcon(),
    style:
        customElevatedButton(color: Colors.green[700]),
    label: Text('Save',
        style: TextStyle(color: Colors.white)),
    onPressed: () {
    },
),

更新

由于左侧按钮现在已弃用，请使用右侧按钮。

Deprecated    -->   Recommended

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

ElevatedButton

Using StadiumBorder ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom(shape: StadiumBorder()), ) Using RoundedRectangleBorder ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), // <-- Radius ), ), ) Using CircleBorder ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), ) Using BeveledRectangleBorder ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12) ), ), )

OutlinedButton

Using StadiumBorder OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: StadiumBorder(), ), ) Using RoundedRectangleBorder OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), ) Using CircleBorder: OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), ) Using BeveledRectangleBorder OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )

TextButton

TextButton也类似于ElevatedButton和OutlinedButton，但是，你只能看到按钮按下的形状。