close

Navigator Flutter で の状態とナビゲーションの管理

Flutter は、 Navigator アプリ内の状態とページ ナビゲーションを一元管理するための強力なツールです。 これにより、明確なアーキテクチャと画面間の簡単なナビゲーションを備えたアプリを構築できます。

定義する Routes

の使用を開始するには、 アプリで Navigator 定義する必要があります。 ユーザーが移動できる個別の画面です。 MaterialApp を使用して定義し、 それぞれが にマップされる のコレクションを提供できます 。 routes Routes routes routes route Widget

例： 

MaterialApp(  
  initialRoute: '/',  
  routes: {  
    '/':(context) => HomePage(),  
    '/second':(context) => SecondPage(),  
  },  
)

上の例では、2 つの routes: '/'(home page) と '/second'(second page) を定義しました。 必要なだけ追加できます routes。

ページ間の移動

Navigator ページ間を移動するには、のメソッドを 使用できます。 一般的なメソッドの 1 つは、pushNamed です。これを使用すると、その の名前を指定することで別のページに移動できます route。

例： 

// Navigate to the second page
Navigator.pushNamed(context, '/second');

さらに、プッシュ方式を使用して別のページに移動したり route 、ページ間を切り替えることができます。

ページ間でのデータの受け渡し

PushNamed メソッドと引数パラメーターを使用して、ページ間でデータを渡すことができます。

例： 

Navigator.pushNamed(  
  context,  
  '/second',  
  arguments: 'Data from the home page',  
);

次に、ModalRoute.of と設定オブジェクトを使用して 2 番目のページからデータにアクセスできます。 

class SecondPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    String data = ModalRoute.of(context).settings.arguments;  
    // Use the data here  
  }  
}

前のページに戻る

前のページに戻るには、 の Pop メソッドを使用できます Navigator。 これにより、現在のページが閉じられ、スタック内の前のページに戻ります。

例： 

// Go back to the previous page
Navigator.pop(context);

 

結論

Navigator Flutter では、一元的な状態を管理し、ページ間を簡単に移動できます。 を使用すると Navigator 、明確なアーキテクチャでアプリを構築し、画面間を移動する際のユーザー エクスペリエンスを向上させることができます。