Flutter 选择选项卡时的选项卡栏图标颜色

我正在尝试在选择选项卡时更改选项卡图标的颜色。我知道如何更改图标的颜色，但我不知道在选择tab时如何更改颜色

我的代码：

child: AppBar(
    bottom: TabBar(
        tabs: <Tab>[
            Tab(
                child: new Row(
                    children: <Widget>[
                        new Text("Select", textAlign: TextAlign.start),
                        new SizedBox(
                            width: 24.0,
                        ),
                        new Icon(
                            Icons.arrow_drop_down,
                            color: Colors.blue.shade400,
                        ),
                    ],
                    ....
                )
            )
        ]
    )
)

child:AppBar(
底部：选项卡栏(
选项卡：[
标签(
孩子：新的一排(
儿童：[
新文本（“选择”，textAlign:textAlign.start），
新尺寸盒子(
宽度：24.0，
),
新图标(
Icons.arrow\u下拉菜单，
颜色：Colors.blue.shade400，
),
],
....
)
)
]
)
)

创建自定义选项卡控制器，如图所示

执行类似于_tabController.index的操作以获取当前选项卡的索引

对于每个选项卡，检查其位置（从0开始）是否与TabController索引匹配，并显示相应的图标

---

要更改选定的选项卡颜色，只需将其添加到选项卡栏：

labelColor: Colors.
unselectedLabelColor: Colors.white,

完整代码：

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

DefaultTabController(
长度：2，
孩子：脚手架(
appBar:appBar(
底部：选项卡栏(
labelColor:Colors.deepOrange，
未选择的标签颜色：Colors.white，
选项卡：[
标签(
孩子：排(
儿童：[
Text（“选择”，textAlign:textAlign.start），
大小盒子(
宽度：24.0，
),
图标(
Icons.arrow\u下拉菜单，
颜色：Colors.blue.shade400，
),
],
),
),
标签(
孩子：排(
儿童：[
Text（“选择”，textAlign:textAlign.start），
大小盒子(
宽度：24.0，
),
图标(
Icons.arrow\u下拉菜单，
颜色：Colors.blue.shade400，
),
],
),
),
],
),
),
正文：中(
子：容器(
孩子：文本（“这是一页废话”），
),
),
),
)

编辑： 如果您只想更改图标颜色，请在文本中添加颜色，并从选项卡中的图标中删除颜色，代码：

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,

                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

DefaultTabController(
长度：2，
孩子：脚手架(
appBar:appBar(
底部：选项卡栏(
labelColor:Colors.deepOrange，
未选择的标签颜色：Colors.white，
选项卡：[
标签(
孩子：排(
儿童：[
文本（“选择”，textAlign:textAlign.start，样式：TextStyle（颜色：Colors.white），），
大小盒子(
宽度：24.0，
),
图标(
Icons.arrow\u下拉菜单，
),
],
),
),
标签(
孩子：排(
儿童：[
文本（“选择”，textAlign:textAlign.start，样式：TextStyle（颜色：Colors.white），），
大小盒子(
宽度：24.0，
),
图标(
Icons.arrow\u下拉菜单，
),
],
),
),
],
),
),
正文：中(
子：容器(
孩子：文本（“这是一页废话”），
),
),
),
)

编辑#2 现在，此代码更改图标颜色，但保留文本颜色更改为默认值（您可以自定义文本颜色的更改，如图标颜色）。代码：

导入“包装：颤振/材料.省道”；
类FirstPage扩展StatefulWidget{
@凌驾
_FirstPageState createState（）；
}
类_FirstPageState扩展了状态{
int _currentIndex=0；
@凌驾
小部件构建（构建上下文）{
返回DefaultTabController(
长度：2，
孩子：脚手架(
appBar:appBar(
底部：选项卡栏(
onTap：（索引）{
设置状态（）{
_currentIndex=索引；
});
},
选项卡：[
标签(
孩子：排(
儿童：[
文本（“选择”，文本对齐：textAlign.start，），
大小盒子(
宽度：24.0，
),
图标(
Icons.arrow\u下拉菜单，
颜色：_currentIndex==0？颜色。深橙色：颜色。白色54
),
],
),
),
标签(
孩子：排(
儿童：[
Text（“选择”，textAlign:textAlign.start，），
大小盒子(
宽度：24.0，
),
图标(
Icons.arrow\u下拉菜单，
颜色：_currentIndex==1？颜色。深橙色：颜色。白色54，
),
],
),
),
],
),
),
正文：中(
子：容器(
孩子：文本（“这是一页废话”），
),
),
),
);
}
}

TabBar

具有

labelColor

和

unselectedLabelColor

属性，可将选定/未选定的颜色设置为

选项卡中的任何图标和文本

如果您希望在中为图标或文本设置固定颜色<
import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index){
              setState(() {
               _currentIndex = index; 
              });
            },

            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 0 ? Colors.deepOrange : Colors.white54
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 1 ? Colors.deepOrange : Colors.white54,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    );
  }
}