【Flutter】BottomNavigationBarとuseStateで簡単タブメニュー実装

こんにちは。趣味グラマのNobu(@nm_aru)です。

Flutterでタブメニューを作成する時に、BottomNavigationBarを使うと思います。

その際、今どのタブがアクティブかを管理するために、StatefulWidgetのstateを使う方法がよく例示されます。公式ドキュメントでもそうなってますね。

BottomNavigationBar class - material library - Dart API

API docs for the BottomNavigationBar class from the material library, for the Dart programming language.

api.flutter.dev

ただ、StatefulWidgetは作るのが面倒なので、今回はflutter_hooksのuseStateを使う事で超簡単に実装してみました。

もっとしっかり実装する場合は、各タブを表現したenumを作って、StateProviderを使ったりもあります。

まとめ

hooksのおかげで、StatefulWidgetを使わなくても良いシーンが増えたので、非常にありがたいパッケージです。