【環境構築編】Flutterを使ってみよう（2024年版）

### :relaxed: はじめに
`Flutter`は初見ですので手探り状態ですが、試行錯誤してやってみます:beginner:
作業しながら記事を書いていきますので、本来の手順と前後するかもしれません:bow:

**（2024年9月時点のPC環境）**
`VSCode`: 1.93.1 
`OS`: Windows_NT x64 10.0.19045

### :triangular_flag_on_post: このページのゴール
- `Flutter`のインストール
- :iphone:エミュレータが起動する

## :computer: 環境構築
### :raised_hands: 参考情報
[Flutter を VSCode で環境構築してみた！＜Windows編＞](https://qiita.com/shimizu-m1127/items/d8dfc2179bc01baaef6b)
[Flutterをインストールする](https://www.flutter-study.dev/getting-started/install)

### :gear: Flutter拡張機能
[VSCode用のFlutter拡張機能](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)をインストールしてください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/8891e6a8-12fe-079b-7121-90042d8ca342.png)

### :gear: Flutter SDK
[公式サイト](https://docs.flutter.dev/get-started/install/windows/mobile)から`Windows`>`Android`で環境構築を進めていきます:relaxed:

このケースで進めます:point_down:
[VS Code を使用して Flutter をインストールする](https://docs.flutter.dev/get-started/install/windows/mobile#download-then-install-flutter)

- `VSCode`で`Ctrl`+`Shift`+`P`からコマンドパレットに`flutter`を入力する
- `Flutter: New Project`を選択する
- 下図の吹き出しが表示されたら`Download SDK`を選択する 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/32ea2998-30e8-624e-fae8-0f678ce402bd.png)

- インストール先を選択したらダウンロードが開始される
  選択したフォルダパスに大文字が含まれていると失敗することがあります…:worried: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/1287218d-910d-1564-7638-a13638296b56.png) 
:::note info
環境変数`PATH`に`flutter\bin`を登録することを忘れずに...:point_up:
:::
:::note warn
`Which Flutter template?`が表示されたら`esc`で閉じる:keyboard:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/94e8c8b8-c939-0fcc-8c59-37789fe2b7f1.png)
:::

- `SDK to PATH`が表示されたら成功です
  出力パネルに`Checking Dart SDK version... `のメッセージが表示されますが
  このインストールでは適用されないエラーもあるため無視する
  （公式サイトに記載あり）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/694a1fdd-d287-4e46-17e6-20c12f978420.png)

### :robot: Flutter環境確認
- `flutter doctor`コマンドで`Flutter`と関連ツールのインストール状態や
バージョンを確認できるコマンドです:white_check_mark:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/3b6a88fd-0d5d-c319-8510-89a513355469.png)

- 古いバージョンの`Android Studio`や`Visual Studio`が入っていると
`flutter doctor`コマンドのチェックが通りません:no_entry:
以下のメッセージが出た際は[参考サイト](https://qiita.com/amcic/items/9c1d9b5848854c64e275)をご覧ください:writing_hand:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/c44e2c93-7881-831c-53fc-38e6a3bd49b0.png)
私は元々古いバージョンでしたので開き直って入れなおすことで解消しました:clap:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/14859a4e-1d2c-8cce-a21b-17d799070679.png)

### :gear: Android Studio - Android SDK - 
- `SDK Platforms`： :white_check_mark: `Android SDK Build - Tools `
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/21f1f071-f4a2-5e91-2a8e-176092cf0b94.png)

- `SDK Tools`： :white_check_mark: `Android API 35`
- `SDK Tools`： :white_check_mark: `Android SDK Command-line Tools(latest)`
- `SDK Tools`： :white_check_mark: `Android Emulator`
- `SDK Tools`： :white_check_mark: `Android SDK Platform-Tools` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/d9b14dcd-e57f-ff05-fbd7-23473f6ca622.png)

### :gear: Virtual Device Manager
- カテゴリ`Phone`からデバイスを選択して`Next`を押す 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/1c38a7b6-4b6e-10e1-bb22-21d7e4bc8cb6.png)

- `x86 Images`を選択して`Next`を押す 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/30eb8db0-8f52-7595-4002-2d3c0a3bc3f9.png)

- `Graphics：Hardware`を選択して`Finish`を押す 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/5e345364-eb9a-f532-5533-28f846ded8a5.png)

- `Start`を実行してデバイスを起動する 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/c3ac9681-2e3b-33de-ea68-10ce220783ee.png)

- :iphone:エミュレータが起動すれば成功とする 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/ac8a98a3-7c5f-9b91-2bc1-916f314924c7.png)

### :relaxed: デバッグしてみる 
`VSCode`でアプリを起動させるため、`flutter create myapp`でプロジェクトを新規作成:new:
（最初に読み込まれるファイルは`lib > main.dart`になります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/256f3e6f-e727-5fad-6b32-06e25a14c28d.png)
`VSCode`の右下をクリックしてデバイスを切り替えます:arrows_counterclockwise:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/9d6bb2bd-02d6-6aaf-4b90-ad556454c14a.png)
`mobule emulator`を選択すればエミュレータが起動します:robot:
:beginner:**エミュレータは事前に`Android Studio`でデバイスを登録してください**:beginner:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/0ad797bc-fd63-86e2-58dc-8f192559e7c8.png)
デバイス選択後、`F5`キーをクリックするとデバッグが開始され、デモページが表示されたら成功です:tada:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/2a21ae5e-9de2-f359-5e75-44d473e14448.png)
環境構築はここまで....:raised_hands:

次は:iphone:開発編を作成したいと思います:muscle:

### :shield: 補足
`Android Studio`のエミュレータが重いと感じることがあるかと思います。
`Settings > Advanced > OpenGL ES renderer`で調整してみてください。
[参考：拡張コントロール、設定、ヘルプ](https://developer.android.com/studio/run/emulator-extended-controls?hl=ja)
[参考：Android Emulatorが重い](https://zenn.dev/imokeeeenpi/articles/38d8b72e4dd442)