[Flutter]BottomNavigationBarに大きい影(big shadow)を設定するには？

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

BottomNavigationBarに大きい影を設定する方法を紹介します。

方法
まとめ

方法

BottomNavigationBarに大きい影を設定するには、Containerを使います。

まず、BottomNavigationBarをContainerのchildに指定します。

次に、Containerの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「boxShadow」で影を指定します。

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          boxShadow: [ //影の設定
            BoxShadow(
              color: Colors.grey, 
              blurRadius: 8, 
              spreadRadius: 8,
            ),
          ],
        ),
        child: BottomNavigationBar(
          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: _onTap,
        ),
      ),
    );
  }