Question

我目前正在Flutter开发Android应用。如何添加圆角按钮？

Answer 1

您可以使用RaisedButton小部件。 Raised Button Widget具有shape属性，您可以使用它，如下面的代码段所示。

 new RaisedButton(
          child: new Text("Press Me"),
          onPressed: null,
          shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
        )

Answer 2

您可以为FlatButton和RaisedButton使用形状。

用于圆形按钮：

shape: RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)
),

用于方形按钮：

shape: RoundedRectangleBorder(
           borderRadius: new BorderRadius.circular(0.0),
           side: BorderSide(color: Colors.red)
),

Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)),
        color: Colors.white,
        textColor: Colors.red,
        padding: EdgeInsets.all(8.0),
        onPressed: () {},
        child: Text(
          "Add to Cart".toUpperCase(),
          style: TextStyle(
            fontSize: 14.0,
          ),
        ),
      ),
      SizedBox(width: 10),
      RaisedButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)),
        onPressed: () {},
        color: Colors.red,
        textColor: Colors.white,
        child: Text("Buy now".toUpperCase(),
            style: TextStyle(fontSize: 14)),
      ),
    ],   
)

Answer 3

您只需使用RaisedButton，或者您可以使用InkWell获取自定义按钮以及onDoubleTap，onLongPress和etc等属性。：

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

如果您想在splashColor小部件中使用highlightColor，InkWell属性，请使用Material小部件作为InkWell小部件的父级，而不是装饰容器（删除装修财产）。 Read why? here

Answer 4

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

输出：

Answer 5

有很多方法可以做到这一点。我在这里列出一些。

（1）使用RoundedRectangleBorder

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () {},
  child: Text("Button"),
)

（2）使用ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

（3）使用ClipOval

ClipOval(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

（4）使用ButtonTheme

ButtonTheme(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

（5）使用StadiumBorder

RaisedButton(
  shape: StadiumBorder(),
  onPressed: () {},
  child: Text("Button"),
)

Answer 6

创建圆形按钮的不同方法如下：

形状为 RoundedRectangleBorder 的 FlatButton 按钮

FlatButton(
    minWidth: 260,
    height: 60,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)),
    color: Colors.white,
    textColor: Colors.red,
    padding: EdgeInsets.all(8.0),
    onPressed: () {},
    child: Text(
        "Add to Cart".toUpperCase(),
        style: TextStyle(
            fontSize: 14.0,
        ),
    ),
),

形状为 RoundedRectangleBorder 的 RaisedButton 按钮

RaisedButton(
    padding:
    EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(28.0),
        side: BorderSide(color: Colors.red)),
    onPressed: () {},
    color: Colors.red,
    textColor: Colors.white,
    child: Text("Buy now".toUpperCase(),
    style: TextStyle(fontSize: 14)),
),

带形状 StadiumBorder() 的凸起按钮

RaisedButton(
    padding:
    EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
    shape: StadiumBorder(),
    onPressed: () {},
    child: Text("Button"),
)

带有 ClipRRect 的 RaisedButton 按钮

ClipRRect(
    borderRadius: BorderRadius.circular(40),
    child: RaisedButton(
        padding: EdgeInsets.only(
            left: 100, right: 100, top: 20, bottom: 20),
        onPressed: () {},
        child: Text("Button"),
    ),
)

带有 ClipOval 的凸起按钮

ClipOval(
    child: RaisedButton(
        onPressed: () {},
        child: Text("Button"),
    ),
),

带有 ButtonTheme 的 RaisedButton 按钮

ButtonTheme(
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20)),
    child: RaisedButton(
        onPressed: () {},
        child: Text("Button"),
    ),
)

圆形按钮的实际演示可以在下面的 dartpad 链接中找到：

Rounded Button Demo Examples on DartPad

Answer 7

您也可以使用StadiumBorder shape

FlatButton(
  onPressed: () {},
  child: Text('StadiumBorder'),
  shape: StadiumBorder(),
  color: Colors.pink,
  textColor: Colors.white,
),

Answer 8

要在您的Button中使用任何形状，请确保您执行Button小部件中的所有代码

 **shape: RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red) ),**

如果要使其成为Square，则使用`BorderRadius.circular（0.0），它将自动变为Square

像这样的按钮`

这是给定UI屏幕的所有源代码

 Scaffold(
    backgroundColor: Color(0xFF8E44AD),
    body: new Center(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
            padding: new EdgeInsets.only(top: 92.0),
            child: Text(
              "Currency Converter",
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(),
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "Amount",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "From",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                  filled: true,
                  fillColor: Colors.white,
                  labelText: "To",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  )),
            ),
          ),
          SizedBox(height: 20.0),
          MaterialButton(
            height: 58,
            minWidth: 340,
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(12)),
            onPressed: () {},
            child: Text(
              "CONVERT",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            color: Color(0xFFF7CA18),
          ),
        ],
      ),
    ),
  ),
);

Answer 9

您应该熟悉这个文档的页面：rounding corners。

如果您已经熟悉，那么文档将向您展示如何在css中更改组件的样式和等效样式。

Answer 10

您可以通过将透明颜色传递到BoxDecoration内的color属性来将此代码用于透明的圆形按钮。例如。 color: Colors.transparent。另外，请注意，此按钮仅使用Container和GestureDetector小部件。

