如何在 Flutter 中仅为 OutlineButton 制作带下划线的边框答案

【问题标题】：How to make an underlined border only for OutlineButton in Flutter如何在 Flutter 中仅为 OutlineButton 制作带下划线的边框
【发布时间】：2020-02-02 15:36:45
【问题描述】：

我正在尝试创建一个按钮，该按钮将在我的图像下方显示彩色边框，但仅在底部。在 OutlineButton 中，它只允许我更改整个边框，而不是它的一侧。谁能帮我！我需要它是一个按钮，因为当用户按下图像时，我正在使用 onPressed(){} 执行从 Colors.transparent 到 Colors.teal 的颜色更改。谢谢！

【问题讨论】：

标签： android-studio flutter dart

【解决方案1】：

您可以使用Border() 简单地在FlatButton 上定义形状属性。

FlatButton(
  height: 50,
  child: Text('All Posts'),
  shape: Border(
    bottom: BorderSide(color: Colors.black, width: 3)
  ),
  onPressed: (){
    print('You selected all posts');
  },
),

【讨论】：

【解决方案2】：

修复它。我将其更改为平面按钮并将小部件包装在 Material() 这让我可以创建一个底部 BorderSide，并将其设置为我的颜色偏好：

bool changeColor = false;

Material(
    shape: Border(
        bottom: BorderSide(
            color: changeColor ? Colors.teal : Colors.transparent, width: 3.0
        )
    ),
    child: FlatButton(
        onPressed: (){
            setState(() {changeColor = !changeColor;});
        },
    ),
),

【讨论】：