Shuichi-Yのブログ

こんばんは！　「初めての Flutter アプリ」の続きです…

変更点を確認しましょう。
・まず、MyHomePage のすべての内容が新しいウィジェット GeneratorPage に抽出されています。MyHomePage ウィジェットの中で抽出されていないのは Scaffold だけです。
・新しい MyHomePage には 2 つの子を持つ Row が含まれています。1 つ目のウィジェットは SafeArea で、2 つ目は Expanded ウィジェットです。
・SafeArea は、その子がハードウェア ノッチやステータスバーで隠れないようにするものです。このアプリでは、このウィジェットが NavigationRail を包んで、ナビゲーション ボタンがモバイル ステータスバーなどで隠されるのを防いでいます。
・NavigationRail の extended: false の行は true に変更できます。そうすることで、アイコンの隣のラベルが表示されます。これ以降のステップで、これを水平方向に十分なスペースがあるときに自動的に行う方法を学びます。
・このナビゲーション レールには、2 つのデスティネーション（Home と Favorites）があり、それぞれにアイコンとラベルがあります。現在の selectedIndex の定義もしています。インデックスに 0 が選択されると最初のデスティネーションが選択され、1 が選択されると 2 つ目のデスティネーションがされます。以降も同様です。今のところ、0 にハードコードされています。
・また、このナビゲーション レールでは、onDestinationSelected でデスティネーションのうちの 1 つが選択されたときに何が起きるかも定義しています。現時点では、要求されたインデックス値を print() で出力するだけです。
・Row の 2 番目の子は Expanded ウィジェットです。Expanded ウィジェットは Row や Column で使用すると非常に便利です。これを使用すると、ある子は必要なだけのスペースを埋め（この場合は NavigationRail）、別のウィジェットは残りのスペースをできる限り埋める（この場合は Expanded）というレイアウトを表現できます。Expanded についての考え方を 1 つ言えば、「欲張り」だということです。このウィジェットの役割をもっと詳しく知るには、NavigationRail ウィジェットをもう一つの Expanded で包んでみてください。その結果、次のようなレイアウトになります。
・ナビゲーション レールには左側に少しの残りスペースがあればよいですが、2 つの Expanded ウィジェットが使用可能な水平方向のスペースをすべて分け合っています。
・Expanded ウィジェットの中には色の付いた Container があり、コンテナの中には GeneratorPage があります。
こんなに難しくて「初めての Flutter アプリ」ですね…

ここまでは、状態に関するすべてのニーズを MyAppState が満たしてきました。これまでに記述してきたウィジェットがすべてステートレスなのは、それが理由です。それらのウィジェットには、自身の変更可能な状態が含まれていません。どのウィジェットも自身を変更できません。必ず MyAppState を経由させる必要があります。
ナビゲーション レールの selectedIndex の値を保持する手段が必要です。また、onDestinationSelected コールバック内からこの値を変更できる必要もあります。
MyAppState の別のプロパティとして selectedIndex を追加することもできます。これは機能します。しかし、すべてのウィジェットが自分の値を自分の中に保存すると、すぐにアプリ状態が無意味に肥大化することは想像に難くないでしょう。
一部の状態は 1 つのウィジェットにだけ関連しているので、そのウィジェット内に留めるべきです。
State を持つタイプのウィジェットである StatefulWidget の説明に入りましょう。まず、MyHomePage をステートフル ウィジェットに変換します。
カーソルを MyHomePage の最初の行（class MyHomePage... で始まる行）に置き、Ctrl+. または Cmd+. を使用して [Refactor] メニューを呼び出します。次に、[Convert to StatefulWidget] を選択します。
IDE によって新しいクラス _MyHomePageState が作成されます。このクラスは State を拡張しているため、自身の値を管理できます（自身を変更できます）。また、古いステートレス ウィジェットの build メソッドが（ウィジェットに残らずに）_MyHomePageState に移動しています。これはそのまま移動し、build メソッドの内容は変わっていません。今は単に別の場所にあるだけです。
_MyHomePageState の先頭がアンダースコア（_）なのでクラスが非公開になり、これはコンパイラによって強制されます。
色々と自動で作成してますが、内容が分かってないのですぐに「元に戻す」を使用しています…