如何在 Flutter 中创建带边框的圆形按钮？答案

【问题标题】：How to create circular button with border in Flutter?如何在 Flutter 中创建带边框的圆形按钮？
【发布时间】：2021-03-04 08:13:37
【问题描述】：

我发现How to create a circle icon button in Flutter? 有这个代码：

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

效果很好，但我无法插入带颜色的边框。看着https://api.flutter.dev/flutter/painting/CircleBorder-class.html，我找不到任何插入边框的方法。

在 Flutter 的圆形按钮中插入边框最简单的方法是什么？

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以通过将 side 属性应用于 CircleBorder 来设置边框。请参阅下面的代码。

     RawMaterialButton(
      onPressed: () {},
      elevation: 2.0,
      fillColor: Colors.white,
      child: Icon(
        Icons.pause,
        size: 35.0,
      ),
      padding: EdgeInsets.all(15.0),
      shape: CircleBorder(
        side: BorderSide(width: 5, color: Colors.red, style: BorderStyle.solid),
      ),
    );

【讨论】：

【解决方案2】：

以下是设置按钮边框的方法：

shape: CircleBorder(
        side: BorderSide(width: 5.0, style: BorderStyle.solid, color: Colors.red)
      ),

【讨论】：