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

【问题标题】：How to give a gradient line in tab bar indicator如何在标签栏指示器中给出渐变线
【发布时间】：2019-03-27 12:43:45
【问题描述】：

我有一个标签栏功能，其中我显示了一个圆环图和车辆列表，但我需要显示用户选择的哪个标签，我在 TabBar 中有 indicatorColor 但我需要填充渐变线，如图所示请帮帮我。

PS：如果可能的话，请告诉我如何给主题颜色表示主色作为渐变的主要颜色？？？

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,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

【问题讨论】：

我处理了）更新了我的答案
是的，一个有效，我还有一个疑问，我们如何为底部导航栏图标提供渐变？请帮帮我先生.. 如图所示..
必须调查 %) 我认为创建新问题会更好。也许有人已经知道答案了

标签： android dart flutter

【解决方案1】：

我认为唯一的方法是创建您的自定义 TabBar。您可以从 tabs.dart 中复制 TabBar 的代码，并在 _TabBarState 中更改Decoration get _indicator。

类似：

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

UPD：

知道了。 ShapeDecoration 不起作用。有了它，我可以为整个标签设置渐变。对于下划线 - 在同一文件中有 _IndicatorPainter 类。还有这个类的Rect indicatorRect方法。

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

这个字符串返回矩形进行装饰。如果你改变它 - 你可以得到下划线：

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

在Decoration get _indicator里面别忘了把return UnderlineTabIndicator改成

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

这是结果

【讨论】：

这意味着我必须为此创建自己的包吗？我不能直接修改那个 _TabBarState ？？如果我改变它会抛出一些错误。
你可以试试，但是我尝试这个时出错了。从这个类它无法打开UnderlineInputBorder。当我尝试BoxDecoration 时，它运行良好。
无法编辑现有代码？正如我所说 - 您可以尝试创建自定义标签栏
ThemeData 中的primaryColor 怎么样？即使我应该为此创建我的自定义类？？
这只是一种颜色，而不是渐变。对于渐变，你需要装饰

【解决方案2】：

而不是在这里更改核心文件是对我有用的更好的答案。

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,
              ),
            ),
          ],
        ),

使指标填充为零，标签填充为零，indicatorWeight 为 4.0 或之后您需要的大小，而不是在选项卡中使用文本，在顶部使用 Container 并为其赋予颜色。

【讨论】：