Flutter中如何修改TabBar指示器颜色？标题已绿但下划线未变色

问题描述 #

如图所示（图片：TabBar下划线未同步颜色），我已经将第一个Tab的标题设置为绿色，但下方的下划线指示器没有同步变成绿色。请问如何将该下划线也设置为相同的绿色？

我的TabBar代码如下：

child: TabBar(
              onTap: (index) {
                setState(() {
                  selectedIndex = index;
                });
              },
              isScrollable: false,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              controller: _tabController,
              labelColor: getIndicatorAndLabelColor(selectedIndex),
              unselectedLabelColor: Colors.black,
              indicatorWeight: 4,
              indicatorColor: getIndicatorAndLabelColor(selectedIndex),
              indicatorPadding:
                  const EdgeInsets.only(left: 15, right: 15, bottom: 10),
              indicator: const ShapeDecoration(
                  shape: UnderlineInputBorder(
                      borderSide: BorderSide(
                          color: myAccentColor,
                          width: 3,
                          style: BorderStyle.solid))),
              tabs: const [
                Tab(
                  text: 'APPROVED',
                ),
                Tab(
                  text: 'DENIED',
                ),
                Tab(
                  text: 'PENDING',
                ),
              ],
            ),

解决办法 #

你代码里的问题在于手动指定了ShapeDecoration作为指示器，且用const修饰导致borderSide.color固定为myAccentColor，完全忽略了indicatorColor的动态设置。要让下划线和标题颜色同步，有两种处理方式：

方式一：使用默认指示器（推荐）

直接移除自定义的indicator参数，TabBar默认的指示器会自动沿用indicatorColor的值，和你设置的getIndicatorAndLabelColor(selectedIndex)保持一致：

child: TabBar(
              onTap: (index) {
                setState(() {
                  selectedIndex = index;
                });
              },
              isScrollable: false,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              controller: _tabController,
              labelColor: getIndicatorAndLabelColor(selectedIndex),
              unselectedLabelColor: Colors.black,
              indicatorWeight: 4,
              indicatorColor: getIndicatorAndLabelColor(selectedIndex),
              indicatorPadding:
                  const EdgeInsets.only(left: 15, right: 15, bottom: 10),
              // 移除自定义indicator的代码
              tabs: const [
                Tab(
                  text: 'APPROVED',
                ),
                Tab(
                  text: 'DENIED',
                ),
                Tab(
                  text: 'PENDING',
                ),
              ],
            ),

方式二：保留自定义指示器样式

如果需要自定义下划线的宽度、边距等样式，去掉const修饰ShapeDecoration，将颜色改为动态的getIndicatorAndLabelColor(selectedIndex)：

indicator: ShapeDecoration(
    shape: UnderlineInputBorder(
        borderSide: BorderSide(
            color: getIndicatorAndLabelColor(selectedIndex),
            width: 3,
            style: BorderStyle.solid))),

两种方式都能实现下划线颜色与选中Tab标题颜色同步的效果。

内容的提问来源于stack exchange，提问作者tarık hasan