[Flutter]BottomNavigationBarの横幅(width)を変える(change)には？

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

BottomNavigationbarの横幅を変える方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarの横幅を変えるには、Containerウェジェットを使います。

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

そして、Containerのマージンに、「EdgeInsets.symmetric(horizontal : 値)」を指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        padding: EdgeInsets.symmetric(horizontal: /*数値*/),
        child: BottomNavigationBar(
          items: [
            ・・・
          ],
          currentIndex: _currentIndex,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }

これでBottomNavigationBarの横幅を変えることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.symmetric(horizontal: 30),
        child: BottomNavigationBar(
          backgroundColor: Colors.yellow[200],
          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;
            });
          },
        ),
      ),
    );
  }