[Flutter]TabBar(タブバー)の背景色(background color)を変えるには？

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

TabBarの背景色を変える方法を紹介します。

方法
使用例

方法

TabBarの背景色を変えるには、Containerを使います。

まず、TabBarをContainerでラップします。

そして、Containerの引数「color」に背景色を指定します。

Container(
  color: /*背景色*/,
  child: TabBar(
    tabs: [
      ・・・
    ],
  ),
),

Containerを使えば、TabBarの背景色を変えることができます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: Size(double.infinity, 50.0),
            child: Container(
              color: Colors.pink,
              child: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.person)),
                  Tab(icon: Icon(Icons.today)),
                  Tab(icon: Icon(Icons.settings)),
                ],
              ),
            ),
          ),
          body: Center(),
        ),
      ),
    );
  }