Flutter環境構築メモ

Flutterとは

• iOSとAndroidのアプリを1つのコードで作成できるフレームワーク。
• JavaScriptに似た、Dartという言語を使っている。
• Android StudioなどのIDEを利用して開発できる。

インストール

• Flutter 公式Webサイトにアクセスし、Get startedボタンをクリックする。
• Windowsをクリックする。
• flutter_windows_2.5.2-stable.zip をクリックし、ダウンロードする。(1.6GBもある)
• flutter_windows_2.5.2-stable.zip を解凍し、My Documentsなどに入れる。(バージョンがころころかわりそうなので、私は、My Documents\Flutter\flutter_windows_2.5.2-stable　という階層に配置してみました)
• システムの詳細設定から、環境変数に flutter\flutter_windows_2.5.2-stable\flutter\bin までのパスを追加
• flutterのパスが通っていることの確認

>where flutter dart
C:\Users\user\OneDrive\ドキュメント\flutter\flutter_windows_2.5.2-stable\flutter\bin\flutter
C:\Users\user\OneDrive\ドキュメント\flutter\flutter_windows_2.5.2-stable\flutter\bin\flutter.bat
C:\Users\user\OneDrive\ドキュメント\flutter\flutter_windows_2.5.2-stable\flutter\bin\dart
C:\Users\user\OneDrive\ドキュメント\flutter\flutter_windows_2.5.2-stable\flutter\bin\dart.bat

• flutter doctorの実行

C:\Users\user>flutter doctor

• あら、エラーが出た

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
C:\Users\user\Desktop\flutter>flutter doctor --android-licenses

• Android Studioをダウンロードしてインストール(まだの場合)

• アップデート等いろいろしていたら、Android SDKのインストールも始まった。

• Android SDK Command-line Tools (latest) をAndroid Studioの設定画面からインストール
  

• 再度、flutter doctor を実行

C:\Users\user>flutter doctor
C:\Users\user>flutter doctor --android-licenses
y
y
y
... (7回ぐらい？)
C:\Users\user>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version 10.0.19043.1237], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.2)
[√] Connected device (2 available)

• No issues found!

• やっとエラーがなくなりました
• Windowsの場合の追加作業

C:\Users\user\Desktop\flutter>flutter config --enable-windows-desktop

• 再起動

• Android Studioに、Flutterプラグインをインストール
  

• Android Studioを再起動

• New Flutter Projectボタンをクリック
  

• 次の画面で、FlutterとSDKのパスを設定し、 Nextをクリック
  

• 名前をつけてFinishをクリック

• デバイスで適当なブラウザを選択して、再生ボタンをクリック

• クリック回数をカウントするアプリが表示されました。