How to add a circular dot as an indicator in Flutter Tabs?

问题

We wish to generate the following layout as Scrolling Tabs in Flutter:

I tried using indicator property of TabBar to customise the indicator to green dot. THE indicator property takes a Decoration inherited Widget which may have BoxDecoration, ShapeDecoration and UnderlineTabDecoration as options.

Both BoxDecoration and ShapeDecoration surround the Tab content hence make it difficult to add a circle below the tab. UnderlineTabDecoration doesn't provide any methods to round the edges and customize the width.

The best I could come up with was:

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',),

          ],
        ),

which results in following look:

How can I add Circular Dot as an Indicator in Flutter TabBar?

回答1:

as an option

here is an example how to use it, you can bring CircleTabIndicator into your project and modify it as you wish

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);
  }
}

回答2:

I think you don't need to override anything. You can just give the tab a child instead of a text like this:

Tab(
  child: Column(
    children: <Widget>[
      Text('Week 6'),
      Icon(Icons.trip_origin, color: Colors.green, size: 1,)
    ],
  ),
),

you can change the Icon with any widget you want.

来源：https://stackoverflow.com/questions/57889326/how-to-add-a-circular-dot-as-an-indicator-in-flutter-tabs

标签

Flutter

dart

flutter-layout