[Flutter]BottomNavigationBarのマージン(margin)を設定するには？

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

BottomNavigationBarのマージンを設定する方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarのマージンを設定するには、Containerウェジェットを使います。

まず、BottomNavigationBarをContainerウェジェットでラップします。

そして、Containerウェジェットの引数「margin」でマージンの設定をします。

Container(
  margin: /*マージンの設定*/,
  child: BottomNavigationBar(
    items: [
      ・・・
    ],
    currentIndex: _currentIndex,
    onTap: (int index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),
),

マージンの設定は、EdgeInsetsで行います。

これで、BottomNavigationbarのマージンを設定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        margin: EdgeInsets.all(30),
        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: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }