[Flutter]BottomNavigationBarType.shiftingで背景色(backgroundcolor)を設定する方法

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

「BottomNavigataionBarのshiftingで背景色を設定したい」

という人に向けて、BottomNavigationBarType.shiftingで背景色を設定する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarType.shiftingで背景色を設定するには、Themeを使います。

まず、BottomNavigaionBarをThemeでラップします。

そして、Themeの引数「data」にThemeDataを指定し、ThemeDataの引数「canvasColor」で背景色を指定します。

Theme(
  data: ThemeData(
    canvasColor: /*背景色*/,
  ),
  child: BottomNavigationBar(
    type: BottomNavigationBarType.shifting,
    items: [
      ・・・
    ],
    currentIndex: _currentIndex,
    onTap: (int index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),
),

これでBottomNavigationBarType.shiftingで背景色を設定できます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Theme(
        data: ThemeData(
          canvasColor: Colors.black,
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.shifting,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              label: 'Favorite',
            ),
          ],
          currentIndex: _currentIndex,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }