如何在颤动中实现具有自定义颜色的自定义点状标签指示器答案

【问题标题】：How to implement custom dot shaped Tab indicator with custom color in flutter如何在颤动中实现具有自定义颜色的自定义点状标签指示器
【发布时间】：2021-06-08 01:16:42
【问题描述】：

我想实现点状标签指示器。（即小圆圈）如下图所示，带有自定义颜色。

Refer this image

请在这方面提供帮助。

【问题讨论】：

使用自定义小部件扩展装饰。
如何实现这个
将在下面发布简短的答案。

标签： android flutter flutter-layout tabbar

【解决方案1】：

您可以创建一个单独的小部件，将颜色和半径作为参数来实现这一点。

As Referred from here

indicator 参数需要一个装饰，所以我们应该创建一个 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),

【讨论】：

【解决方案2】：

如果你想减轻你的工作，那么你可以使用this包，通过使用这个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"),
      ],
    );
  }

【讨论】：

不用担心@karthika