UIの作り方を【Flutterの教科書】で学びました。備忘録です。

この動画で学べること

Flutter は Widget を組み合わせてUI を作る
Widget には様々な種類があり、それぞれ役割がある
cmd +5でホットリロードしてコードの変更を画面に反映できる
Widget はプロパティを与えることでカスタマイズできる
cmd で Widget をラップしたり切り出したりできる

【Flutterの教科書】② UIの作り方。Twitterのタイムラインを作ってみよう。
https://youtu.be/bPGfd0xI1g4?si=Oz-6a0g1llW-6bNS

目次ごとに備忘録を残しました。

## 00:59 sampleプロジェクトを開く

なければ、表示→コマンドパレット→Flutter: NewApplication Projectから作成

05:40 TwitterUIの導入とHello, world! の解説

voidmainがまず実行される
runappが実行される
その中にあるのがウィジェット
Flutterというのはウィジェットを組み合わせて作っていく

08:10 StatelessWidget の解説

stlと入力すると、スニペットが表示され、Flutter Stateless Widgetを選択
そうするとStateless Widgetの雛形が組み上がった状態で記述される
mywidgetが選択というかマーキングされている状態になっている。これは名前を変えられると伝えてくれている
今回はMyAppに変更。これで初めてのWidgetを作成するこtができた
サンプル上のrunapp何にサンプルコードがあるので削除します・削除したところ〇〇MyAppと置き換える

  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
↓
runApp(MyApp());

09:40 MaterialApp と Scaffold で下地を作る

MaterialAppを簡単に言うと、いろんな部品の基礎的な設定データが入っているイメージ
これがあるからこそ、例えば、文字の色やサイズなと変えられるようになる
MaterialAppのhomeというのがあります、homeに書かれたものが実際に表示されるWidgetになる
その今回表示させるものをScaffoldにします。
Scaffoldあるからこそ下地になって色々並べることができるようになるイメージ（単語の意味は足場）土台
これがだいたいの基本になる

12:31 AppBar とプロパティについて

Scaffoldの中に展開していく　appBar: AppBar(),
appBarプロパティにたいしてAppBarWidgetを与えている
このappBarプロパティとは何なのか？このScaffoldの中でどこの位置に何を表示するのか？をやっている
body: AppBar(),とすると、全体がAppBar領域に変わる。AppBarには高さという概念がないのでbodyにすると全体になる仕組み
方のタイプによって、与えられる与えられないがある。例えばappBar: Text('Appbar') のようにTextは与えられないとか

16:10 Text と TextStyle でタイトルをつけよう

appBarの中に入れて色々
プロパティが使える使えないは、型定義とかVSコード内で調べることができる

19:35 Row で横に並べよう

rowにはchildrenというプロパティを入れられる。これは複数のWidgetを入れられる配列
横にWidgetを並べることができる

21:40 Column とラップの使い方

ラップの方法を学ぶ。ショートカットキーがある
今回はbody: Row(　のRowをラップしてみます
cursorを合わせて、ctrl + . を打つと、一覧が表示される（※うまくいかなかった選択してできた
こうするとRowがcolumnに変わり、childrenの中にrowが入っている感じでラップされた。楽ちん
この様に立てに並べたいときはcolumnを使用する

24:25 SizedBox で隙間を開けよう

左揃えにしていきたい
crossAxisAlignmentプロパティを使用して左揃えにする。左揃え・センター揃え・右揃えが設定できる
SizedBoxで隙間を開ける。SizedBoxは決められた高さ横幅のBOXを作るWidget。Widgetの大きさを決める。単体で使用すると無色透明のなんでもない空白の箱ができる。これを活用してWidgetとWidgetの間に隙間を開けたりすることができる
SizedBox(width: 8)とすると、横に８の空白を開ける。隙間を開けたいWidgetの間に記述する
高さを開けたいときはSizedBox(height: 4),など数値は適宜変えていく

25:55 Padding で隙間を開けよう

htmlと同じイメージ。周りに隙間を開けられるプロパティ。隙間を開けたいWidgetにPaddingでラップする
今回はbody: Column(の　Columnにラップします。下記のように変わる

        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
          
EdgeInsetsの使い方
EdgeInsets.all→上下左右に隙間を開ける
EdgeInsets.only→上下左右のどれか指定して隙間を開けられる（例EdgeInsets.only(top:16)
 EdgeInsets.symmetric→左右にいくつ、上下にいくつと上下と左右を分けて設定できる  EdgeInsets.symmetric(horizontal: 4,vertical: 8),

27:34 CircleAvatar でアイコンを表示しよう

文章の横にアイコンを表示させる。位置はパディング内の横並びのうちの一番上（見た目は左）
CircleAvatar(),を追加。位置はデフォルトセンターになっているのでcrossAxisAlignmentでstartで上揃えにする
child: Rowとchildren: [　の間で指定する
見た目がそのままだと、真っ青のマルなので、画像に変えてみる
CircleAvatar()の中にbackgroundImage: NetworkImage(でURLをしてネット上の画像を入れてみる

30:33 IconButton でいいねボタンをつけよう

  IconButton(
    onPressed: () {}, // ボタンを押したときに実行する内容が書ける。今回は空なので実行しません。
    icon: Icon(
    Icons.favorite_border), // Icon も Widget のひとつ。Icons. と打つと候補がたくさんでるので好きなアイコンに変更することが可能。

32:08 Widget を切り出してみよう

例えば一覧Pageとかで何度も繰り返す箇所があるとする。こういうところを１つのWidgetとして切り出すことができる
対象を選択してラップするときと同じくctrl + . でExtract Widget選択する。そうすると、コマンドパレットにWidget名を入力すると
今まであれこれ書いていた選択した対象がさっき決めたWidget名に切り替わった！
そして、下の方に今まであれこれ書いた選択したソースが決めたWidget名で作られている！感動。
これでWidget名だけで使い回すことができる

33:43 SingleChildScrollView でスクロールさせよう

要素が無限に増えるときなどは、スクロールする箱でラップする
ラップしたい要素を選択ctrl+ . でラップしたい箱を見つける。ない場合はWrap with Widgetと仮に囲んで、Widget名を変える
SingleChildScrollView　これで囲むとスクロールできるようになる。スクロールできるWidget