[Flutter]TabBarの選択されていないアイコンの色を変えるには？

どうも、ちょげ(@chogetarou)です。

TabBarの選択されていないアイコンの色を変える方法を紹介します。

方法

TabBarの選択されていないアイコンの色を変えるには、TabBarの引数「unselectedLabelColor」を使います。

具体的には、labelColorに選択されていない時の色を指定します。

TabBar(
  unselectedLabelColor: /*選択されていないアイコンの色*/,
  tabs: [],
),

これで選択されていない時の色を設定できます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 3,
        child: Scaffold(
          body: TabBar(
            labelColor: Colors.pink, 
            unselectedLabelColor: Colors.blue,
            indicatorColor: Colors.pink,
            tabs: [
              Tab(
                icon: Icon(Icons.person),
              ),
              Tab(
                icon: Icon(Icons.data_usage),
              ),
              Tab(
                icon: Icon(Icons.settings),
              )
            ],
          ),
        ),
      ),
    );
  }