[Flutter]BottomNavigationBarをセーフエリア(safearea)に表示するには？

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

BottomNavigationBarをセーフエリアに表示する方法を紹介します。

方法
まとめ

方法

BottomNavigationBarをセーフエリアに表示するには、SafeAreaウェジェットを使います。

具体的には、BottomNavigationBarをSafeAreaの引数「child」に指定します。

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