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


当前回答

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

其他回答

现在我们有一个图标按钮来实现圆形按钮点击和覆盖。但是,背景颜色还不可用,但同样可以通过Circle头像小部件实现,如下所示:

CircleAvatar(
    backgroundColor: const Color(0xffF4F3FA),
    child: IconButton(
        onPressed: () => FlushbarHelper.createInformation(
                             message: 'Work in progress...')
                             .show(context),
        icon: Icon(Icons.more_vert),
    ),
),

你可以使用下面的代码:

ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
      ),
      child: Text("ok"),
    )

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

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

创建圆角按钮最简单的方法之一是使用FlatButton,然后通过设置其shape属性指定圆度。遵循下面的代码

FlatButton ( 填充:EdgeInsets.all (30.0), 颜色:Colors.black, 形状:RoundedRectangleBorder ( borderRadius: BorderRadius.circular (20.0)), child: child: Text( “按钮”, TextStyle(颜色:Colors.white), ), onPressed:() { 打印(“按钮按下”); }, ),

注意:为了改变圆度,调整BorderRadius.circular()中的值