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

Flutter

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

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

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

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

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

TabBar(
  labelColor: /*選択されている時の色*/,
  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),
              )
            ],
          ),
        ),
      ),
    );
  }

コメント

タイトルとURLをコピーしました