如何在flutter中实现带有自定义颜色的自定义圆点形状Tab指示器

Question

我想实现圆点形制表符． (即小圆圈)，如下图，自定义颜色。

参考图片

请帮帮我。

Answer 1

如果您想简化您的工作，那么您可以使用这个包，并且通过使用这个package，您可以自定义选项卡indicator。

这里的下面是我在我的一个项目中使用的相同的示例Code，并将通过点indicator获得所需的结果。

参见下面代码中的indicator部分:-

buildTabBarContent() {
return TabBar(
isScrollable: true,
labelColor: Colors.black,
indicator: DotIndicator(
color: Colors.black,
distanceFromCenter: 16,
radius: 3,
paintingStyle: PaintingStyle.fill,
),
tabs: [
Tab(
text: "All",
),
Tab(text: "Football"),
Tab(
text: "Tennis",
),
Tab(text: "Basketball"),
Tab(text: "Cricket"),
Tab(text: "Cricket"),
Tab(text: "Cricket"),
],
);
}

Answer 2

你可以创建一个颜色为&半径作为参数来实现这个

As reference from here

指示器参数需要一个装饰，所以我们应该创建一个BoxPainter

import 'package:flutter/material.dart';
class CircleTabIndicator extends Decoration {
final BoxPainter _painter;
CircleTabIndicator({@required Color color, @required double radius})
: _painter = _CirclePainter(color, radius);
@override
BoxPainter createBoxPainter([onChanged]) => _painter;
}
class _CirclePainter extends BoxPainter {
final Paint _paint;
final double radius;
_CirclePainter(Color color, this.radius)
: _paint = Paint()
..color = color
..isAntiAlias = true;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
final Offset circleOffset =
offset + Offset(cfg.size.width / 2, cfg.size.height - radius - 5);
canvas.drawCircle(circleOffset, radius, _paint);
}

}

使用

indicator: CircleTabIndicator(color: Colors.white, radius: 3),