Flutter学習:4日目
学習4日目。
Build Native Mobile Apps with Flutterの14.AppBars and ListViews からスタート。
昨日に引き続き動画の内容をざっくりまとめつつ学習を進めます。 個人的解釈に基づいてまとめてるから認識違いもあるかと思うけど、私はこんな解釈で進めました。って感じで受け取ってもらえれば
14.AppBars and ListViews
Flutterで作った画面は全部Widgetで構成されてます。
Routeってのもあるけど、単純に画面やページの別名です。
15.Quiz: Code the Unit Converter AppBar and Category Route
動画なし。自分で手を動かしてカテゴリールートを作ろう。
自分で手を動かすに当たって、引っ掛かったところ(動画見ただけだと分らなかったところ)を中心にまとめて見る。
Import the CategoryRoute widget
[category_route.dart]をインポートするだけ。
Instead of pointing to exactly 1 Category widget,~
[Container]の変わりに[CategoryRoute]を生成するだけ。
Check if we need to import anything
[category.dart]をインポートするだけ。
Create a list of the eight Categories, using the names and colors
[Category]のリストを作れ。とのことだったけど、そもそもlistの定義方法がわからないので調べた。
可変長Listは[]で定義とのことだったので、final Category categories = []としたが怒られた。
Categorryをintにしても怒られる。表示されているヒントを見ると、右辺でキャストしたら？と言われてるので、
final categories = <Category>[]としたら通ったっぽい。
あまり納得は出来てないけど、挙動的に可変長領域に対して型が指定できないみたい。なんなんだろ静的型付けがデフォじゃないからなのかな？
とりあえず制約として覚えておく。
要素の追加はaddだったので、ループで8リスト分登録。アイコンはSSに合わせて全部Icons.cakeで
Create a list view of the Categories
childに[ListView]指定して、[ListView]のchildrenに作っておいたリストを指定。
Paddingはsymmetricを指定するとhorizontal指定が出来るっぽい。
Create an App Bar
appBarの編集。タイトル入力して、背景色を本体と合わせて、文字色を黒くして、センター揃えにして、文字サイズを合わせておしまい。
Define any constants
今回は背景色が共通なので背景色だけ定義。const Color _backgroundColor = Colors.green[100]で定義したら怒られた。
const Color _backgroundColor = Colors.greenならOK。定義見るとgreen自体はconstになっているけど、[100]の部分にあたる、_swatchはfinal。。
まぁ最初constにして怒られたらfinalに変える。位で良いかな。。。
自分で出来たのはここまで。
以降は回答例と比べて出来てなかったところ。
今回からTODO毎ではなく全般で
ListViewの生成はコンストラクタではなく、builderを使ってた。 まだイメージついてないけど、静的リスト=コンストラクタ。動的リスト=builderってことらしい。
itemBuilderがindexを指定する関数になってるので、たぶん1リスト毎にビルドさせるってことなのかな？だとすると静的リストよりレスポンスかかりそうだから、静的に出来るならコンストラクタの方が良い気がするけど、どうなんだろ。PaddingがPaddingWidgetじゃなくて、プロパティで指定してた。 まぁリファレンスとか見てない私が悪いんだろうけど、なんだろ。。
これプロパティで存在してるなら、今までの動画で説明してたPaddingWidgetってなに？プロパティとして存在してないWidgetがあるってことなんですかね。。なんかモヤモヤ。。
今日のまとめ
だんだんアプリっぽくなってきた。
次はルートの移動あたりかな？
