CODEWITHSUNDEEP
fluttermaterial-designflutter-layout
MischievousChild
MischievousChild

Reputation: 151

Flutter rounded TabBar border indicator

I spent way too many hours searching for a similar solution but it seems that nobody on earth is implementing such design. I want to indicate selected TabBar Tab with such indicator:

enter image description here

Currently it looks like this:

enter image description here

Code of current TabBar:

        const TabBar(
            indicator: BoxDecoration(
              border: Border(
                top: BorderSide(color: Colors.blue, width: 5),
              ),
            ),
            labelPadding: EdgeInsets.zero,
            tabs: [
              _Tab(icon: Icons.home, text: 'Home'),
              _Tab(icon: Icons.settings, text: 'Settings'),
              _Tab(icon: Icons.cleaning_services, text: 'Clean'),
              _Tab(icon: Icons.construction, text: 'Service'),
              _Tab(icon: Icons.library_books, text: 'Resources'),
            ],
          ),
        )

Has anybody got an idea of how this should look like?

Upvotes: 0

Views: 2437

Answers (2)

MischievousChild
MischievousChild

Reputation: 151

Thanks, BabC.

Here's the final result:

enter image description here

class _TabIndicator extends BoxDecoration {
  final BoxPainter _painter;

  _TabIndicator() : _painter = _TabIndicatorPainter();

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _TabIndicatorPainter extends BoxPainter {
  final Paint _paint;

  _TabIndicatorPainter()
      : _paint = Paint()
          ..color = Colors.blue
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final double _xPos = offset.dx + cfg.size.width / 2;

    canvas.drawRRect(
      RRect.fromRectAndCorners(
        Rect.fromLTRB(_xPos - 20, 0, _xPos + 20, 5),
        bottomLeft: const Radius.circular(5.0),
        bottomRight: const Radius.circular(5.0),
      ),
      _paint,
    );
  }
}

Upvotes: 3

BabC
BabC

Reputation: 1084

You must create your own Decoration. Have a look to this guide : https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c

It creates a custom point under the tab, so you can copy that to create your kind of indicator

Upvotes: 4

Related Questions