如何获取输入字段的 StadiumBorder - flutter

Question

提供了

StadiumBorder

作为可与按钮或DecorationBox等一起使用的形状。但对于输入字段，只有

UnderlineInputBorder

和

OutlineInputBorder

。你如何获得体育场边界轮廓？

Answer 1

截至目前，框架中还没有内置开箱即用的解决方案，您必须自己制作。

这是我的

StadiumInputBorder

的实现。这应该有帮助：

@immutable
class StadiumInputBorder extends InputBorder {
  const StadiumInputBorder({
    super.borderSide = const BorderSide(),
  });

  @override
  bool get isOutline => true;

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

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

  @override
  ShapeBorder scale(double t) => StadiumBorder(side: borderSide.scale(t));

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    final Radius radius = Radius.circular(rect.shortestSide / 2.0);
    final RRect borderRect = RRect.fromRectAndRadius(rect, radius);
    final RRect adjustedRect = borderRect.deflate(borderSide.strokeInset);
    return Path()..addRRect(adjustedRect);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final Radius radius = Radius.circular(rect.shortestSide / 2.0);
    return Path()..addRRect(RRect.fromRectAndRadius(rect, radius));
  }

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    switch (borderSide.style) {
      case BorderStyle.none:
        break;
      case BorderStyle.solid:
        final Radius radius = Radius.circular(rect.shortestSide / 2);
        final RRect borderRect = RRect.fromRectAndRadius(rect, radius);
        canvas.drawRRect(borderRect.inflate(borderSide.strokeOffset / 2), borderSide.toPaint());
    }
  }
}