学習2日目。

昨日に引き続き動画の内容をざっくりまとめつつ学習を進めます。

7.Flutter's Reactive Framework

Flutterで作るUIはWidgetの集まりだよ。WidgetはDartで記述して定義するよ。以上

8.Flutter's Development Tools

Flutter内蔵の便利ツールについて紹介するよ。

Hot Reload

デバッグ実施中に修正したStatefulWidgetに対する変更を即座にアプリに反映できるよ。
Flutter Inspector：

デバッグ中にしか使えないよ。表示中のWidgetを階層表示してくれるよ。

Selectモードにすれば、画面上のWidgetを選択するとソース上でWidgetを定義している箇所にジャンプするよ。

逆も然り(ソース上をクリックすると画面上のどこに対応しているか表示される)らしいけど、VSCodeでは出来なかったので詳細は不明。

ちなみにVSCodeでは、デバッグ中にコマンドパレットから[Flutter: Open DevTools Widget Inspector page]で開けるよ。
Auto Formatter

コードを自動で整形してくれるよ。

この機能を有効に活用するために、各Widgetのプロパティの最後には","を忘れずに付けると良いよ。

以上

Flutterには便利なWidgetが初めからパッケージとして付属されているよ。

WidgetはStatefulとStatelessの2つがあるよ。

Statelessは不変。Statefulは詳しいことは割愛。

あとは動画でContainerWidgetを使ってWidgetについて簡単に説明。以上

動画なし。Widgetに関するクイズだよ。公式Widget集を見て答えてね。

↓をimportすると色々なWidgetが使えるよ。

import 'package:flutter/material.dart';

runApp();でWidgetを起動出来るよ。

基本的なアプリ動作が組み込まれたWidgetとして、MaterialAppWidgetってのがあるから、それを使えば簡単にデザインできるよ。

MaterialAppの右上に表示されるデバッグバナーは↓で消せるよ。

MaterialApp(
    debugShowCheckedModeBanner: false,
),

ScaffoldWidgetを使えばアプリバー(画面上部のバー)やナビゲーションバー(画面下部のバー)を簡単に定義できるよ。

そうやってWidgetを組み合わせて行くと、だんだんネストが増えて酷いことになるから、適宜関数化してコードをすっきりさせましょう。

Widgetをセンターに配置したい時はCenterを使ってね。 AndroidStudioなら記述済みのWidgetを簡単にラップ出来るよ。

ちなみにVSCodeでもWidgetの定義位置を右クリックして[リファクター]を選択すれば同じことが出来るよ。

カスタムWidgetも簡単に作れるよ。

動画ではリスト構成用のカスタムWidgetの作り方(構成)を説明してるよ。

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

とりあえず、ここからベースとなるソースを落として、TODOをひたすら解消していけばOKな作りにはなってるよ。

わからなかったら、こっちに回答例もあるので、回答例を見ながら分らないところを調べるスタンスで良さそう。

なんか"よ"が多くて自分で書いててうざったくなってなってきたから、次からは語尾をかえるよ。