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

この記事では、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

Read More