在 Flutter 中创建一个带边框半径的圆形按钮/按钮答案

【问题标题】：在 Flutter 中创建一个带边框半径的圆形按钮/按钮
【发布时间】：2018-10-04 02:39:32
【问题描述】：

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

【问题讨论】：

你可以使用RaisedButton或InkWell
这里已经提到了多种方式mightytechno.com/rounded-button-flutter

标签： flutter dart rounded-corners border-radius

【解决方案1】：

您可以使用ElevatedButton 小部件。提升的按钮小部件有一个 shape 属性，您可以使用它，如下面的 sn-p 所示。

ElevatedButton(
      style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                  side: BorderSide(
                      color: Colors.teal, 
                      width: 2.0,
                  ),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),

【讨论】：

RaisedButton 已弃用且不再使用。按照 Peter 的建议，使用带有 ButtonStyle 的高架按钮

【解决方案2】：

您可以使用此代码：

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

【讨论】：

【解决方案3】：

您可以将这种样式用于您的提升按钮，使其成为圆形

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

【讨论】：

【解决方案4】：

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

带有 ElevatedButton.styleFrom 的 ElevatedButton

ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(30.0),
            ),
          ),
          onPressed: () {},
          child:
              Text("Buy now".toUpperCase(), style: TextStyle(fontSize: 14)),
        ),

带有 ButtonStyle 的 ElevatedButton

ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
          ))),
          onPressed: () {},
          child: Text("Submit".toUpperCase()),
        ),

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

Rounded Button Demo Examples on DartPad

【讨论】：

【解决方案5】：

请改用TextButton。

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

      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');
        },
      ),

【讨论】：

您能补充更多解释吗？ TextButton 将如何帮助 OP 解决他们的问题？
FlatButton、RaisedButton 和 OutlineButton 等按钮自 2020 年 10 月起已被弃用。这是 Flutter 开发团队为简化和使 Flutter API 保持一致所做的努力之一，您可以通过以下方式自定义其样式使用样式属性。
你能把这个添加到你的答案中吗？
当然可以，非常感谢...如果您觉得这有帮助，请点赞

【解决方案6】：

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

}

【讨论】：

【解决方案7】：

更新

由于左侧按钮现已弃用，请使用右侧按钮。

Deprecated    -->   Recommended

RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

ElevatedButton

使用 StadiumBorder

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(shape: StadiumBorder()),
)

使用 RoundedRectangleBorder

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // <-- Radius
    ),
  ),
)

使用 CircleBorder

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)

使用 BeveledRectangleBorder

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12)
    ),
  ),
)

`OutlinedButton`

使用 StadiumBorder

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: StadiumBorder(),
  ),
)

使用 RoundedRectangleBorder

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

使用CircleBorder：

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)

使用 BeveledRectangleBorder

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

文本按钮

TextButton 也类似于ElevatedButton 和OutlinedButton，但是您只能在按下按钮时看到形状。

【讨论】：

【解决方案8】：

新的提升按钮

风格

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: () {
    },
),

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

自 2020 年 9 月起，Flutter 1.22.0：

“RaisedButton”和“FlatButton”均已弃用。

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。

【讨论】：

【解决方案11】：

您也可以通过使用StadiumBorder 形状来实现它：

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

现在我们有一个图标按钮来实现圆形按钮的点击和覆盖。但是，背景颜色还没有，但是可以通过 Circle avatar 小部件来实现，如下所示：

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

【讨论】：

【解决方案14】：

这是您的问题的代码。你只需要在 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,
                    ),
                ),
            ),
        ],
    ),
),

【讨论】：

【解决方案15】：

这是另一个解决方案：

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

【讨论】：

【解决方案16】：

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

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

如果你想让它变成方形，使用BorderRadius.circular(0.0)它会自动变成方形。

按钮是这样的：

这里是给出 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),
          ),
        ],
      ),
    ),
  ),
);

【讨论】：

【解决方案17】：

如果有人正在寻找完整的圆形按钮，那么我是这样实现的：

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

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

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

 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: () {

            },
          ),
        );

【讨论】：

【解决方案20】：

如果您将 Material App 用作您的主要小部件，则始终可以使用材质按钮。

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

【讨论】：

【解决方案21】：

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

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

【讨论】：

如果您希望InkWell 剪辑到圆角，那么您还需要将borderRadius: BorderRadius.circular(10.0) 添加到InkWell 小部件，否则它将转到边界矩形的边缘。跨度>
@VictorRendina 我正在寻找一种使涟漪变圆的方法，感谢您的评论。将此添加为对墨水池问题的单独回答，因为许多人没有提到这一点。

【解决方案22】：

1.解决方案总结

FlatButton 和 RaisedButton 已弃用。

因此，您可以将shape 放在style 属性中，用于TextButton 和ElevatedButton。

自 Flutter 2.0 以来有一些变化：

style：属性类型已更改为ButtonStyle
shape：属性类型已更改为MaterialStateProperty<T>

2。圆形按钮

在style 属性中存在shape 属性：

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

方形按钮

对于方形按钮，您可以使用 ElevatedButton 或添加：

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
      side: BorderSide(color: Colors.red)
    )
  )
)

完整示例

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    ),
    SizedBox(width: 10),
    ElevatedButton(
      child: Text(
        "Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)

【讨论】：

此代码有效，但我们不能删除shape: MaterialStateProperty.all<RoundedRectangleBorder>(...) 部分并直接将RoundedRectangleBorder(...) 分配给shape 属性吗？
@fpsColton 当然，事实上我什至无法通过MaterialStateProperty 使用它，只能使用RoundedRectangleBorder(...)。否则我会收到错误消息，如下所示：The argument type 'MaterialStateProperty<RoundedRectangleBorder>' can't be assigned to the parameter type 'OutlinedBorder?'.

【解决方案23】：

将 TextButton 包装在 Container 小部件中，如下面的代码 sn-p：

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

【讨论】：

【解决方案24】：

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

并使用相同的半径。

【讨论】：

【解决方案25】：

创建圆形按钮的最简单方法之一是使用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()里面的值

【讨论】：

【解决方案26】：

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

【讨论】：

【解决方案27】：

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

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。
解释一下。请通过editing your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。

【解决方案28】：

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

【讨论】：

【解决方案29】：

您可以将此代码用于透明圆形按钮，方法是将透明颜色传递给BoxDecoration 内的颜色属性。例如。 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,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

【讨论】：

Rounded Button Demo Examples on DartPad

更新

ElevatedButton

OutlinedButton

文本按钮

新的提升按钮

风格

图标

按钮使用

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

1。 ElevatedButton:

2。 OutlinedButton:

3。 TextButton:

`ElevatedButton`

`OutlinedButton`

1。 `ElevatedButton`:

2。 `OutlinedButton`:

3。 `TextButton`: