Flutter勉強メモ
初めてなので環境構築からですね
普段wsl + ubuntu使ってたのでpowershellのコマンドを調べつつ進めました。
作業環境
- windows 11 Home
- Powershell 7.4.6
作業メモ
とりあえずFlutterの公式に沿って進めていきます。
サイトを見るまで
プラットフォームはWindows、アプリの種類はとりあえずおすすめされてたAndroidに。
え…60GiB推奨ですか、、、
依存関係
Powershell
一応7にアップデートはしていたんですが、マイナアップデートがあったので更新しておくことに。
PowerShellってWindowsの累積更新プログラムと一緒に更新してくれるって聞いたんですが、してくれてませんね。
# バージョンを確認
$ $PSVersionTable.PSVersion
# 再インストールする形で更新
$ Install-WindowsFeature PowerShell-Extended
Git for Windows
これは持ってるので省略
Android Studio
インストーラを公式から落としてきます。
解凍して実行して終わり！
VS CodeにFlutter extensionを導入
導入します。
Flutter SDKの導入
ここでハマりました…
導入には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に置いたせいで動かず悩んでいました。
結局のところ、二つ目の方法を使いました。ここのDownload and Installを選択し、青いボタンからZipを落とします。このボタン何度か押せなくてスーパーリロードしました。
そこからZipを落とすんですが、これインストーラーじゃないんですね。自分で解凍して自分で設置して自分でパス通しました。
設置場所は%LOCALAPPDATA%配下です。
ちなみになんですが、Windowsでパスを通すときはMicrosoft PowerToysに付随してる環境変数というアプリを使うのがおすすめです。
PowerToys自体もMS storeにあるのでwingetでインストールできます。楽でいいですね。
flutter doctor
やっとこさflutterコマンドを叩けます。
flutter doctorというコマンドを叩くと必要な依存関係を表示してくれます。
僕の場合Chromeが未インストールだったのと、Visual StudioにC++の拡張、Android studioにAndroid SDKという拡張が必要でした。
すべてパスするとこの通り。
flutterの起動
改めてVS CodeでFlutter: New Projectを叩きます。
するとこんな感じ。
main.dartを起動すると…
いい感じですね。
あとがき
Ubuntu上の環境構築ばっかやってたせいでWindowsではずいぶん手間取ってしまいました。
つぎからは本格的に勉強に入るぞ～
Android studioはUI的に何となく察してたけどJetBrainsベースなんですね。ちょっとUIが固い感じがして苦手です…