我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?


当前回答

你也可以使用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: () {},
    ),
),

其他回答

您可以使用ElevatedButton小部件。提升的按钮小部件有一个shape属性,您可以使用该属性,如下面的代码片段所示。

ElevatedButton(
      style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                  side: BorderSide(
                      color: Colors.teal, 
                      width: 2.0,
                  ),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),

您可以简单地使用RaisedButton


Padding(
  padding: EdgeInsets.only(left: 150.0, right: 0.0),
  child: RaisedButton(
    textColor: Colors.white,
    color: Colors.black,
    child: Text("Search"),
    onPressed: () {},
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
)

输出:

更多信息:RSCoder

另一个很酷的解决方案在2021年也适用:

TextButton(
    child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text('Follow Us'.toUpperCase()),
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.amber,
        shadowColor: Colors.red,
        elevation: 2,
        textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),)
    ),
    onPressed: () {
        print('Pressed');
    },
),

2020年9月起,Flutter 1.22.0:

“RaisedButton”和“FlatButton”都已弃用。

最新的解决方案是使用新的按钮:

1. ElevatedButton:

代码:

ElevatedButton(
  child: Text("ElevatedButton"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

别忘了,还有一个.icon构造函数可以方便地添加图标:

ElevatedButton.icon(
  icon: Icon(Icons.thumb_up),
  label: Text("Like"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

2. OutlinedButton:

代码:

OutlinedButton.icon(
  icon: Icon(Icons.star_outline),
  label: Text("OutlinedButton"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    side: BorderSide(width: 2.0, color: Colors.blue),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

3. TextButton:

如果你不想要轮廓或颜色填充,你总是可以使用TextButton。

在Flutter中,Container()小部件用于设置小部件的样式。使用Container()小部件,您可以设置任何小部件的边框或圆角。

如果您想设置任何类型的样式和装饰,请将该小部件放到Container()小部件中。这为装饰提供了许多属性。

Container(
  width: 100,
  padding: EdgeInsets.all(10),
  alignment: Alignment.center,
  decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.circular(30)), // Make rounded corner
  child: Text("Click"),
)