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


当前回答

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

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

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

其他回答

你可以使用下面的代码:

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

如果你使用材质应用程序作为你的主小部件,你总是可以使用材质按钮。

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
    shadowColor: Colors.lightBlueAccent.shade100,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){//Actions here//},
      color: Colors.lightBlueAccent,
      child: Text('Log in', style: TextStyle(color: Colors.white),),
    ),
  ),
)

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

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

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

使用Flutter版本2,请尝试以下操作

ElevatedButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
                side:
                    BorderSide(width: 1.0, color: Colors.red,
                borderRadius:
                    BorderRadius.circular(5.0),),),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
        elevation:
            MaterialStateProperty.all<double>(8.0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            const EdgeInsets.symmetric(
                horizontal: 15.0,
                vertical: 10.0),),),
    onPressed: (){},
    child: Text('Button'),)