[Flutter]BottomNavigationBarのアイコン(icon)に画像(image)を使うには？

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

BottomNavigationBarで使うアイコンに画像を指定する方法を紹介します。

方法
1. Image
2. ImageIcon
まとめ

方法

BottomNavigationBarで使うアイコンに画像を指定する方法は２つあります。

Image

１つは、Imageを使う方法です。

BottomNavigationBarItemの引数「icon」にImage.asset()もしくはImage.network()を指定します。

そして、Image.assetもしくはImage.networkの引数で画像のパスを指定します。

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Image.asset('Path'),
      label: '',
    ),
    BottomNavigationBarItem(
      icon: Image.network('Path'),
      label: '',
    ),
  ],
  currentIndex: _currentIndex,
  onTap: _onTap,
),

これでBottomNavigationBarのアイコンに画像を使うことが出来ます。

もし、画像のサイズを変えたいならばContainerやSizedBoxを使います。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: [
          Container(
            child: Text('Dog'),
            alignment: Alignment.center,
          ),
          Container(
            child: Text('Cat'),
            alignment: Alignment.center,
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: SizedBox(
              height: 75,
              width: 75,
              child: Image.asset('asset/images/dog.png'),
            ),
            label: 'Dog',
          ),
          BottomNavigationBarItem(
            icon: SizedBox(
              height: 75,
              width: 75,
              child: Image.network(
                  'https://icooon-mono.com/i/icon_12775/icon_127751_64.png'),
            ),
            label: 'Cat',
          ),
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }

ImageIcon

もう１つは、ImageIconを使う方法です。

まず、BottomNavigationBarのアイコンにを指定します。

そして、ImageIconの引数に、AssetImageもしくはNetworkImageを指定します。

画像の指定は、AssetImageもしくはNetworkImageの引数で行います。

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: ImageIcon(
        AssetImage('Asset Path'),
      ),
      label: '',
    ),
    BottomNavigationBarItem(
      icon: ImageIcon(
        NetworkImage('URL Path'),
      ),
      label: '',
    ),
  ],
  currentIndex: _currentIndex,
  onTap: _onTap,
),

これでBottomNavigationbarのアイコンに画像を使うことが出来ます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: [
          Container(
            child: Text('Dog'),
            alignment: Alignment.center,
          ),
          Container(
            child: Text('Cat'),
            alignment: Alignment.center,
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('asset/images/sibadog.png'),
            ),
            label: 'Dog',
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              NetworkImage(
                  'https://icooon-mono.com/i/icon_13189/icon_131891_64.png'),
            ),
            label: 'Cat',
          ),
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }