Flutter: How to make Custom Underline Tab Indicator with Border Radius

Question

How to make indicator: UnderlinetabIndicator with border radius? this decoration doesnt like underlineinputborder that has borderRadius.

I was trying to make it with ShapeDecoration(UnderlineInputBorder). but the size of shapeDecoration counts from the tabs widget, so i can't have correct borderRadius topright and topleft.

Edit: Expectation

Code:

*dont mind the color, it just for the debugging purpose.

TabBar(
                  controller: _tabController,
                  labelStyle:
                      TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
                  indicatorWeight: 10.0,
                  unselectedLabelColor: Colors.black,
                  labelColor: Colors.black,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 5.0,
                      color: HexColor("2C7381"),
                    ),
                    insets:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 0),
                  ),
                  tabs: [
                    Container(
                      color: Colors.amber,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Column(
                          children: [
                            Image.asset(
                              _activeIndex == 0
                                  ? "assets/icons/dummy1.png"
                                  : "assets/icons/dummy2.png",
                              height: 20,
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            Text(
                              "TAB 0",
                              style: Dummytheme.text14theme,
                              textAlign: TextAlign.center,
                            ),
                          ],
                        ),
                      ),
                    ),

MohitJadav86 · Answer

You can use this parameter

import 'package:flutter/material.dart';

class CustomTabIndicator extends Decoration {
  final double radius;

  final Color color;


  final double indicatorHeight;

  const CustomTabIndicator({
    this.radius = 8,
    this.indicatorHeight = 4,
    this.color = Colors.red,
  });

  @override
  _CustomPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomPainter(
      this,
      onChanged,
      radius,
      color,
      indicatorHeight,
    );
  }
}

class _CustomPainter extends BoxPainter {
  final CustomTabIndicator decoration;
  final double radius;
  final Color color;
  final double indicatorHeight;

  _CustomPainter(
      this.decoration,
      VoidCallback? onChanged,
      this.radius,
      this.color,
      this.indicatorHeight,
      ) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration.size != null);

    final Paint paint = Paint();
    double xAxisPos = offset.dx + configuration.size!.width / 2;
    double yAxisPos = offset.dy + configuration.size!.height - indicatorHeight/2;
    paint.color = color;

    RRect fullRect = RRect.fromRectAndCorners(
      Rect.fromCenter(
        center: Offset(xAxisPos, yAxisPos),
        width: configuration.size!.width / 3,
        height: indicatorHeight,
      ),
      topLeft: Radius.circular(radius),
      topRight: Radius.circular(radius),
    );

    canvas.drawRRect(fullRect, paint);
  }
}

use : indicator: CustomTabIndicator(),

Flutter: How to make Custom Underline Tab Indicator with Border Radius

1 Answers