Flutter Bottom Navigation Barの実装

アプリのデザインでよくある画面下部にナビゲーションバーを配置するレイアウトをFlutterで表現するには、Bottom Navigation BarというWidjetを用いる。

サンプル。

See the Pen Flutter BottomNavigationBar sample by Sugar (@keyan0to1) on CodePen.

‍


bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.movie),
            title: Text('動画'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('設定'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

itemsはメニューボタンとなるウィジェットの一覧を設定します。
currentIndexは選択されているIndexです。
onTapはメニューをタップした時のイベントを設定

公式ドキュメント

BottomNavigationBar class

Flutter Bottom Navigation Barの実装

Tags