30代SEの自由帳

最初のタイトルは頓挫した

Flutter学習:3日目

Flutter udacity 学習 記録

学習3日目。

Build Native Mobile Apps with Flutterの13.Quiz: Code Your Own Category Widgetからスタート。

昨日に引き続き動画の内容をざっくりまとめつつ学習を進めます。 個人的解釈に基づいてまとめてるから認識違いもあるかと思うけど、私はこんな解釈で進めました。って感じで受け取ってもらえれば

13.Quizは昨日も記事にしてたけど、実は手を動かせてなかったので、まずは実際に手を動かしてみる。

13.Quiz: Code Your Own Category Widget

動画なし。自分で手を動かして要件にあったカスタムWidgetを作成しよう。

自分で手を動かすに当たって、引っ掛かったところ(動画見ただけだと分らなかったところ)を中心にまとめて見る。

You'll need the name, color, and iconLocation from main.dart

名前、色、アイコン用のクラスメンバを定義して、コンストラクタで指定。

まず、[名前]以外の型が分らないので調べた。ちなみに名前は[String]

要はInkWellに指定する色と、Iconに指定するアイコンなので、それぞれVSCodeのクイックリファレンスから

  • 色：Color
  • アイコン：IconData

CategoryクラスはStatelessWidget(不変)なので、クラスメンバも不変を表すように[final]で定義。

メンバを定義した時点で、もともと定義されていたコンストラクタconst Category();に赤線が引かれる。

コンストラクタでメンバの値確定させてね。ってことらしいので、要件通りコンストラクタで指定させるように引数に追加する。

自分で出来たのはここまで。
以降は回答例と比べて出来てなかったところ。

  • コンストラクタは名前付き引数ってのを使って定義してた。
    たぶん既存のWidgetクラスと同じようにプロパティ的に設定できるようにしてるのかな？確かにそっちの方が統一出来てて良いよね。

  • 指定必須にするために、[@required]って修飾子を付けるらしい。

  • 名前付き引数の場合は_xxxxって感じでprivateに出来ないみたい。まぁ名前公開してるからその時点でprivateな情報ではないよね。

  • Key key,
    これはたぶんおまじない的にカスタムWidget作ったら入れる必要ありそう。
    変数名的にWidgetをリスト管理した時とかのキーに使う感じ？superクラスにkeyを持ってるから、ここでも対応しておかないとsuperクラスに渡せないから定義しておこうね。位の解釈で。
    調べてないから合ってるかは不明だけど、自分の中で納得したからこのレベルで

  • 色の型はColorじゃなくて、ColorSwatchで定義されてた。
    よくわからないけど、ColorSwatchはColorの派生クラスだったので、より細かい指定が出来るんだと思う。
    ただ、英語はよくわからないので、とりあえずおまじない的にColorSwatchを使う方向で覚えておく。

Pass this information into your custom [Category] widget

Determine what properties you'll need to pass into the widget

You'll need the name, color, and iconLocation from main.dartで作ったコンストラクタにメンバを渡すだけ。

Build the custom widget here, referring to the Specs

とりあえず、↓の構成で作ってみた。

Container
    InkWell
        Row
            Icon
            Text

InkWellのcolorプロパティは2種類あったけど、動作からそれぞれ以下だった。

  • highlightColor：選択されている時の色
  • splashColor；押した瞬間に広がる波紋(splash)の色

このままだと、完成イメージと比べて隙間がない感じだったので、アイコンにpaddingを追加。

初期値(8.0)だと、まだ隙間が狭かったので、[16.0]を指定。ここら辺はなんかデザインの基礎的なのがあるんだろうか？8.0が良いよ。とか16.0が良いよとか。

あとは、選択した際のハイライト？が、実装=四角。完成イメージ=丸。だったので、角を丸める方法を調査。

borderRadius: BorderRadius.circular(xxxx)で出来るらしい。 xxxxは円半径っぽいので、今回は高さ(=直径)の半分(=100/2 = 50)を指定。

自分で出来たのはここまで。
以降は回答例と比べて出来てなかったところ。

  • Containerの上に、Materialを持たせてた。
    これはなんでだろ？これこそおまじない？デザイン思想的な問題なのかな？Containerはあくまで箱だからTopにしません的な。

  • Rowの上に、Paddingを持たせてた。
    これは見た目からは、全く気付かなかった。
    ただ、今回は単独だったけど、今後リストの要素としてこのカスタムWidgetを使うってなったときに、ここのPaddingが無いと、詰まって見えることになりそうなので、基本はPaddingで囲むってのは頭に入れておいたほうが良さげ。

  • RowのプロパティにcrossAxisAlignment: CrossAxisAlignment.stretch,を指定。
    Row内の要素に対するパティングの指定らしい。たぶんこれもおまじないというか初期設定というか。エクセルでいうところの表のプロパティ的な？ デフォルトはcenterらしい。今回指定しているstretchは全体を埋める感じ？

  • TextのプロパティでtextAlign: TextAlign.center,を指定
    これは、Rowのプロパティをstretchにした時点でテキストの位置が完成イメージからずれる(始点側にずれる？)ので、それを補正してる感じかな。

  • Textのプロパティでstyle: Theme.of(context).textTheme.headline,を指定してた。
    もうこれ反則だよね。。
    たぶん、これもエクセルのテーマ的な感じで、見出しならサイズ何とかが決まったテーマ的なのが定義されてる感じっぽいけど、 要求仕様にはサイズ:24.0としか書いてないので、回答例でいきなりテーマ使いだすのは反則かと。。。
    ※もしからしたらソース中のコメントにそこらへん書いてるのかも知れない1けど、英語読めないから読んでない。

今日のまとめ

見た目だけ完成イメージ通りのモノ。ってのは案外簡単に作れた。

けど、回答例と比べると色々足りてなかった。ここら辺はサンプル等の既存コード見ないと気づけないところなので、 やはり講座を一通り学習してからアプリ開発に入った方が良さそう。

あとはソースコメントが結構充実しているので、英語が読めればVSCode上で事足りそうなのも好感が持てる。 ただ、私は英語が読めないので結局ネット頼りなのが残念。。もうちょっと英語も勉強しないとね。。

  1. だとしたら、悪いのは圧倒的に私って話↩