Flutter 边框半径 TabBar 指示器

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,
),

图书馆：

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

看看这个

class CustomIndicator extends StatelessWidget {

  var radius = Radius.circular(10);
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Custom Indicator"),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                text: "Hello",
              ),
              Tab(
                text: "Megan",
              ),
            ],
            indicator: ShapeDecoration(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topRight: radius, topLeft: radius)),
              color: Colors.red
            ),
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Container(
              child: Center(
                child: Text("Hello"),
              ),
            ),
            Container(
              child: Center(
                child: Text("Hi"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出：