Flutter2がとりあえず動くまで

# Flutter2起動まで

## 概要

Flutter2が出たのでインストールからテストアプリ作成まで試してみる
基本公式に沿っているだけなので、たいしたことのないただのメモ書き

環境

- Windows10

## インストール

### Flutter SDKの入手

1. [公式サイト](https://flutter.dev/docs/get-started/install)からダウンロード
2. ファイルを解凍する(C:\src\flutter)

注)C:\Program Files\など権限が必要となるディレクトリにインストールしない

### pathの更新

- [検索の開始]バーから「env」と入力し、[**アカウントの環境変数の編集**]を選択します。
- パスが通っているか確認
  - `Path`に`C:\src\flutterflutter\bin`を追加
    - 解凍した場所から`bin`までのパス

### flutter doctorの実行

```
C:\src\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.19042.804], locale ja-JP)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] Connected device (2 available)

! Doctor found issues in 2 categories.
```

↑Andoroid SDKがないため警告が発生

### Andoroidのセットアップ

#### Andoroid Studioのインストール

1. [公式サイト](https://developer.android.com/studio)からダウンロード

2. Android Studioを起動し、「AndroidStudioセットアップウィザード」を実行します。

   Android SDK, Android SDK Command-line Tools, and Android SDK Build-Toolsがインストールされます

#### Andoroidデバイスをセットアップ

AndroidデバイスでFlutterアプリを実行してテストする準備をするには、**Android 4.1**（APIレベル16）以降を実行しているAndroidデバイスが必要です

1. デバイスで開発者向けオプションとUSBデバッグを有効にします

2. GoogleUSB[ドライバー](https://developer.android.com/studio/run/win-usb)をインストールします

3. USBケーブルを使用して、電話をコンピューターに接続します

4. デバイスでプロンプトが表示されたら、コンピューターにデバイスへのアクセスを許可します

5. ターミナルで`flutter devices`コマンドを実行して、Flutterが接続されているAndroidデバイスを認識することを確認します。

   ```
   >flutter devices
   3 connected devices:
   
   ASUS Z00AD (mobile) • F6AZFG236452 • android-x86    • Android 6.0.1 (API 23)
   Chrome (web)        • chrome       • web-javascript • Google Chrome 89.0.4389.90
   Edge (web)          • edge         • web-javascript • Microsoft Edge 89.0.774.57
   ```

   

6. デフォルトでは、Flutterは`adb`ツールのベースとなっているバージョンのAndroidSDKを使用します。FlutterでAndroidSDKの別のインストールを使用する場合は、`ANDROID_SDK_ROOT`環境変数をそのインストールディレクトリに設定する必要があります

#### Andoroidエミュレータをセットアップ

1. [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration)を有効にする
2. Android Studioを起動し、**Configure**の**AVD Manager**アイコンをクリックして、[仮想デバイスの作成... ]を選択します
3. デバイス定義を選択し、[次へ]を選択します
4. エミュレートするAndroidバージョンの1つ以上のシステムイメージを選択し、[次へ]を選択します。x86またはx86_64のイメージが推奨されます
5. [エミュレートされたパフォーマンス]で、Graphics: [**Hardware - GLES 2.0]**を選択して、[ハードウェアアクセラレーション](https://translate.google.com/website?sl=auto&tl=ja&u=https://developer.android.com/studio/run/emulator-acceleration)を有効にし[ます](https://translate.google.com/website?sl=auto&tl=ja&u=https://developer.android.com/studio/run/emulator-acceleration)。
6. AVD構成が正しいことを確認し、[**完了]**を選択します。
   1. 上記の手順の詳細については、[AVDの管理](https://translate.google.com/website?sl=auto&tl=ja&u=https://developer.android.com/studio/run/managing-avds)参照してください。
7. Your Virtual Device で、アクション欄の[**実行**]をクリックし**ます**。エミュレータが起動し、選択したOSバージョンとデバイスのデフォルトのキャンバスが表示されます。

### Webセットアップ

Flutterは、`stable`チャネルでのWebアプリケーションの構築をサポートしています。

Flutter 2で作成されたアプリはすべて、Web用に自動的にビルドされます。

既存のアプリにWebサポートを追加するには、上記のセットアップが完了したら[、Flutterを使用してWebアプリケーションを構築する](https://vqxr7ebb5bx3ejtma6jsnwttxm--flutter-dev.translate.goog/docs/get-started/web)手順に従います。

## エディタの設定

1. AndroidStudioを起動します
2. Configure - **Marketplace**を選択
3. **Marketplace**で**Flutter** pluginをインストール

## テストアプリのテスト

#### アプリの作成

1. AndroidStudioを起動します
2. Create New Flutter Projectを選択します
3. プロジェクトタイプとしてFlutter Applicationを選択します
4. プロジェクト名とFlutter SDKパスがSDKの場所を指定(C:\src\flutter)し、Nextをクリック
5. パッケージ名を入力してFinish

#### アプリの実行

1. プロジェクトを起動
2. **Target selector**で端末を指定
   ※USBでスマホと接続時は自動で選択される
   ※表示がない場合は**AVD Manager**でエミュレータを起動してから**Target selector**を指定
3. 実行する

### アプリの更新

1. main.dat内の下記を変更する

   ```
   'You have pushed the button this many times:'
   ↓
   'You have clickd the button this many times:'
   ```

2. 変更を保存すると即時反映される

## Flutter Web

FlutterでWeb表示をする

[公式サイト](https://flutter.dev/docs/get-started/web)では通常のインストールとは別枠でページが設けられている

```
$ flutter channel stable
$ flutter upgrade
$ flutter devices
Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90
```

一応この通り試したが、Chrome (web)はAndoroidデバイスをセットアップの所ですでに確認済でした。

## アプリ作成

```
$ flutter create myapp
$ cd myapp
```

Android Studioでプロジェクトを作成しても、webディレクトリが作成されないため、コマンドで実行しました。

## アプリ実行

```
$ flutter run -d chrome
```

作成したプロジェクトをAndroid Studioで開き、**Target selector**でChromeを指定し、実行しても同じ動作を確認

## Build実行

```
$ flutter build web
```

Android StudioではBuild - Flutterの中にWEBが含まれていないので、コマンドで実行しなければならなかった。

### 疑問

- エミュレータ上では動作確認できていたのに、作成されたファイルが白ページだけだったのはなんでなんだろう？
- Andoroidデバイスをセットアップは必要だったのか？