Flutter中如何为输入框设置StadiumBorder边框

Flutter的TextField默认只支持UnderlineInputBorder和OutlineInputBorder，但我们可以通过两种实用方法实现StadiumBorder（两端圆角的胶囊形）样式的输入框边框：

方法一：自定义InputBorder（推荐，贴合原生输入框行为） #

直接继承InputBorder实现自定义的StadiumInputBorder，完美适配输入框聚焦、失焦等状态变化：

class StadiumInputBorder extends InputBorder {
  const StadiumInputBorder({
    BorderSide side = const BorderSide(),
  }) : super(side: side);

  @override
  StadiumInputBorder copyWith({BorderSide? side}) {
    return StadiumInputBorder(side: side ?? this.side);
  }

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return StadiumBorder().getInnerPath(rect.deflate(side.width), textDirection: textDirection);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return StadiumBorder().getOuterPath(rect, textDirection: textDirection);
  }

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    final paint = side.toPaint();
    final path = getOuterPath(rect, textDirection: textDirection);
    canvas.drawPath(path, paint);
  }

  @override
  bool get isOutline => true;
}

使用时直接在TextField的decoration中指定边框：

TextField(
  decoration: InputDecoration(
    border: const StadiumInputBorder(),
    focusedBorder: StadiumInputBorder(
      side: BorderSide(color: Colors.blue, width: 2),
    ),
    hintText: "请输入内容",
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  ),
)

方法二：用Container包裹TextField（快速实现） #

如果不想自定义边框类，可通过Container的装饰模拟，隐藏TextField默认边框：

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    shape: StadiumBorder(),
  ),
  child: TextField(
    decoration: InputDecoration(
      border: InputBorder.none,
      hintText: "请输入内容",
      contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  ),
)

两种方法对比：

• 自定义InputBorder能更好联动TextField的状态（如聚焦、错误态），样式更统一；
• Container包裹的方式代码简洁，适合快速原型开发。

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