标签下的Flutter自定义标签指示符

Question

在扑朔迷离中，我想在标签下使用此自定义标签指示符，例如此屏幕快照

在Flutter中，如何像下面的图像一样绘制边框半径选项卡指示器？

在此处输入图像描述

下面的代码只能绘制我在github中找到的圆圈指示器。

TabBar(
  isScrollable: true,
  controller: _tabController,
  labelColor: Colors.black,
  tabs: <Widget>[
    Tab(
      text: 'DOTTED',
    ),
    Tab(
      text: 'Tab',
    ),
    Tab(
      text: 'INDICATOR',
    ),
  ],
  indicator: DotIndicator(
    indicatorColor: Colors.black,
    radius: 3,
  ),
  indicatorWeight: 2 * kDefaultDotIndicatorRadius,
),

library：

const kDefaultDotIndicatorRadius = 3.0;

class DotTabIndicator extends Decoration {
  const DotTabIndicator({this.indicatorColor, this.radius = kDefaultDotIndicatorRadius});

  final Color indicatorColor;
  final double radius;

  @override
  BoxPainter createBoxPainter([onChanged]) {
    return _DotPainter(this, onChanged);
  }
}

class _DotPainter extends BoxPainter {
  _DotPainter(this.decoration, VoidCallback onChanged) : super(onChanged);

  final DotTabIndicator decoration;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final center = configuration.size.center(offset);
    final dy = configuration.size.height;

    final newOffset = Offset(center.dx, dy - 8);

    final paint = Paint();
    paint.color = decoration.indicatorColor;
    paint.style = PaintingStyle.fill;

    canvas.drawCircle(newOffset, decoration.radius, paint);
  }
}

Answer 1

仅使用md2_tab_indicator创建相似的指标