この記事では、Navigationを使用してFlutterでマルチスクリーンアプリケーションを構築し、routesを通して画面間でデータを渡す方法を調べます。
基本的なFlutterのシリーズのこの記事まで、主に単一画面のアプリを中心に説明してきました。 マルチスクリーンアプリケーションの構築を熱心に待っていれば、この記事が役に立ちます！ アプリケーションにマルチスクリーンを追加して、画面遷移する方法を見ていきます。
また、widget間でデータを渡す方法についても説明します。 このテーマについて詳しく見ていきましょう！
App Demoによるガイダンス
以下では、作成するサンプルアプリケーションの概要です：
ご存知のとおり、このアプリケーションには2つの画面があり、この画面から別の画面にデータを渡したい場合はどのように構築できるか見てみましょう！
The First Screen（最初の画面）
以下は、このアプリケーションで使用する最初の画面のsnapshot codeです。別のファイル（first_screen.dart）に別のWidgetを書き込み、後でmain.dartファイルにインポートします。これは、コードの量を減らし、メンテナンスを容易にし、パフォーマンスを最適化しできます。
FirstScreenがstateless widgetであることがわかります。 概要では、appBarとBodyセクションを含むScaffoldがあります。 Bodyセクションには、コラムWidget（Widgetがコラムでビューを表示する）があり、コラムの子Widgetは、それぞれSizedBox、Text、およびElevatedButtonです。Raised Buttonをクリックすると、ナビゲーターは2番目の画面を最初の画面の上部に2番目の画面の識別子名(named route)で遷移します。 これについては後でもっと説明します。
ナビゲートしたい画面をFlutterに認識させるために、その画面の名前に通して遷移します。 したがって、この画面を使用することを宣言するところでsecond_screen.dartをインポートする必要があります。
注意：ナビゲートする必要のある各画面（各scaffold widgetは個別の画面として見なされます）には、固有の識別子が必要です。 ここでは、両方の画面でstatic constとしてrouteNameを定義しました。
The second screen (2番目の画面)
別のsecond_screen.dartで宣言された2番目の画面には、次のコードが含まれています。
このWidgetのコード構造は基本的に最初の画面と同じですが、ボタンが1つ追加されます。 ここでは、ナビゲートする必要がある画面をrouteName定数でナビゲートできるように、first_screen.dartをインポートします。 2番目のボタンは TextButtonです。FlatButton がpop（）メソッドで最初の画面に遷移するために使用されます。 pop（）メソッドは、スタックからWidget/トップ画面を削除するだけです。 これについては、さらに詳しく説明します。
main.darrt ファイル
ナビゲーションの設定はまだ完了していません。 また、main.dartファイルには、MaterialAppWidgetにあるすべての画面のルートを登録する必要があります。
main.dartファイルにfirst_screen.dartウィジェットとsecond_screen.dartウィジェットの両方をインポートしたことがわかります。 デフォルトのルートページでは：アプリが起動される時にinitialwidget/screenとしてFirstScreen（）を使用しています。
また、アプリケーションの最上位のroutesについて説明したと気付いたこともあります。 マルチスクリーンの場合は、ここですべてのスクーンを登録する必要があります。
上記のようなroutesを宣言する必要がある理由
FlutterでNavigatorの動作は、対応する多くのルートのマップで名前付きルート名（route）を検索するようなものです。
名前が有効な場合、builder（）{...}メソッドが連結されます。つまり、WidgetBuilderを使用して、Flutterアプリで画面ナビゲーション操作を実行するMaterialPageRouteを作成します。
route nameにstatic constを使用するのはなぜでしょうか？
アプリの外部のrouteテーブルで名前を直接宣言してから、その値を使用して、ナビゲーションすることで、 route nameのみを使用することができます。 ただし、 route nameを更新する必要がある場合は、使用したすべての場所でroute nameを変更する必要があります。
また、ナビゲーションでの使用中にタイプミスがあると、予期しないエラーが発生し、追跡が難しくなります。 それで、単一の変数に使用する静的定数を使用します。
これから、実際のroute nameの値がWidget内にあり、多くの場所で変更する必要があるときにいつでも変更できます。これは、route nameを代入して使用するためのより簡単なアプローチです。
パラメータを使用してroute間でデータを渡します。
Routeでこのscreen/widgetから別のscreen/widgetにデータを渡すことができます。次の例を参照してください。recipeのリストがあり、recipesをクリックすると、詳細なrecipeのrecipe detailsを表示する別の画面に移動します。
recipe detailsの画面で、バックエンド/サーバーから対応するデータを取得できるように、選択されたどのrecipeのID（recipe_id）を知る必要があります。 したがって、recipe listの画面からrecipe_idを取得するには、次のように記述します。
ここでは、routeのパラメータとしてrecipeIdを使用していることがわかります。今、 2番目の画面で、このrecipe_idが必要な場合は、次のようにrouteのパラメータからデータを抽出できます。
最後に、前の画面のデータが現在の画面に表示されます。 これは、データフローを理解するための非常に基本的な例です。
ここまで第一部は終わりです。この記事の第二部でお会いしましょう!
株式会社INTS 開発部 ハイ・アン