[Flutter]BottomNavigationBarItemの使い方

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

BottomNavigationBarItemの使い方を解説します。

使い方
1. 設定
2. 使用例
まとめ

使い方

BottomNavigationBarItemは、BottomNavigationBarのタブとして使います。

BottomNavigationBarItemは、次の２つの引数を指定することで使うことが出来ます。

icon : タブのアイコン
label : ラベルの文字列

引数「icon」にはIconウェジェット、引数「label」には文字列を指定します。

必須の２つの引数を指定して、BottomNavigationBarの引数「items」に配置することで、タブとして機能します。

引数「label」は「null」にしてはいけないだけで、空文字（’ ‘）を指定することが出来ます。

設定

iconとlabel以外の引数では、タブの設定ができます。

tooltip : タブを長押しした際に表示される文字列
backgroundColor : BottomNavigationBarがBottomNavigationBarType.shiftingの時の背景色
activeIcon : 選択中の時のアイコン

これらの引数は、必ず使う必要はなく、必要な時に使います。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _currentIndex = 0;

  var _pages = <Widget>[
    Container(
      child: Text('Home'),
      alignment: Alignment.center,
      color: Colors.lightBlue,
    ),
    Container(
      child: Text('Home'),
      alignment: Alignment.center,
      color: Colors.lightBlue,
    ),
    Container(
      child: Text('Share'),
      alignment: Alignment.center,
      color: Colors.pink.withOpacity(0.5),
    ),
  ];

  void _onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
            tooltip: 'This is settings!',
            backgroundColor: Colors.green,
            activeIcon: Icon(Icons.flutter_dash),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
            tooltip: 'This is home!',
            backgroundColor: Colors.green,
            activeIcon: Icon(Icons.flutter_dash),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favorite',
            tooltip: 'This is favorite!',
            backgroundColor: Colors.green,
            activeIcon: Icon(Icons.flutter_dash),
          ),
        ],
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }
}