[Flutter]BottomNavigationBarの上(top)に枠線(border)をつけるには？

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

BottomNavigationBarの上に枠線をつける方法を紹介します。

方法
使用例
まとめ

方法

BottomNavigationBarの上に枠線をつけるには、Containerウェジェットを使います。

まず、BottomNavigationBarをContainerでラップします。

次に、Containerの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「boder」にBorder(top : BorderSide())を指定をします。

Container(
  decoration: BoxDecoration(
    border: Border(top: BorderSide(/*枠線の設定*/)),
  ),
  child: BottomNavigationBar(),
),

これでBottomNavigationBarの上に枠線がつきます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(
              width: 3, //太さ
              color: Colors.black, //色
            ),
          ),
        ),
        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;
            });
          },
        ),
      ),
    );
  }