[Flutter]BottomNavigationBarのオーバーフロー(overflow)のエラー(error)を解決するには？

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

BottomNavigationBarの小さいサイズを指定することで発生するエラーを解決する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarのオーバーフローのエラーを解決するには、Wrapウェジェットを使います。

具体的な方法としては、BottomNavigationBarをWrapウェジェットの引数「children」に指定します。

Container(
  child: Wrap(
    children: [
      BottomNavigationBar(
        items: [
          ・・・
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    ],
  ),
),

これでオーバーフローのエラーを解決できます。

エラーを解決できると言っても、指定できるサイズには限界があります。

もし、限界よりも小さくしたい場合は、ラベルのフォントとアイコンのサイズを小さくしましょう。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: IndexedStack(
          index: _currentIndex,
          children: _pages,
        ),
        bottomNavigationBar: Container(
          height: 20,
          child: Wrap(
            children: [
              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,
              ),
            ],
          ),
        ),
      ),
    );
  }