如何在 flutter 中使用自定義顏色實現自定義點狀 Tab 指示器

Question

我想實現點形標簽指示器。 （即小圓圈）如下圖所示，自定義顏色。

參考這張圖片

請在這方面提供幫助。

Answer 1

您可以使用顏色和半徑作為參數創建一個單獨的小部件來實現此目的。

從這里提到

指標參數需要一個裝飾，所以我們應該創建一個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),

Answer 2

如果您想簡化工作，那么您可以使用這個package，通過使用這個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"),
      ],
    );
  }