[Flutter]BottomNavigationBar(ボトムナビゲーションバー)の高さ(height)を設定するには？

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

BottomNavigationBarの高さを設定する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarの高さを設定するには、SizedBoxもしくはContainerを使います。

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

そして、SizedBoxもしくはContainerの引数「height」で高さを設定します。

SizedBox(
  height: /*高さ*/,
  child: BottomNavigationBar(
    items: [
      ・・・
    ],
    currentIndex: _currentIndex,
    onTap: _onTap,
  ),
),

これでBottomNavigationBarの高さを設定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: SizedBox(
        height: 200, //高さ
        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,
          backgroundColor: Colors.yellow,
        ),
      ),
    );
  }