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


当前回答

你可以使用这个样式为你的elevatedButton使它成为圆形

style: ButtonStyle(
              elevation: MaterialStateProperty.all(8.0),
              backgroundColor:
                  MaterialStateProperty.all(Constants().orangeColor),
              textStyle: MaterialStateProperty.all(
                TextStyle(
                  fontSize: 16.0,
                ),
              ),
              shape: MaterialStateProperty.all<CircleBorder>(
                CircleBorder(),
              ),
              shadowColor: MaterialStateProperty.all(Constants().orangeColor),
            ),

其他回答

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

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

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

     Container(
        width: yourWidth,
        height: yourHeight ,
        decoration: BoxDecoration(
            borderRadius: radius,
            gradient: yourGradient,
            border: yourBorder),
        child: FlatButton(
          onPressed: {} (),
          shape: RoundedRectangleBorder(borderRadius: radius),
    .......

用同样的半径。

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

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

在新的更新颤振3.0颤振使用材料3指南。

根据它,按钮的默认边框被四舍五入。

默认按钮

  ElevatedButton(
          onPressed: () {}, child: const Text("Default Button ")),

边界半径为零的按钮

 ElevatedButton(
          style: ElevatedButton.styleFrom(
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.zero)),
          onPressed: () {},
          child: const Text("Border Radius Zero ")),

带有自定义边界半径的按钮

  ElevatedButton(
          style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50))),
          onPressed: () {},
          child: const Text("Border Radius Custom ")),

注意:你可以对FilledButton, TextButton等使用相同的逻辑。

按钮样式请参考https://m3.material.io/components/all-buttons。

如果有人正在寻找完整的圆形按钮,那么我实现它的方式:

Center(
            child: SizedBox.fromSize(
              size: Size(80, 80), // Button width and height
              child: ClipOval(
                child: Material(
                  color: Colors.pink[300], // Button color
                  child: InkWell(
                    splashColor: Colors.yellow, // splash color
                    onTap: () {}, // Button pressed
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.linked_camera), // Icon
                        Text("Picture"), // Text
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )