[Flutter]BottomNavigationBarの背景(background)に画像(image)を設定するには？

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

BottomNavigationBarの背景に画像を設定する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarの背景に画像を設定するには、Containerを使います。

まず、BottomNavigationBarをContainerの引数「child」に指定します。

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

そして、BoxDecorationにDecorationImageを指定し、DecorationImageの引数「image」にAssetImageやNetworkImageを指定します。

画像の設定は、AssetImageやNetworkImageで行います。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('Asset Path'), //画像の設定
    ),
  ),
  child: BottomNavigationBar(
    items: [
     ・・・
    ],
    currentIndex: _currentIndex,
    onTap: _onTap,
  ),
),

最後に、BottomNavigationBarの引数「backgroundColor」にColors.transparent、引数「elevation」に0を指定します。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('asset/images/background-image.png'),
    ),
  ),
  child: BottomNavigationBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    items: [
      ・・・
    ],
    currentIndex: _currentIndex,
    onTap: _onTap,
  ),
),

これでBottomNavigationBarの背景に画像を設定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        height: 100,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('asset/images/background-image.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: BottomNavigationBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          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,
        ),
      ),
    );
  }