見出し画像

Flutterの`Navigator`について、さらっと知るための記事

gorojy

Flutterにおける `Navigator` は、アプリケーション内の画面（ルート）間の遷移を管理する非常に重要なクラスです。`Navigator`を使用することで、新しい画面への移動、画面の置き換え、画面スタックからの現在の画面の削除など、多くのナビゲーション操作が可能になります。ここでは`Navigator`の基本的な概念と使用方法について解説します。

基本的な概念

  1. ルート（Route）: ルートは画面やページを意味します。Flutterでは、各画面は`Route`オブジェクトとして表されます。

  2. ナビゲーションスタック: `Navigator`は内部的にナビゲーションスタック（LIFOスタック、後入れ先出し）を使用して、アプリ内のルート（画面）を管理します。新しいルート（画面）を追加すると、それがスタックのトップになります。ユーザーが戻る操作をすると、スタックのトップのルートがポップされます。

主なメソッド

  1. `Navigator.push`: 新しいルート（画面）をナビゲーションスタックに追加し、その画面に遷移します。

  2. `Navigator.pop`: スタックのトップにあるルート（現在の画面）をナビゲーションスタックから削除（ポップ）し、前の画面に戻ります。

  3. `Navigator.pushReplacement`: 現在のルートを新しいルートで置き換えます。これは、例えばログイン画面からホーム画面に遷移した後、戻るボタンでログイン画面に戻らないようにする場合などに使われます。

  4. `Navigator.of(context)`: 現在の`BuildContext`に関連付けられている`Navigator`を取得します。

使用例

// 新しい画面に遷移
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

// 現在の画面をポップして前の画面に戻る
Navigator.pop(context);

// 現在の画面を新しい画面で置き換える
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

注意点

  • `context`が重要です。`Navigator`のメソッドを使用する際には、適切な`BuildContext`を渡す必要があります。通常、これはウィジェットの`build`メソッドの引数として提供されます。

  • `Navigator`の操作は、アプリのユーザーインターフェイスとユーザーエクスペリエンスに大きな影響を与えます。適切な画面フローを設計することが重要です。


いいなと思ったら応援しよう！

gorojy
よろしくお願いしますッ！