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


当前回答

下面是解决问题的代码。你只需要在盒子装饰中取一个有边界半径的简单容器。

new Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
        color: Colors.blue,
    ),

    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Padding(
                padding: const EdgeInsets.all(10.0),
                child: new Text(
                    "Next",
                    style: new TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Colors.white,
                        fontSize: 15.0,
                    ),
                ),
            ),
        ],
    ),
),

其他回答

你可以简单地使用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小部件的父部件,而不是装饰容器(删除装饰属性)。在这里阅读原因。

您可以简单地使用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

在容器小部件中包装一个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 "),
  ),
)

试试这个:

SizedBox(
  height: 40.0,
  child: MaterialButton(
    child: Text("Button"),
    color: Colors.blue,
    disabledColor: Colors.blue,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(10.0), // Change your border radius here
      ),
    ),
    onPressed: () {},
  ),
),

另一个很酷的解决方案在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');
    },
),