flutter - 如何在 Flutter Tabs 中添加圆点作为指示器？

Question

我们希望在 Flutter 中生成以下布局作为滚动选项卡:

我尝试使用 TabBar 的 indicator 属性将指示器自定义为绿点。 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);
  }
}