[Flutter]BottomNavigationBarでItem(アイテムタブ)によって背景色(backgroundcolor)を切り替える(switch)には？

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

BottomNavigationBarの背景色を選択されているBottomNavigationBarItemによって切り替える方法を紹介します。

方法
使用例
まとめ

方法

まず、BottomNavigationBarの引数「type」にBottomNavigaitonBarType.shiftingを指定します。

そして、BottomNavigationBarItemの引数「backgroundColor」で、選択された時の背景色を指定します。

BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  items: [
    BottomNavigationBarItem(
      icon: /*アイコン*/,
      label: 'ラベル',
      backgroundColor: /*選択されている時の背景色*/,
    ),
  ],
  currentIndex: _currentIndex,
  onTap: _onTap,
),

あとは、使用するBottomNavigationBarItemのそれぞれの引数「backgroundColor」に色を指定します。

これで、BottomNaviagationBarの背景色を選択されているBottomNavigationBarItemによって切り替えることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
            backgroundColor: Colors.yellow,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.green,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favorite',
            backgroundColor: Colors.pink,
          ),
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }