この記事はFlutter 3.24を基準に書かれています。
Flutterのインストールが完了しているものとして進めます。
Flutterでページ間を移動できるようにする際に、私がよく使う初期設定の方法を紹介します。
開発を始める前に、目標と条件を決め、必要なパッケージをインストールします。
👨💻
開発の前に、Flutterが標準で提供するページ遷移に加えて、次の条件を設定します。
- ログインページを作り、ログイン後にだけ、ほかのページへ移動できるようにします。
FlutterSecureStorage
を使います。
➡️ リンク:ログインページの分岐 (FlutterSecureStorage)
- ログインページにはナビゲーションバーを表示せず、ログイン後は
すべてのページ
に表示します。
➡️ リンク:下部ナビゲーションバーを設定する
- 各タブの配下にさらに別のページがあり、深い階層のページを表示中にタブを選んだ場合は
そのタブ
へ移動します。
ただし、すでに選択しているタブをもう一度選んだときは、そのタブの最上位ページ
へ戻るようにします。
➡️ リンク:ナビゲーションバーのタブイベントを設定する
- ログイン以外のすべてのページで、下部ナビゲーションバーを使わなくても、
別のボタン
でほかのタブへ移動できるようにします。
➡️ リンク:ナビゲーションバーのタブイベントをウィジェットから使う
Flutterプロジェクトを作成します。
flutter create navigationbar_example
作成したプロジェクトを実行します。
cd navigationbar_example
flutter run

プロジェクトが正常に実行されていることを確認できます。
FlutterSecureStorageとGetのインストール 🔗
flutter pub add flutter_secure_storage get
pubspec.yamlにパッケージが追加されていることを確認します。
dependencies:
flutter_secure_storage: ^9.2.4
get: ^4.6.6
次の記事では、設定した目標と条件に合わせて、FlutterSecureStorageを使ったログインページを作り、ナビゲーションバーを追加する方法を説明します。