Flutter TabIndicator 自定义设计

Question

如何获得 TabIndicator 的右上角和左上角圆角？

Answer 1

我创建了一个自定义绘画

TabBar(
  indicator: MyCustomIndicator(color: Colors.red, height: 10, radius: 10),
  ...  
)

自定义画图

class MyCustomIndicator extends Decoration {
  final BoxPainter _painter;

  MyCustomIndicator(
      {@required Color color, @required double height, @required double radius})
      : _painter = _IndicatorPainter(color, height, radius);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _IndicatorPainter extends BoxPainter {
  final Paint _paint;
  final double radius;
  final double height;

  _IndicatorPainter(Color color, this.height, this.radius)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Rect rect = (offset + Offset(0, cfg.size.height - height) &
        Size(cfg.size.width, height));

    canvas.drawRRect(
      RRect.fromRectAndCorners(rect,
          topLeft: Radius.circular(radius), topRight: Radius.circular(radius)),
      _paint,
    );
  }
}

Flutter TabIndicator 自定义设计

Flutter TabIndicator custom design

tabbar

flutter