[Flutter]はじめてのFlutter6[YOUTUBEっぽいフロントを作る]

#今日やること

- YOUTUBEののフロント画面作成によりFlutterの作り方のイメージを掴む。

#結論

- 列と行を多重に組み合わせて画面をつくる
- まだHTMLとCSSに毛が生えた程度の実装

#完成イメージ
<img width="293" alt="Screen Shot 2020-07-13 at 18.40.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665832/40989be6-01b8-0980-5adb-b11ce970c00d.png">

##完成コード

```
import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final items = List<String>.generate(10000, (i) => "Item $i");
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor:Colors.white),
      home: Scaffold(
      appBar: AppBar(
//        centerTitle: false,
        leading:Icon(
          Icons.videocam
        ),
       title: const Text(
         'Hello Youtube!'
       ),
        actions:<Widget>[
          SizedBox(
            width:44,
           child: FlatButton(
            child:Icon(Icons.search),
             onPressed: (){

             },
            ),
          ),
          SizedBox(
           width:44,
           child:FlatButton(
               child:Icon(Icons.more_vert),
               onPressed: (){
            },
           ),
          ),
        ]
      ),
          body: Container(
            child: Column(
              children:<Widget>[
                Row(
                  children:<Widget>[
                    SizedBox(
                      width: 60,
                      child: Image.network(
                          'https://lh3.googleusercontent.com/OQicdb5sirirCCTLq2Z1J4tR_lU1DuYi7NMlaGvYBIYoi9jUuhI2Li4U_P3PDB1C4VcKtCLIoxyZX6EWPqeSfAgire5ktt0=s160-c'
                      ),
                    ),

                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          const Text(
                          'はじめてのFlutter',
                         ),
                          FlatButton(
                            child:Row(
                              children:<Widget>[
                                Icon(Icons.alarm),
                                Text('登録済み'),
                                Text('チャンネル登録者数　100万人')
                              ],
                            ),
                              onPressed:(){
                              }
                          )
                       ],
                    ),
                   ],
                ),
                Expanded(
                  child:ListView.builder(
                    itemCount:items.length,
                    itemBuilder:(context,index){
                      return ListTile(
                        contentPadding: EdgeInsets.all(8),
                          leading: Image.network(
                              'https://lh3.googleusercontent.com/OQicdb5sirirCCTLq2Z1J4tR_lU1DuYi7NMlaGvYBIYoi9jUuhI2Li4U_P3PDB1C4VcKtCLIoxyZX6EWPqeSfAgire5ktt0=s160-c'
                          ),
                        title:Column(
                          children:<Widget>[
                            Text('[はじめてのFlutter]まずはここから ${items[index]}'),
                            Row(
                              children:<Widget>[
                                Text('10k再生'),
                                Text('1日前'),

                              ]

                            )

                          ],
                        ),
                          trailing:Icon(Icons.more_vert),
                      );
                    }
                  )
                )
            ],
      ),
    ),
    ),
    );
  }
}

```
#AppBar

leading,title,actions,flexbleSpace,bottomそれぞれが配置される場所が決まっている。
（※先輩方　これらはなんと呼べばよいのでしょうか？Widgetでしょうか？）

公式ドキュメントに具体的な図があるので確認してみてください。
[公式ドキュメント：AppBar]
(https://api.flutter.dev/flutter/material/AppBar-class.html)

##スライド可能なAppBarを作りたい場合は、SliberAppを使う。

[公式ドキュメント：SliverApp](https://api.flutter.dev/flutter/material/SliverAppBar-class.html)

#Container
margin,paddingをもつ箱。

#行方向にWidgetを複数を並べる

```
final items = List<String>.generate(10000, (i) => "Item $i");
```

```
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('${items[index]}'),
    );
  },
);
```

[公式ドキュメント：Work with long list]
(https://flutter.dev/docs/cookbook/lists/long-lists)

#childとchildrenはいつ使い、どちらを使うか

- いつ使うか

->Container,Center,Row,Columnなど、箱っぽいwidget?に使うらしい。

- どちらを使うか

child : 
 ->配下に単一のwidgetを持つ。
children:<Widget>
 ->配下に複数のwidgetをもつ。

#今後理解したいこと
, ;の使い分け(,は並列で;が完了だと思うが、どこが完了としてよいのかまだ理解できていない。）
ある文字とある文字の左側を合わせたいとき（flex?)