Flutter Tabbar indicator Gradien

定义的Indicator，主要是复制官方的Indicator代码

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

import 'dart:ui' as ui;

/// Used with [TabBar.indicator] to draw a horizontal line below the

/// selected tab.

///

/// The selected tab underline is inset from the tab's boundary by [insets].

/// The [borderSide] defines the line's color and weight.

///

/// The [TabBar.indicatorSize] property can be used to define the indicator's

/// bounds in terms of its (centered) widget with [TabIndicatorSize.label],

/// or the entire tab with [TabIndicatorSize.tab].

class SugarTabIndicatorextends Decoration {

/// Create an underline style selected tab indicator.

///

  /// The [borderSide] and [insets] arguments must not be null.

  const SugarTabIndicator(

{this.borderSide =const BorderSide(width:2.0, color: Colors.white),

      this.insets = EdgeInsets.zero,

      this.gradientColor})

:assert(borderSide !=null),

        assert(insets !=null);

  final ListgradientColor;

  /// The color and weight of the horizontal line drawn below the selected tab.

  final BorderSideborderSide;

  /// 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

/// [TabIndicatorSize.label], or the entire tab with [TabIndicatorSize.tab].

  final EdgeInsetsGeometryinsets;

  @override

  DecorationlerpFrom(Decoration a, double t) {

if (ais SugarTabIndicator) {

return SugarTabIndicator(

borderSide: BorderSide.lerp(a.borderSide, borderSide, t),

        insets: EdgeInsetsGeometry.lerp(a.insets, insets, t),

      );

    }

return super.lerpFrom(a, t);

  }

@override

  DecorationlerpTo(Decoration b, double t) {

if (bis SugarTabIndicator) {

return SugarTabIndicator(

borderSide: BorderSide.lerp(borderSide, b.borderSide, t),

        insets: EdgeInsetsGeometry.lerp(insets, b.insets, t),

      );

    }

return super.lerpTo(b, t);

  }

@override

  _UnderlinePaintercreateBoxPainter([VoidCallback onChanged]) {

return _UnderlinePainter(this, onChanged, gradientColor);

  }

}

class _UnderlinePainterextends BoxPainter {

_UnderlinePainter(this.decoration, VoidCallback onChanged, this.gradientColor)

:assert(decoration !=null),

        super(onChanged);

  final SugarTabIndicatordecoration;

  BorderSideget borderSide =>decoration.borderSide;

  EdgeInsetsGeometryget insets =>decoration.insets;

  ListgradientColor;

  @override

  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {

assert(configuration !=null);

    assert(configuration.size !=null);

    final Rect rect = offset & configuration.size;

    final Paint paint =borderSide.toPaint()..strokeCap = StrokeCap.square;

    Rect myRect =Rect.fromLTWH(

rect.left + rect.width /4, rect.bottom -7, rect.width /2, 2);

    paint.shader = ui.Gradient.linear(

Offset(myRect.left, 0), Offset(myRect.right, 0), gradientColor);

    paint.strokeWidth =3;

    canvas.drawRRect(

RRect.fromRectAndRadius(myRect, Radius.circular(3)), paint);

  }

}

最后在Tabbar上使用上面的indicator

TabBar(
                      labelColor: Colors.white,
                      labelStyle: TextStyle(fontSize: 20),
                      unselectedLabelColor: Colors.grey,
                      indicatorWeight: 5.0,
                      indicator: SugarTabIndicator(
                          gradientColor: [Color(0xFF617CFF),Color(0xFF6168FF)]),
                      controller: _tabController,
                      isScrollable: true,
                      onTap: (int index) {},
                      indicatorSize: TabBarIndicatorSize.label,
                      //设置所有的tab
                      tabs: [
                        Container(
                          height: 40,
                          alignment: Alignment.center,
                          child: Text("附近"),
                        ),
                        Container(
                          height: 40,
                          alignment: Alignment.center,
                          child: Text("活跃"),
                        ),
                        Container(
                          height: 40,
                          alignment: Alignment.center,
                          child: Text("新人"),
                        ),
                      ],
                    )