Is there a way to make the tab bar indicator line a gradient in flutter?

Question

I am trying to create a TabBar which has a gradient underline like in the image below.

I tried to use a BoxDecoration as suggested by earlier posts but it does not exactly display as i want it to.

TabBar(
        labelColor: Theme.of(context).primaryColor,
        indicator: BoxDecoration(
          gradient: LinearGradient(
  colors: const [Color(0xFF10C7E0), Color(0xFF00D5C3)],
),
        ),
        tabs: ...,
      ),

When i try that, what i get is

Someone pointed out that this post is a duplicate of how-to-give-a-gradient-line-in-tab-bar-indicator which was posted 10 months ago. BUT the method illustrated there NO longer works. Yes, i tried it.

Possible duplicate of [How to give a gradient line in tab bar indicator](https://stackoverflow.com/questions/52946317/how-to-give-a-gradient-line-in-tab-bar-indicator) — , Aug 23 '19 at 19:55
The second answer there answers it without changing core files. That solution doesn't work? — George, Aug 23 '19 at 21:05

score 10 · Accepted Answer · answered Aug 24 '19 at 13:23

what's wrong with this option? (based on code from link)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('All', style: TextStyle(color: const Color(0xff596173))),
            backgroundColor: Colors.white,
            centerTitle: true,
            bottom: TabBar(
              labelColor: const Color(0xff525c6e),
              unselectedLabelColor: const Color(0xffacb3bf),
              indicatorPadding: EdgeInsets.all(0.0),
              indicatorWeight: 4.0,
              labelPadding: EdgeInsets.only(left: 0.0, right: 0.0),
              indicator: ShapeDecoration(
                  shape: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent, width: 0, style: BorderStyle.solid)),
                  gradient: LinearGradient(colors: [Color(0xff0081ff), Color(0xff01ff80)])),
              tabs: <Widget>[
                Container(
                  height: 40,
                  alignment: Alignment.center,
                  color: Colors.white,
                  child: Text("Visual"),
                ),
                Container(
                  height: 40,
                  alignment: Alignment.center,
                  color: Colors.white,
                  child: Text("Tabular"),
                ),
              ],
            ),
          ),
          body: Container(color: Colors.grey[200]),
        ),
      ),
    );
  }
}

Thanks. I found my mistake, i was using Tab Widgets inside the tabs property instead of a Container. — EMRADE, Aug 24 '19 at 14:18

score 0 · Answer 2 · answered Oct 22 '21 at 16:13

You can create your own indicator by modifying the default UnderlineTabIndicator.

import 'package:flutter/material.dart';

class CustomUnderlineTabIndicator extends Decoration {
  /// Create an underline style selected tab indicator.
  ///
  /// The [borderSide] and [insets] arguments must not be null.
  const CustomUnderlineTabIndicator({
    this.gradient,
    this.insets = EdgeInsets.zero,
    this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
  });

  /// The color and weight of the horizontal line drawn below the selected tab.
  final BorderSide borderSide;

  final Gradient? gradient;

  /// Locates the selected tab's underline relative to the tab's boundary.
  ///
  /// The [TabBar.indicatorSize] property can be used to define the tab
  /// indicator's bounds in terms of its (centered) tab widget with
  /// [TabBarIndicatorSize.label], or the entire tab with
  /// [TabBarIndicatorSize.tab].
  final EdgeInsetsGeometry insets;

  @override
  Decoration? lerpFrom(Decoration? a, double t) {
    if (a is CustomUnderlineTabIndicator) {
      return CustomUnderlineTabIndicator(
        gradient: Gradient.lerp(a.gradient, gradient, t),
        borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
        insets: EdgeInsetsGeometry.lerp(a.insets, insets, t)!,
      );
    }
    return super.lerpFrom(a, t);
  }

  @override
  Decoration? lerpTo(Decoration? b, double t) {
    if (b is CustomUnderlineTabIndicator) {
      return CustomUnderlineTabIndicator(
        gradient: Gradient.lerp(gradient, b.gradient, t),
        borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
        insets: EdgeInsetsGeometry.lerp(insets, b.insets, t)!,
      );
    }
    return super.lerpTo(b, t);
  }

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomUnderlinePainter(this, onChanged);
  }

  Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
    final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
    return Rect.fromLTWH(
      indicator.left,
      indicator.bottom - borderSide.width,
      indicator.width,
      borderSide.width,
    );
  }

  @override
  Path getClipPath(Rect rect, TextDirection textDirection) {
    return Path()..addRect(_indicatorRectFor(rect, textDirection));
  }
}

class _CustomUnderlinePainter extends BoxPainter {
  _CustomUnderlinePainter(this.decoration, VoidCallback? onChanged)
      : super(onChanged);

  final CustomUnderlineTabIndicator decoration;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration.size != null);
    final Rect rect = offset & configuration.size!;
    final TextDirection textDirection = configuration.textDirection!;
    final Rect indicator = decoration
        ._indicatorRectFor(rect, textDirection)
        .deflate(decoration.borderSide.width / 2.0);
    final Paint paint = decoration.borderSide.toPaint()
      ..strokeCap = StrokeCap.square;
    paint.shader =
        decoration.gradient?.createShader(rect, textDirection: textDirection);
    canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
  }
}

Just copied UnderlineTabIndicator and added a gradient to it.

Is there a way to make the tab bar indicator line a gradient in flutter?

2 Answers2

Linked