如何在Flutter Tabs中添加圆点作为指标？

Question

我们希望生成以下布局作为Flutter中的“滚动选项卡”：

我尝试使用indicatorTabBar的属性将指示器自定义为绿点。THE indicator属性接受Decoration继承的Widget可能有BoxDecoration，ShapeDecoration并UnderlineTabDecoration作为选项。

双方BoxDecoration并ShapeDecoration环绕标签内容，因此难以添加选项卡下一个循环。UnderlineTabDecoration没有提供任何使边缘变圆和自定义宽度的方法。

我能想到的最好的是：

TabBar(
          controller: _controller,
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0, ),
          insets: EdgeInsets.symmetric(horizontal:36.0)
        ),

          isScrollable: true,
          tabs: <Widget>[
            Tab(text: 'Week 1',),
            Tab(text: 'Week 2',),
            Tab(text: 'Week 3',),
            Tab(text: 'Week 4',),
            Tab(text: 'Week 5',),
            Tab(text: 'Week 6',),
            Tab(text: 'Week 7',),
            Tab(text: 'Week 8',),

          ],
        ),

结果如下：

如何在Flutter TabBar中添加圆点作为指标？

Answer 1

作为选择

这是一个如何使用它的示例，您可以将CircleTabIndicator导入项目并根据需要进行修改

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Title')),
        body: DefaultTabController(
          length: 3,
          child: TabBar(
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: CircleTabIndicator(color: Colors.green, radius: 4),
            isScrollable: true,
            labelColor: Colors.black,
            tabs: <Widget>[
              Tab(text: 'Week 1'),
              Tab(text: 'Week 2'),
              Tab(text: 'Week 3'),
            ],
          ),
        ),
      ),
    );
  }
}

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);
    canvas.drawCircle(circleOffset, radius, _paint);
  }
}