【Flutter】bottomNavigationBar

ScafforldのプロパティであるbottomNavigationBar。これは、bodyにリスト形式でWidgetを渡すことで画面遷移を画面下のボタンで行うことができるものである。

最低限設定すべきものは以下

• 現在のページのインデックスを表す変数(int)
• ページの変数を更新する関数
• bodyに設定する各ページ(Widget)
• BottomNavigationBar(Widget)

// 現在のページのインデックスを表す変数(int)
int _currentIndex = 0;

// ページの変数を更新する関数
void _onItemTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}

// bodyに設定する各ページ例
final List<Widget> _pages = [
  const Center(child: Text("ホーム")),
  const Center(child: Text("時間管理")),
  const Center(child: Text("設定")),
];

bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 選択中のインデックス
        onTap: _onItemTapped, // タップ時の処理
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "ホーム",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_time),
            label: "時間",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "設定",
          ),
        ],
      ),