FlutterでbottomNavigationBarを実装する

ネイティブアプリでよく見る、画面下部にあるナビゲーションバーのことを、ボトムナビゲーションバーというそうです！
ナビゲーションバーだとアンドロイドで言うと「◀」「●」「■」が並ぶエリアと呼び方がかぶってしまうので、「ボトムナビゲーションバー」が呼び名なのだとか。

ScaffoldでbottomNavigationBarを指定します。

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0; // currentIndexにデフォルト値を与えないとコンパイルエラーになる

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Center(
        child: Text('bottomNavigationBar test')
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: Text("Home")
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.settings),
            title: Text("Settings")
          ),
        ],
        onTap: (int index) {
          print(index); // デバッグ用にprintしてみる
        },
      ),
    );
  }
}

こんな感じで、実装はシンプル。
特徴的なのは、onTapがBottonNavigationBarItem(アイコン)側ではなくて、BottomNavigationBar側で準備されていること。
onTapは引数としてintを持っているので、このintを元に画面遷移を実装するようです！

Navigatorクラスを使って実装していくようですが、続きはまた明日やっていきます！