メモ用のブログ

技術系のメモとかを書いておきます

UdacityのBuild Native Mobile Apps with Flutterコースを受けてみる その2

結構日数が経ってしまいましたがその2です。 前回に引き続き、UdacityのFlutterコースの受講メモを書いていきます。 今回はFlutterの内部の動きやウィジェットの紹介の話(7〜11回)でした。

Udacityのコース www.udacity.com

7.Flutter's Reactive Framework

8.Flutter's Development Tools

  • ウィジェットの説明に入る前にFlutterの3つの開発ツールの紹介
  • ホットリロード
    • JITコンパイラが使われている時有効になる
    • 実機でもエミュレータでも使える
    • アプリを再起動したいときはAndroidStudioの緑色の三角ボタンを押す
  • ウィジェットインスペクタ
    • ChromeのWeb Inspectorみたいなもの
    • デバイスのピクセル、ウィジェット、ウィジェットツリー、アプリでウィジェットが生成されたコード行を行き来できる
    • インスペクタモードを使用するときはアプリが実行されている必要がある
    • AndroidStudioの view > tool windows から開く(もしくはウィンドウ右端のタブ)
    • Xのついた丸いアイコンが inspect ボタン
    • 2つの長方形のアイコンはプラットフォーム切り替えボタン
    • inspect ボタンを押してinspectモードにするとアプリの画面が青くなり、特定のウィジェットを検査できる
    • アプリ画面左下に出ている虫眼鏡アイコンをクリックすると、ウィジェットを選択できる
    • インスペクタを利用してウィジェットのパディング等の値を見ることができる
  • コードの自動整形
    • AndroidStudioの code>reformat code with dart format でdart形式でコードを自動整形できる

9. The Wonderful Things about Widgets

  • Widget
  • StatelessWidget
    • 不変
    • プロパティがfinalになっているので、一旦作成すると変更できない
  • StatefulWidget
    • ステートオブジェクトを持つ
    • 詳細は後で
  • Widgetがレイアウトでどのように使われるか
    • Widgetは一部のパラメータを解析してインスタンス化される
    • コンテナウィジェットはアプリの分割や既存のWidgetの修飾など色々な用途に使われるWidget
    • webでいうと、コンテナウィジェット=React Nativeのdivみたいなもの
    • コンテナウィジェットをカスタマイズするには、widthやheightなどのプロパティを入力していく
    • 殆どのWidgetは child または children プロパティを持っていて、Widgetを入れ子にするときに使う
    • child プロパティは paddingやマテリアルアプリなど、1つの子だけを持つwidgetに存在する
    • childrenプロパティは子にリストをとるような、column、ListViewウィジェットに存在する
    • 子を持たせなくてもよい(デフォルト動作)し、わざわざnullを入れたりする必要もない

10. Quiz: Explore Flutter Widgets

WIdgetの数がかなりたくさんあるので、しっかり覚えていかないとなーという感じでした。 Youtubeで公式が今週のウィジェットという動画を出しているので、こちらもチェックしていきたいです。

Flutter Widget of the Week - YouTube

次回は 11.Dissect Hello Rectangle から。

そろそろ手を動かすターンに入りそうなので楽しみです。