【Flutter】プロジェクト生成時のデフォルトコードを読み解く

DartどころかJavaの右も左もわからないけど
小さなことから少しづつステップアップしていくぞ…

前記事：[Flutterを始めたいメモ](https://qiita.com/frtklog/items/d6889703f69042735bc8)

##プロジェクトを作った時のデフォルトコード
![スクリーンショット 2020-06-12 7.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607742/54ede028-e450-f57b-16f6-b27197cdb41e.png)
＋ボタンをクリックしたらカウンターを増やしていくデモコードですね。
ちょっとずつ何してるのか読んでみる

```dart
void main() => runApp(MyApp());
```
アプリが実行されたらまずMyAppクラスを読み込むよ

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( -- 省略 -- );
  }
}
```
MyAppクラスはStatelessWidgetクラスを継承したクラスだよ
継承ってなに？ -> [初心者のためのDart 2入門](https://www.tuyano.com/index3?id=5679974795182080&page=6)
overrideって何？ -> [初心者のためのDart 2入門](https://www.tuyano.com/index3?id=5679974795182080&page=7)
StatelessWidgetという大元となるクラス（スーパークラス）にある、
buildという関数を上書きして使うよってことですね

StatelessWidgetについて…[公式API](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html)
ふわっとした解釈ですが
buildメソッド(返り値にWidgetもしくはテキストを返す)で、作ったUI構築情報を返り値にすることで画面に表示する、という感じでしょうか。

```dart
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
```
MaterialAppについて...[公式API](https://api.flutter.dev/flutter/material/MaterialApp-class.html)
アプリのデザインを簡単にしてくれつつ、ページのルーティングをしてくれるクラス…ってところでしょうか:thinking:

titleについて・・・[公式AIP](https://api.flutter.dev/flutter/material/MaterialApp/title.html)
Androidで使う項目のようです。

themeについて・・・[公式API](https://api.flutter.dev/flutter/material/MaterialApp/theme.html)
どのデフォルトデザインを使用するかの指定など

homeについて・・・[公式API](https://api.flutter.dev/flutter/material/MaterialApp/home.html)
アプリが正常に起動したとき最初に表示される画面の指定

```dart
class MyHomePage extends StatefulWidget {--省略--}
```
homeに指定されたクラスの内容をみていきます
おや、継承元はState'ful'Widgetで、さっきと違いますね。
何が違うんだろ？
[公式API](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html)
[Flutter はじめの一歩](https://medium.com/flutter-jp/first-step-9b7f2c74fb08)
めちゃくちゃ噛み砕くと値が変動したりするページだよ〜ってことでしょうか

```dart
  MyHomePage({Key key, this.title}) : super(key: key);
```
なんだこれは…とグーグル先生に聞いたらドンピシャのいい記事がありました。
[【初心者向け】FlutterサンプルコードのMyHomePage({Key key, this.title}) : super(key: key);って何？](https://note.com/zutai_dekame/n/nabf22f1a3eec)

・Dartはコンストラクタを複数用意できる
・this.titleと書くだけで'Flutter Demo Home Page'がMyHomePageの変数titleに代入される
・keyは今回指定していないのでnull
・MyHomePageのコンストラクターに続けてsuper…もといStatefulWidgetのコンストラクターを動かしている

```dart
  @override
  _MyHomePageState createState() => _MyHomePageState();
```
createState…[公式API](https://api.flutter.dev/flutter/widgets/StatefulWidget/createState.html)

[Flutter はじめの一歩](https://medium.com/flutter-jp/first-step-9b7f2c74fb08)
こちらの記事のEからの内容になります
MyHomePageの処理をする部分を_MyHomePageStateにまとめて、MyHomePageは動かすものだけ羅列してシンプルにしました〜って感じなのかな

```dart
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    --省略--
  }
}
```

・_counterでカウント数を保持
・_incrementCounter()でカウンターの数を増やす処理
・setState()で再描画
・buildで見た目を整える

要するにFlutterって、
Angularでいうhtmlとtypescriptとcssを、
全部一つのファイルでやろうとしてる言語ってことですかね…

ちなみに、setState()をコメントアウトしてインクリメントだけを動かすと、
内部的な変数の値は変化していますが、表示されている値はそのまま。
ホットリロードするまで値は変わりませんでした。
setStateをすることでその時の変数の状態に表示が変わるのですね。

```dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(・・・),
      body: Center(・・・),
      floatingActionButton: FloatingActionButton(・・・),
    );
  }
```
Scaffoldについて…[Scaffold(公式API)](https://api.flutter.dev/flutter/material/Scaffold-class.html)
Scaffoldはページのレイアウトの内容をまとめたクラスってところですかね
appBarで上の青い部分
bodyで真ん中部分
floatingActionButtonで右下にボタンを表示

```dart
appBar: AppBar(title: Text(widget.title),),
```
Textについて…[Text(公式API)](https://api.flutter.dev/flutter/dart-html/Text-class.html)
突然出てきたwidgetって何！？って感じですがデバッグで中身を確認してみたところ、
MyHomePageStateクラスにある変数(title,keyなど）情報が取得できる変数、という感じでした。

```dart
body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
```
Centerについて…[Center class(公式API)](https://api.flutter.dev/flutter/widgets/Center-class.html)
言葉の意味のまんま、childに指定した要素を中央に配置するってことですね
Columnについて…[Column class(公式API)](https://api.flutter.dev/flutter/widgets/Column-class.html)
childrenに指定した、ウィジェットが格納された配列の要素を垂直に順に並べていくクラス。
もし水平方向に並べたいときはRowクラスを使えばOK。
試しにColumnをRowにしてみて動かした↓
![スクリーンショット 2020-06-16 16.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607742/46620211-c580-4ab2-2d69-68dba9d676d4.png)
ちゃんと横に並びました。

MainAxisAlignmentについて…
[Flutter: MainAxisAlignmentを理解する](https://qiita.com/ikemura23/items/67af19b6cbf16fb0251a)
こちらに分かりやすくまとまってました。

```dart
floatingActionButton: FloatingActionButton(
   onPressed: _incrementCounter,
   tooltip: 'Increment',
   child: Icon(Icons.add),
),
```
FloatingActionButtonクラスについて…
[FloatingActionButton (公式API)](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html)
・onPressed…ボタンがタップされるときに動かす関数
・onPressedのコールバックがnullのときボタンは無効
・tooltip…ボタンが押された時に発生するアクションを説明するテキスト
・ボタンを長押しした時に表示される
・child…ツリー内でこのウィジェットの下にあるウィジェット。通常はアイコン


##まとめ
・Flutterはレイアウトとプログラムをまとめて書く言語
・ウィジェットの根元はMaterialAppがお約束のようなもの
・縦に並べたい時はColumn、横に並べたいときはrow
・setState()をしないと画面の表示は更新されない
・StatefulWidgetの中身はStateクラスを継承した別のクラスに書き出す

少しだけFlutterと仲良くなれました
最後まで読んでいただきありがとうございました！