Flutter如何自定义Container边框？仅需左右下边框的疑问与解决方法

Flutter里的Border类本身就是通过分别定义四个方向的BorderSide来构建的，它的构造函数允许你直接指定left、top、right、bottom四个边的样式——不需要单独的only方法，因为你可以直接把不需要的边设为BorderSide.none，本质上和BorderRadius.only的思路一致，只是Border的构造方式更直接。

你可以直接在Border的构造函数中，给需要显示的左、右、底部边框设置样式，顶部边框设为BorderSide.none，同时保留原有的borderRadius配置，代码如下：

Container(
  decoration: BoxDecoration(
    color: Color.fromRGBO(146, 94, 58, 1.0),
    border: Border(
      left: BorderSide(
        color: Color.fromRGBO(85, 63, 48, 1.0),
        width: 2,
      ),
      right: BorderSide(
        color: Color.fromRGBO(85, 63, 48, 1.0),
        width: 2,
      ),
      bottom: BorderSide(
        color: Color.fromRGBO(85, 63, 48, 1.0),
        width: 2,
      ),
      top: BorderSide.none, // 隐藏顶部边框
    ),
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(2),
      bottomRight: Radius.circular(2),
    ),
  ),
)

如果不想重复写BorderSide的配置，也可以先定义一个通用的BorderSide变量简化代码：

final borderSide = BorderSide(
  color: Color.fromRGBO(85, 63, 48, 1.0),
  width: 2,
);

Container(
  decoration: BoxDecoration(
    color: Color.fromRGBO(146, 94, 58, 1.0),
    border: Border(
      left: borderSide,
      right: borderSide,
      bottom: borderSide,
      top: BorderSide.none,
    ),
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(2),
      bottomRight: Radius.circular(2),
    ),
  ),
)

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