创建一个带有圆形边框的按钮[重复]答案

【问题标题】：Create a button with rounded border [duplicate]创建一个带有圆形边框的按钮[重复]
【发布时间】：2018-10-09 12:54:57
【问题描述】：

您如何将FlatButton 制作成带有圆形边框的按钮？我有使用RoundedRectangleBorder 的圆形边框形状，但不知何故需要为边框着色。

new FlatButton(
  child: new Text("Button text),
  onPressed: null,
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)

带有圆形按钮的按钮外观示例：

【问题讨论】：

标签： flutter

【解决方案1】：

使用StadiumBorder 形状

大纲按钮( onPressed: () {}, 孩子：文本（“关注”）， borderSide: BorderSide(颜色: Colors.blue), 形状：体育场边界（）， )

【讨论】：

对于任何不知道的人来说，StadiumBorder 是一个末端带有半圆形的盒子（我猜就像体育场的轨道）
你也可以试试这个：shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),

【解决方案2】：

使用OutlinedButton 而不是FlatButton。

OutlinedButton(
  onPressed: null,
  style: ButtonStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
  child: const Text("Button text"),
);

【讨论】：

在“按钮文本”之后错过了结束引号
@RemiRousselet 如何更改边框颜色？
@Hasen 好吧，使用相同的逻辑，我们可以将MaterialButton 用于所有内容
@Farhana，设置 OulinedButton 的边框颜色，使用它的属性borderSide: BorderSide(color: Colors.blue)
FlatButton、RaisedButton 和 OutlineButton 已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。

【解决方案3】：

如果您不想使用OutlineButton 并想坚持正常的RaisedButton，您可以将按钮包裹在ClipRRect 或ClipOval 中，例如：

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

【讨论】：

【解决方案4】：

FlatButton(
          onPressed: null,
          child: Text('Button', style: TextStyle(
              color: Colors.blue
            )
          ),
          textColor: MyColor.white,
          shape: RoundedRectangleBorder(side: BorderSide(
            color: Colors.blue,
            width: 1,
            style: BorderStyle.solid
          ), borderRadius: BorderRadius.circular(50)),
        )

【讨论】：

FlatButton、RaisedButton 和 OutlineButton 已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。

【解决方案5】：

所以我使用了完整的样式和边框颜色，如下所示：

new OutlineButton(
    shape: StadiumBorder(),
    textColor: Colors.blue,
    child: Text('Button Text'),
    borderSide: BorderSide(
        color: Colors.blue, style: BorderStyle.solid, 
        width: 1),
    onPressed: () {},
)

【讨论】：

简单优雅的解决方案！

【解决方案6】：

要实现带有边框颜色的圆角边框按钮，请使用此

OutlineButton(
                    child: new Text("Button Text"),borderSide: BorderSide(color: Colors.blue),
                    onPressed: null,
                    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0))
                ),

【讨论】：

【解决方案7】：

new OutlineButton(  
 child: new Text("blue outline") ,
   borderSide: BorderSide(color: Colors.blue),
  ),

// this property adds outline border color

【讨论】：

如果有人想知道为什么颜色没有出现，在我的例子中是因为你需要传递一个 onPress 而不是 null。