如何为 Flutter 中的 OutlineButton 制作带下划线的边框

Question

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

Answer 1

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

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

Answer 2

修复。 我将其更改为 flatbutton 并将小部件包装在 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;});
        },
    ),
),