Flutter始めました


[Dart始めました](https://qiita.com/fukuit/items/0d540e71a21b1f14bb7f) に続き、Flutterを始める。

## 本文書の目的

とりあえず、Flutterを使える環境を整えるところまで。

### 実行環境

macOS Mojave 10.14.6 をインストール済のMacBook Pro (13-inch, Mid 2012)で。

### 情報源

ひとまず、原典にあたる。

- [https://flutter.dev/docs/get-started/install/macos](https://flutter.dev/docs/get-started/install/macos)

## Flutterのインストール

### flutter をインストールして、PATHを通す

[ドキュメント](https://flutter.dev/docs/get-started/install/macos)によると、Dartと違って[HomeBrew](https://brew.sh/)での配布はないようだ。

```bash
$ mkdir -p ~/Developer/
$ cd ~/Developer
$ git clone https://github.com/flutter/flutter.git -b stable
$ export PATH="$PATH:`pwd`/flutter/bin"
$ echo 'export PATH="$PATH:$HOME/Developer/flutter/bin"' >> ~/.zshrc
$ hash -r
$ flutter precache
```

最後の```flutter precache```は、[ドキュメント](https://flutter.dev/docs/get-started/install/macos)には、Optionallyって書いてはあるけど。ちなみに、```Dart SDK for Flutter engine```や各種Android開発用のファイルやらiOS開発用のファイルやらがダウンロードされたりして、なんやかんやでそこそこ時間がかかる。

### 確認

以上が終わったら、```flutter doctor``` すると、インストールがきちんとできているかどうかを確認できる。

Android Studioとかがインストールされてないと、```[!] Android Studio```みたいに表示されるので、```[!]``` 表記がなくなるまで、足りないもののインストールを行う。

```bash
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.6 18G3020,
    locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.44.2)
[✓] Connected device (1 available)

• No issues found!
```
 
#### VSCodeの設定

なお、Visual Studio Codeには、Flutter プラグインをインストールしておいたほうがいい(```flutter doctor```でも警告される)。

![2020-04-25-001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15553/f347562c-4d0b-e877-4ea3-5cc8bb7d99b8.png "2020-04-25-001.png")

なお、```Flutter```プラグインをインストールすると、```Dart```プラグインもインストールされる。

#### Android Studioの設定

Android Studioにも、Flutter プラグインとDart プラグインをインストールする。
Android Studioを起動したあと、```Configure```から```Plugins```を選択すると、プラグインの管理画面が表示されるので、FlutterとDartを検索してインストールする。

![2020-04-25-002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15553/9ca10f46-2051-73d6-27cd-45a8d395e7ea.png "2020-04-25-002.png")

## 最初のFlutterアプリ

[ドキュメント](https://flutter.dev/docs/get-started/install/macos)の通り、```flutter create```すると、アプリケーションの雛形が生成される。
これを作成したディレクトリにて、```flutter run```すると、ちょっと時間をかけてbuildしたのちに、アプリが起動する。

```bash
$ flutter create my_app
$ cd my_app
$ flutter run
```

![2020-04-25-003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15553/6ac98756-a15f-dc40-4915-bac81cdb597e.png "2020-04-25-003.png")

この時にアプリは、flutterから認識されているデバイス上で起動する。

```bash
$ flutter devices
1 connected device:

Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 9 (API 28)
(emulator)
```

### ソースコードを見てみる

ちょっと意外な場所なんだけれど、```lib/main.dart```にソースコードがあった。

![2020-04-25-004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15553/52cbfebf-291e-ebb0-61cf-e8454845ae7d.png "2020-04-25-004.png")

画面下部にあるボタンを押すと、画面の真ん中に表示されている数値がカウントアップする。

```dart:lib/main.dart
...
    int _counter = 0;
    
    void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }
...
```

ああ、ワタクシにとってイマイチ理解できてないClosureですね、コレ。というのは、サテオキ。

例えば、21行目の```primarySwatch: Colors.blue,```を```primarySwatch: Colors.red,```に書き換えて保存してから、```flutter run```したTerminal上で```r```を押すと、アプリのタイトルバー部分の色がすぐ青から赤に変わる。Flutterの特徴として挙げられている「Hot Reload」を体験できる。

今回は、Android Studioのエミュレータで試してみたけれど、iOS simulatorでも全く同様に実行することができる。なるほど、マルチデバイス向けの開発が可能というのは、こういうことだ。

## 本日のまとめ

Flutterをインストールして、とりあえず最初のアプリをbuildしてみた。