[Flutter]TabBar(タブバー)のアイコン(icon)の色(color)を変えるには？

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

TabBarのアイコンの色を変える方法を紹介します。

方法

TabBarのアイコンの色を変えるには、次の２つの引数を使います。

labelColor : 選択されている時の色
selectedColor : 通常時の色

通常時と選択時の色を指定することで、アイコンの色を変えることが出来ます。

TabBar(
  labelColor: /*選択されている時の色*/,
  unselectedLabelColor: /*通常時の色*/,
  tabs: [/*タブ*/],
),

これでTabBarのアイコンの色を変えることが出来ます。

使用例

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