如何在Flutter/Dart中仅为TextButton添加顶部和底部边框？

方法一：直接通过ButtonStyle设置边框 #

利用ButtonStyle的side属性，自定义Border对象，仅保留顶部和底部的边框，左右边框设为无：

TextButton(
  onPressed: () {},
  style: ButtonStyle(
    side: MaterialStateProperty.all(
      Border(
        top: BorderSide(color: Colors.black, width: 1), // 顶部边框
        bottom: BorderSide(color: Colors.black, width: 1), // 底部边框
        left: BorderSide.none, // 取消左边框
        right: BorderSide.none, // 取消右边框
      ),
    ),
  ),
  child: Text('Button'),
);

方法二：用Container包裹实现（更灵活的间距控制） #

如果需要调整边框与按钮内容的间距，可以在外层套一个Container，给Container设置上下边框：

Container(
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(color: Colors.black, width: 1),
      bottom: BorderSide(color: Colors.black, width: 1),
    ),
  ),
  padding: EdgeInsets.symmetric(horizontal: 4), // 可选：调整边框与按钮的水平间距
  child: TextButton(
    onPressed: () {},
    style: TextButton.styleFrom(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 按钮内部 padding
      tapTargetSize: MaterialTapTargetSize.shrinkWrap, // 可选：缩小点击区域避免与Container边框重叠
    ),
    child: Text('Button'),
  ),
);

两种方法都可以实现需求，你可以根据实际布局需求选择。

内容的提问来源于stack exchange，提问作者mtical