CODEWITHSUNDEEP
androidflutterflutter-layouttabbar
karthika
karthika

Reputation: 17

How to implement custom dot shaped Tab indicator with custom color in flutter

I want to implement Dot shaped tab indicator. (i.e, Small circle) like the image below with custom color.

Refer this image

Please do help on this.

Upvotes: 1

Views: 1266

Answers (2)

MohanKumar
MohanKumar

Reputation: 1115

You can create a separate widget with color & radius as a parameter to achieve this.

As Referred from here

indicator parameter expects a Decoration so we should create a 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);
 }

}

And use it As

 indicator: CircleTabIndicator(color: Colors.white, radius: 3),

Upvotes: 1

Mukul
Mukul

Reputation: 1155

If you want to ease your work, then you can use this package, and by using this package you can customize the tab indicator.

Here Below is the Example Code for the same which I have used in one of my project, and will get your achieve the desired result with a dot indicator.

See the indicator section in below Code:-

  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"),
      ],
    );
  }

Upvotes: 3

Related Questions