基本的なフラッター：マルチスクリーンアプリケーションを作成します （第一部）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1762420/59cb05c9-a589-4313-d067-04f165e98c1f.png)
<p>この記事では、<strong>Navigation</strong>を使用して<strong>Flutter</strong>でマルチスクリーンアプリケーションを構築し、<strong>routes</strong>を通して画面間でデータを渡す方法を調べます。</p>

<!-- wp:paragraph -->
<p>基本的なFlutterのシリーズのこの記事まで、主に単一画面のアプリを中心に説明してきました。 マルチスクリーンアプリケーションの構築を熱心に待っていれば、この記事が役に立ちます！&nbsp; アプリケーションにマルチスクリーンを追加して、画面遷移する方法を見ていきます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>また、widget間でデータを渡す方法についても説明します。 このテーマについて詳しく見ていきましょう！</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>App Demoによるガイダンス</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>以下では、作成するサンプルアプリケーションの概要です：</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh6.googleusercontent.com/dgyE1Vy6iBQi4UHQxakkEYZgl3FaAgvfoKK_qOopfTT8cHT7LS_mKyiEo6YPi5mCVC58sBAJ-IqNW4ppMrPEEuv2eNijnMKB29Q0JCU3iINAG_O9rGhrWNccWHpfjw" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>ご存知のとおり、このアプリケーションには2つの画面があり、この画面から別の画面にデータを渡したい場合はどのように構築できるか見てみましょう！　</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>The First Screen（最初の画面）</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>以下は、このアプリケーションで使用する最初の画面のsnapshot codeです。別のファイル（<strong>first_screen.dart</strong>）<strong>に</strong>別のWidgetを書き込み、<strong>後でmain.dart</strong>ファイルにインポートします。これは、コードの量を減らし、メンテナンスを容易にし、パフォーマンスを最適化しできます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh4.googleusercontent.com/-i7HCTwcH3fGhKEKNC06bpBIysl3Gl8AZwtzcW9RhaazXGU_Pn4o6g__j5NHFOO9AklZgVZaQWNrbGgPwwVRd6mAM--vNl4msaFl6cdKCSL2BVK81Mq0o7OkJ7TYKA" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>FirstScreenがstateless widgetであることがわかります。 概要では、appBarとBodyセクションを含むScaffoldがあります。 Bodyセクションには、コラムWidget（Widgetがコラムでビューを表示する）があり、コラムの子Widgetは、それぞれSizedBox、Text、およびElevatedButtonです。Raised Buttonをクリックすると、ナビゲーターは2番目の画面を最初の画面の上部に2番目の画面の識別子名(named route)で遷移します。 これについては後でもっと説明します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ナビゲートしたい画面を<strong>Flutter</strong>に認識させるために、その画面の名前に通して遷移します。 したがって、この画面を使用することを宣言するところで<strong>second_screen.dart</strong>をインポートする必要があります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>注意：ナビゲートする必要のある各画面（各scaffold widgetは個別の画面として見なされます）には、固有の識別子が必要です。 ここでは、両方の画面でstatic constとしてrouteNameを定義しました。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>The second screen (2番目の画面)</strong><strong>&nbsp;</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>別のsecond_screen.dartで宣言された2番目の画面には、次のコードが含まれています。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh4.googleusercontent.com/QI4YUFF8DyiH6NpjFsX3OMtGfC8dG5lYwjpGlNI9RbeTi_KKtkwjXR6AokgRIH0KiFFGcNEEANScgSttbr3YwU5u8voQuhfPVJ130gFEJbMIWicYeUAivs1Rh0jqfw" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>このWidgetのコード構造は基本的に最初の画面と同じですが、ボタンが1つ追加されます。 ここでは、ナビゲートする必要がある画面をrouteName定数でナビゲートできるように、<strong>first_screen.dart</strong>をインポートします。 2番目のボタンは TextButtonです。FlatButton がpop（）メソッドで最初の画面に遷移するために使用されます。 pop（）メソッドは、スタックからWidget/トップ画面を削除するだけです。 これについては、さらに詳しく説明します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>main.darrt ファイル</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ナビゲーションの設定はまだ完了していません。 また、<strong>main.dart</strong>ファイルには、MaterialAppWidgetにあるすべての画面のルートを登録する必要があります。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh4.googleusercontent.com/sgZwkYh0M-PuFz7iIHXWMiW4FokJqEe4F_TIIxZ0Hu-pkqnM2FHCuKYAkK48fFw8uxTcYfbnP-Ukg8C2KRetk3ZZjz4WoJ93wUikBZA5StvU8X8xgY4Jul6Dbh0zRQ" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>main.dart</strong>ファイルに<strong>first_screen.dart</strong>ウィジェットと<strong>second_screen.dart</strong>ウィジェットの両方をインポートしたことがわかります。 デフォルトのルートページでは：アプリが起動される時にinitialwidget/screenとしてFirstScreen（）を使用しています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>また、アプリケーションの最上位のroutesについて説明したと気付いたこともあります。 マルチスクリーンの場合は、ここですべてのスクーンを登録する必要があります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>上記のようなroutesを宣言する必要がある理由</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>FlutterでNavigatorの動作は、対応する多くのルートのマップで名前付きルート名（route）を検索するようなものです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>名前が有効な場合、builder（）{...}メソッドが連結されます。つまり、WidgetBuilderを使用して、Flutterアプリで画面ナビゲーション操作を実行するMaterialPageRouteを作成します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>route nameにstatic constを使用するのはなぜでしょうか？</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>アプリの外部のrouteテーブルで名前を直接宣言してから、その値を使用して、ナビゲーションすることで、&nbsp;route nameのみを使用することができます。 ただし、&nbsp;route nameを更新する必要がある場合は、使用したすべての場所でroute nameを変更する必要があります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>また、ナビゲーションでの使用中にタイプミスがあると、予期しないエラーが発生し、追跡が難しくなります。 それで、単一の変数に使用する静的定数を使用します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>これから、実際のroute nameの値がWidget内にあり、多くの場所で変更する必要があるときにいつでも変更できます。これは、route nameを代入して使用するためのより簡単なアプローチです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>パラメータを使用してroute間でデータを渡します。</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Routeでこのscreen/widgetから別のscreen/widgetにデータを渡すことができます。次の例を参照してください。recipeのリストがあり、recipesをクリックすると、詳細なrecipeのrecipe detailsを表示する別の画面に移動します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>recipe detailsの画面で、バックエンド/サーバーから対応するデータを取得できるように、選択されたどのrecipeのID（recipe_id）を知る必要があります。 したがって、recipe listの画面からrecipe_idを取得するには、次のように記述します。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh5.googleusercontent.com/3WUsqIYWB7cvol4mKYfVXzlBtYejOyB6IF5oV3OjOp-kJdXE1tc-fKEhktr3cIkP8k6PTObrGIwodE6Ji-C1aTm3CTnqo41yybb4HT15uq-qAzIHzgma4omJQzXUHw" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>ここでは、routeのパラメータとしてrecipeIdを使用していることがわかります。今、 2番目の画面で、このrecipe_idが必要な場合は、次のようにrouteのパラメータからデータを抽出できます。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh5.googleusercontent.com/3peRV6eUcGVogSf4ugzRpGEkqNuHmTn0A6qVjUIA2TVdj793yK4InwJK9ik9gTsJ0n0K8C67fqNd0rWB8ksgb6UpKUjnsM-nApBm4Or_bRsb3ke0b7ImkGW60WkiYg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>最後に、前の画面のデータが現在の画面に表示されます。 これは、データフローを理解するための非常に基本的な例です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここまで<strong>第一部</strong>は終わりです。この記事の<strong>第二部</strong>でお会いしましょう!　</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://ints.vn">株式会社INTS</a>　開発部　ハイ・アン</p>
<!-- /wp:paragraph -->