如何在标签栏指示器中给出渐变线

Question

I have a tab bar functionality in which I show a Donut chart and list of vehicles but I need to show which tab the user selected for that I have indicatorColor in TabBar but I need to fill with gradient line as shown in the image please help me out.

PS: If possible please let me know how to give theme color means primary color in main as a gradient???

return Scaffold(
    body: new DefaultTabController(
        length: 2,
        child: new Column(
          children: <Widget>[
            new Container(
              width: 1200.0,
              child: new Container(
                color: Colors.white,
                child: new TabBar(
                  labelColor: Colors.black,
                  tabs: [
                    Tab(
                      child: new Text("Visual",
                      style: new TextStyle(fontSize: 20.0)
                      ),
                    ),

                    Tab(
                      child: new Text("Tabular",
                      style: new TextStyle(fontSize: 20.0)), 
                    ),
                  ],
                ),
              ),
            ),
            new Expanded(
              child: new TabBarView(
                children: [
                  Tab(
                    child: new RefreshIndicator(
                      child: new Text('DONUT CHART'),
                      onRefresh: refreshList,
                      key: refreshKey1,
                    ),
                  ),
                  Tab(
                    child: new RefreshIndicator(
                      child: new Text('List of vehicles'),
                      onRefresh: refreshList,
                      key: refreshKey2,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

Answer 1

I think the only way is to create your custom TabBar. You can copy the code of TabBar from tabs.dart and in _TabBarState you have to change Decoration get _indicator .

Something like:

return ShapeDecoration(shape: UnderlineInputBorder(), gradient: LinearGradient(
    colors: [Colors.blue, Colors.green]));

UPD:

Got it. ShapeDecoration doesn't work. With it I can set gradient for whole tab. For underline - there is _IndicatorPainter class in same file. And there is Rect indicatorRect method of this class.

return Rect.fromLTWH(tabLeft, 0.0, tabRight - tabLeft, tabBarSize.height);

This string return rect for decoration. If you change it - you can get underline:

return Rect.fromLTWH(tabLeft, tabBarSize.height - 4.0, tabRight - tabLeft, 4.0);

And inside Decoration get _indicator don't forget change return UnderlineTabIndicator to

return ShapeDecoration(shape: RoundedRectangleBorder(), gradient: LinearGradient(
    colors: [Colors.blue, Colors.green]));

And here's result

Answer 2

Instead of changing core files here is a better answer that worked for me.

TabBar(
          controller: tabController,
          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: 4.0,
                      style: BorderStyle.solid)),
              gradient: LinearGradient(colors: [pinkLight, pinkDark])),
          tabs: <Widget>[
            Center(
              child: Container(
                alignment: Alignment.center,
                color: whiteColor,
                child: Text(
                  "Rating",
                  style: themeData.accentTextTheme.title,
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              color: whiteColor,
              child: Text(
                "Category",
                style: themeData.accentTextTheme.title,
              ),
            ),
            Container(
              alignment: Alignment.center,
              color: whiteColor,
              child: Text(
                "Friend",
                style: themeData.accentTextTheme.title,
              ),
            ),
          ],
        ),

make indicator padding to zero, label padding to zero and indicatorWeight to 4.0 or your require size after that instead of using text in tabs use Container at top and give it color.