Flutterを学ぶ中で必ず押さえておきたいこと

## 0. はじめに

Flutterについて、必ず押さえておきたい基本的な知識をまとめてみました。

## 1. Flutterとは

- Googleが開発しているアプリケーションフレームワーク。
   - 公式：https://flutter.dev/
   - API：https://api.flutter.dev/
   - GitHub：https://github.com/flutter
- **クロスプラットフォームなフレームワーク**のため、**「Android」「iOS」「Web」「Windows」「MacOS」「Linux」**といったアプリケーションを、**同じコード**で開発することができる。
- Flutter 1.X では、「Web」「Windows」「MacOS」「Linux」はベータ版だったが、**Flutter 2.0(2021/3～)から安定版**になった。
  - 但し「Windows」「MacOS」「Linux」は安定版といいつつ、品質はベータ版らしい。
  - 2021/10/11時点での最新バージョンは**2.5.2**。
- **Widget**(UI部品)が豊富に用意されており、簡単に画面を構築することができる。
- **Dart言語**を使って実装する。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247638/e08427ae-45e9-ba25-4d7b-7455aaa22f40.png)

## 2. 開発環境

- 「Android Studio」or「XCode」or「VSCode」にFlutter SDKをぶち込んで開発する。
    - SDK：https://flutter.dev/docs/get-started/install
- ホットリロードに対応していて、コードの変更をすぐにエミュレータや実機に反映することができる。
- Flutter用パッケージがたくさん公開されている。使用する場合はpubspec.yamlにパッケージを記載。
    - パッケージ一覧：https://pub.dev/
    - pubspec.yamlのバージョン指定方法：https://qiita.com/youmeee/items/035358cf4293d4315b3f
- `flutter doctor`というコマンドが便利。環境構築の際、コマンドを叩くと「プラグインがインストールされてないけど？」「Android SDKのバージョンが古いんだけど？」など教えてくれる。メッセージでググれば大体解決方法が載っている。

```sh:例：Windowsデスクトップ開発において、VisualStudioにコンポーネントが足りていない場合
PS C:\xxxxx\hogehoge_app> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.0, on Microsoft Windows [Version 10.0.19042.1237], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Enterprise 2019 16.9.4)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK
[√] Android Studio (version 4.0)
[√] VS Code, 64-bit edition (version 1.55.2)
[√] Connected device (3 available)

```

## 3. Dart言語

- こちらもGoogleが開発しているクラスベースのオブジェクト指向言語。
    - 公式：https://dart.dev/
    - GitHub：https://github.com/dart-lang
- 2018年、学ぶ価値のないプログラミング言語1位に選ばれた:sob:
- しかし、Dart2、Flutterの登場により人気は急上昇。
    - Study of Programming Languages Not to Learn in 2019：https://www.codementor.io/blog/worst-languages-2019-6mvbfg3w9x
- 静的型付け・動的型付けの両方に対応している。
- パフォーマンスが高く、大規模サービスの開発にも適用できる。
- Java・JavaScriptに近い。(そもそも影響を受けた言語がJava・JavaScriptらしい)<br>これらの言語に慣れている人にとっては学習コストが低い。
- アクセス修飾子がない。変わりに、変数名やクラス名にアンダースコア(_)を付けることで、privateになる。

## 4. Widget

- Flutterでは画面を構成するためにWidgetを使う。
    - 公式：https://flutter.dev/docs/development/ui/widgets
    - Flutter:Widget一覧：https://qiita.com/matsukatsu/items/e289e30231fffb1e4502
    - Flutter開発する前に知っておきたい35のWidget一覧：https://qiita.com/coka__01/items/dedb569f6357f1b503fd
- Widgetを親子関係にして構築していくイメージ。ReactのCompornent的な。

### 4-1. StatelessWidget

- 状態がずっと変化しないWidget。
- 実装がシンプルになる。
- `build`メソッドを実装する。

### 4-2. StatefulWidget

- ユーザーによる操作やデータを受け取った際などに状態が変化する可能性のあるWidget。
- 自分の変数を更新することで、自分自身を再ビルドすることができる。
- 実装が複雑になる分、状態を扱える。
- `StatefulWidget.createState`と`State`クラスの実装が必要。
- `State`クラスにて`build`メソッドを実装する。

### 4-3. クラス図
- サンプルアプリのWidgetのクラス関連は以下の図参照。
- はじまりの「Widget」クラスを継承し「StatelessWidget」「StatefulWidget」「RenderObjectWidget」クラスが存在する。
![widget.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247638/b4bf7561-31fe-a8ec-d165-b682286bab3e.png)

（以下のイメージに近い:thinking:）
![kimetsu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247638/621e4af2-d084-5a0e-9574-787ab9c0fceb.png)

## 5. ファイル構成

| ディレクトリ | 説明 |
|:-:|-|
| lib  | Dartのソースコードを配置する  |
| android  |  Androidアプリ用のファイルを配置する |
| ios  |  iOSアプリ用のファイルを配置する |
| web |  Webアプリ用のファイルを配置する |
| windows |  Windows用のファイルを配置する |
| build | ビルドファイルが格納される |
| test  | ユニットテスト用のファイルを配置する  |

- Dartで実現の難しい機能(デバイス関連など)については、「android」「ios」などのフォルダに、kotlin/swiftのコードを追加し、Dartから呼び出すイメージ。

## 6. サンプルコードと画面の対応

![ウィジェット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247638/4c935ad5-41fc-b004-b9d4-8a3fbffb91d8.png)

## 7. おわりに
これからちょこちょこFlutterアプリ開発していきたいと思います:innocent: