この記事では、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　開発部　ハイ・アン