FlutterのBottomNavigationBarに複数のメソッドを配置する

概要

あるデザインにて「BottomNavigationBarに4つのアイコンを配置し、それぞれ別の操作を割り当てる」必要があった。
しかしBottomNavigationBarは本来、複数の画面への遷移を想定して作られている。

この記事では、BottomNavigationBarに複数のメソッドを割り当てる方法を紹介する。

方法

やり方は単純で、BottomNavigationBarのonTapにswitch文を割り当てるだけ。

//BottomNavigationBarのindexを使って、実行するメソッドを切り替える
  void methodSwitcher(int index) {
    switch (index) {
      case 0:
        //indexが0の場合、_counterを-1する
        _decrementCounter();
        break;
      case 1:
        //indexが1の場合、_counterを+1する
        _incrementCounter();
        break;
    }
  }

実際の画面

リポジトリ

https://github.com/Ta23ka98/bnb_methods_sample