Container(
    height: 50.0,
    child: GestureDetector(
        onTap: () {},
        child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Center(
                        child: Text(
                           "BUTTON",
                            style: TextStyle(
                                color: Color(0xFFF05A22),
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

Answer 11

新的提升按钮

风格

customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
    ),
    primary: color,
);

图标

Widget saveIcon() => iconsStyle1(
    Icons.save,
);

// Common icon style

iconsStyle1(icon) => Icon(
    icon,
    color: white,
    size: 15,
);

按钮使用

ElevatedButton.icon(
    icon: saveIcon(),
    style:
        customElevatedButton(color: Colors.green[700]),
    label: Text('Save',
        style: TextStyle(color: Colors.white)),
    onPressed: () {
    },
),

Answer 12

addButton() {
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      child: SizedBox(
        height: 45,
        width: 200,
        child: ElevatedButton.icon(
          onPressed: () async {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  )),
            elevation: MaterialStateProperty.all(1),
            backgroundColor: MaterialStateProperty.all(Colors.blue),
          ),
          icon: Icon(Icons.add, size: 18),
          label: Text("Add question"),
        ),
      ),
    ),
  ],
);

}

Answer 13

您可以使用以下代码制作带有渐变颜色的圆形按钮。

 Container(
          width: 130.0,
          height: 43.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.9],
              colors: [
                // Colors are easy thanks to Flutter's Colors class.
                Color(0xff1d83ab),
                Color(0xff0cbab8),
              ],
            ),
          ),
          child: FlatButton(
            child: Text(
              'Sign In',
              style: TextStyle(
                fontSize: 16.0,
                fontFamily: 'Righteous',
                fontWeight: FontWeight.w600,
              ),
            ),
            textColor: Colors.white,
            color: Colors.transparent,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            onPressed: () {

            },
          ),
        );

Answer 14

如果将Material App用作主窗口小部件，则可以始终使用Material按钮。

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

Answer 15

自2020年9月起，抖动1.22.0：

Both "RaisedButton" and "FlatButton" are deprecated.

最新的解决方案是使用3个新按钮：

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。

Answer 16

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

FlatButton(
  padding: EdgeInsets.all(30.0),
  color: Colors.black,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0)),
  child: child: Text(
    "Button",
    style: TextStyle(color: Colors.white),
  ),
  onPressed: () {
    print('Button pressed');
  },
),

注意：要更改圆度，请调整BorderRadius.circular()
中的值

Answer 17

改用 TextButton。

据说 FlatButton、RaisedButton 和 OutlineButton 等按钮自 2020 年 10 月起已被弃用。这是 Flutter 开发团队为简化 Flutter API 并使之保持一致所做的努力之一，您可以使用 style 属性自定义其样式。< /p>

      TextButton(
        child: Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          child: Text('Text here',
              style: TextStyle(
                  color: Colors.teal,
                  fontSize: 14,
                  fontWeight: FontWeight.w500)),
        ),
        style: TextButton.styleFrom(
          primary: Colors.teal,
          onSurface: Colors.yellow,
          side: BorderSide(color: Colors.teal, width: 2),
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(25))),
        ),
        onPressed: () {
          print('Pressed');
        },
      ),

Answer 18

将 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 "),
  ),
)

Answer 19

另一个适用于 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');
    },
),

Answer 20

你可以使用这个样式让你的高架按钮变成圆形

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

Answer 21

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

并使用相同的半径。

Answer 22

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

Answer 23

现在，我们有了“图标按钮”来实现圆形的按钮单击和覆盖。但是，背景色尚不可用，但可以通过Circle头像小部件实现以下相同的颜色：

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

希望这对某些人有帮助。

Answer 24

您可以创建一个自定义视图并将其放在GestureDetector中，使其表现得像按钮一样。好处是您可以为容器提供各种类型的自定义装饰（包括使其以指定的半径变圆）。

Answer 25

RaisedButton(
          child: Text("Button"),
          onPressed: (){},
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
          side: BorderSide(color: Colors.red))
        )

Answer 26

这是您遇到的问题的代码，您只需要在boxdecoration中使用带有边框半径的简单容器即可。

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

Answer 27

这是另一种解决方案

 Container(
                    height: MediaQuery.of(context).size.height * 0.10,
                    width: MediaQuery.of(context).size.width,
                    child: ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width * 0.75,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            side: BorderSide(color: Colors.blue)),
                        onPressed: () async {
                           // do something 
                        },
                        color: Colors.red[900],
                        textColor: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("Button Text,
                              style: TextStyle(fontSize: 24)),
                        ),
                      ),
                    ),
                  ),

Answer 28

如果有人正在寻找比我这样实现的完整圆形按钮。

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

Answer 29

在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"),
)

在Flutter中创建一个带有border-radius的圆角按钮/按钮

29 个答案:

Rounded Button Demo Examples on DartPad

新的提升按钮

风格

图标

按钮使用

最新的解决方案是使用3个新按钮：

1。 `ElevatedButton`：

2。 `OutlinedButton`：

3。 `TextButton`：

在Flutter中创建一个带有border-radius的圆角按钮/按钮

29 个答案:

Rounded Button Demo Examples on DartPad

新的提升按钮

风格

图标

按钮使用

最新的解决方案是使用3个新按钮：

1。 ElevatedButton：

2。 OutlinedButton：

3。 TextButton：

1。 `ElevatedButton`：

2。 `OutlinedButton`：

3。 `TextButton`：