Flutterのお勉強

# Flutter勉強メモ
初めてなので環境構築からですね
普段wsl + ubuntu使ってたのでpowershellのコマンドを調べつつ進めました。

# 作業環境
* windows 11 Home
* Powershell 7.4.6

# 作業メモ
とりあえず[Flutterの公式](https://docs.flutter.dev/get-started/install)に沿って進めていきます。

## サイトを見るまで

プラットフォームはWindows、アプリの種類はとりあえずおすすめされてたAndroidに。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/140c3d73-1208-b64a-fd21-56164e4f910c.png)

え…60GiB推奨ですか、、、

## 依存関係

### Powershell

一応7にアップデートはしていたんですが、マイナアップデートがあったので更新しておくことに。
PowerShellってWindowsの累積更新プログラムと一緒に更新してくれるって聞いたんですが、してくれてませんね。

```PowerShell
# バージョンを確認
$ $PSVersionTable.PSVersion 
# 再インストールする形で更新
$ Install-WindowsFeature PowerShell-Extended
```

### Git for Windows
これは持ってるので省略

### Android Studio

インストーラを[公式](https://developer.android.com/studio/install#windows)から落としてきます。
解凍して実行して終わり！

### VS CodeにFlutter extensionを導入
導入します。

### Flutter SDKの導入
[ここ](https://docs.flutter.dev/get-started/install/windows/mobile#use-vs-code-to-install-flutter)でハマりました…

導入にはVS Codeを用いる方法とZipを直接落としてくる方法があるんですが、とりあえず既定のvscodeを使う方を試しました。

vscodeで`Flutter: New Project`コマンドを叩くと、当然Flutter SDKがないので動かないんですが、そこでFlutterをインストールするかと提案されるので、これを承諾して任意の場所にアプリを設置する形です。

どこでハマったかというと、端的に言えば実行ファイルの設置先です。

> Don't install Flutter to a directory or path that meets one or both of the following conditions:
>
> * The path contains special characters or spaces.
> * The path requires elevated privileges.
>
> As an example, C:\Program Files fails both conditions.

とあったんですが、誤読してProgram Filesに置いたせいで動かず悩んでいました。

結局のところ、二つ目の方法を使いました。[ここ](https://docs.flutter.dev/get-started/install/windows/mobile#use-vs-code-to-install-flutter)のDownload and Installを選択し、青いボタンからZipを落とします。このボタン何度か押せなくてスーパーリロードしました。

そこからZipを落とすんですが、これインストーラーじゃないんですね。自分で解凍して自分で設置して自分でパス通しました。
設置場所は`%LOCALAPPDATA%`配下です。

:::note info
ちなみになんですが、Windowsでパスを通すときはMicrosoft PowerToysに付随してる環境変数というアプリを使うのがおすすめです。
PowerToys自体もMS storeにあるのでwingetでインストールできます。楽でいいですね。
:::

### `flutter doctor`
やっとこさ`flutter`コマンドを叩けます。
`flutter doctor`というコマンドを叩くと必要な依存関係を表示してくれます。

僕の場合Chromeが未インストールだったのと、Visual StudioにC++の拡張、Android studioにAndroid SDKという拡張が必要でした。

すべてパスするとこの通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/8c5967ea-1322-88fe-37f7-60720aa15c95.png)

## flutterの起動

改めてVS Codeで`Flutter: New Project`を叩きます。
するとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/d2176a5f-bc2a-d4a5-794d-b17c6a28a554.png)

main.dartを起動すると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/b94693fa-9a14-17f0-ea1f-afb040611306.png)

いい感じですね。

# あとがき
Ubuntu上の環境構築ばっかやってたせいでWindowsではずいぶん手間取ってしまいました。

つぎからは本格的に勉強に入るぞ～

Android studioはUI的に何となく察してたけどJetBrainsベースなんですね。ちょっとUIが固い感じがして苦手です…

# 参考
* [Start building Flutter Android apps on Windows](https://docs.flutter.dev/get-started/install/windows/mobile#use-vs-code-to-install-flutter)
* [Flutter を VSCode で環境構築してみた！＜Windows編＞](https://qiita.com/shimizu-m1127/items/d8dfc2179bc01baaef6b#4-flutter-doctor%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E5%AE%8C%E4%BA%86%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E4%BE%9D%E5%AD%98%E6%80%A7%E3%81%AE%E7%A2%BA%E8%AA%8D)
* [Microsoft.PowerShell.Management
](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.management/?view=powershell-7.4)