はじめに
今流行りのflutter。公式ドキュメントも英語で書かれていて環境構築で挫折する人が多そう(自分もその一人)だったので日本語で記事を作成しました!
またこの記事はflutterの公式ドキュメントの和役がほとんどになるので英語読める!!って方は公式ドキュメント読んだほうが速いかもしれません。
自分が環境構築をしていて出てきたエラーの解決方法も載せてあるので是非参考にしてください。
誤っている部分等ありましたら指摘のほどよろしくお願いいたします!
環境構築
システム要件
OS:windows7 sp1以降
ディスク:1.64GB以上
ツール:①windows PowerShell5.0以降 もしくはcmd
②git(https://git-scm.com/download/win)
Flutterのインストール
Flutterの公式サイトから "flutter_windows_x.xx.xx-stable.zip"をクリックしてzipファイルをダウンロードしてください。
https://docs.flutter.dev/get-started/install/windows
その後、Cドライブ直下に srcという名前でフォルダを作成してください(フォルダ名はsrcでなくても大丈夫です)。そして、その中に先ほどダウンロードしたflutterのzipファイルを解凍してください。
注意:①記号・スペースを含む場所にflutterを保存しないようにしてください。
②C:\Program Files\などのアクセス権限が必要なディレクトリに保存しないようにしてください。
pathの更新
cmd,PowerShellでflutterのコマンドを実行する際は環境変数にパスを通す必要があります。
手順1:Windowsキーをクリックし、「env」と入力し、環境変数(N)をクリックしてください
手順2:ユーザーの環境変数の中のpathをクリックし編集を選択して以下のpathを追加してください。
C:\src\flutter\bin
手順3:PowerShellもしくはCMDで
flutter doctor
と入力してください。若干違うかもしれませんが、以下のようなものが表示されれば成功です。
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
Running "flutter pub get" in flutter_tools... 3.7s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.3.2, on Microsoft Windows [Version 10.0.22000.978], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.2)
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.
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
X Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.64.2)
[√] Connected device (3 available)
[√] HTTP Host Availability
! Doctor found issues in 2 categories.
エラー対応集
このタイミングで自分は少しうまくいかなかったので自分が遭遇したエラーとその対処法を記しておきます。
①
'where' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
Error: Unable to find git in your PATH.
システム環境変数のpathの中に以下の3つのパスを追記してみてください。
C:\Program Files\Git\bin\git.exe
C:\Program Files\Git\cmd
C:\Windows\System32
②
Error: PowerShell executable not found.
Either pwsh.exe or PowerShell.exe must be in your PATH.
システム環境変数のpathの中に以下のパスを通してみてください。
C:\Windows\System32\WindowsPowerShell\v1.0
参考
ユーザー環境変数・システム環境変数はそれぞれ以下のようになっています。
androidの環境構築
android studioのインストール
①android studioのインストール
https://developer.android.com/studio
不要なエラーを避けるためインストール先はCドライブ直下に1つのフォルダを作成しその中にインストールしてください。
②android studioを起動し手初期設定を済ませてください
③cmdで
flutter config --android-studio-dir (android studioのディレクトリ)
を実行してください。
その後
flutter doctor
を行い以下の画像のような文が出力されていれば成功です。
[√] Android Studio (version 2021.1)
androidエミュレータの設定
andtoid studioを用いてandroidエミュレータを作成しましょう。
上記画像のvirtual device mangagerを選択してください。
その後画面の指示に従ってエミュレータを設定しましょう。
作成が終わったら ペンのマークをクリックして
Emulated Prtformance の GraphicsをHardware - GLES 2.0に設定してください
androidライセンスの同意
Java8のインストールかつJAVA_HOMEの環境変数が通っていることが前提です。
cmdで以下のコマンドを実行して逐次表示される規約に対して了承してください。
flutter doctor --android-licenses
その後
flutter doctor
を実行してください。エラーが出ていなければandroidの設定は完了です
エラー対応
自分はこの段階でエラーと遭遇したのでその解決策を書いておきます。
X Android SDK file not found: adb.
以下の記事で紹介されている方法が最も多くの件数見つかります
https://qiita.com/ShortArrow/items/46ca3717384039419605
僕は上記の方法ではうまくいかなかったので以下2つのコマンドを実行することでうまくいきました。
sdkmanager --uninstall "platform-tools"
sdkmanager "platform-tools"
また適宜環境変数に変更を加えました。以下の画像を参考にしてください。
追加したのは以下の2行です。
C:\Users\ユーザ名\AppData\Local\Android\Sdk\cmdline-tools\latest\bin
C:\Users\ユーザ名\AppData\Local\Android\Sdk
windowsの環境構築
windowsの設定はVisual Studio2022をインストールするだけです。必ず2022をインストールするようにしましょう。それ以前のバージョンは非対応なようです。また、VisualStudio codeとは別物なので注意してください。。
以下のリンクからダウンロードをしてください
https://visualstudio.microsoft.com/downloads/
ダウンロードが完了したら必ず
C++を使用したデスクトップ開発
を選択して設定をするようにしてください!!
8GBほどあるので少し時間がかかります;;
ここまででflutterの基本的な環境構築は終了です!!
flutter doctor
を実行してみましょう!おそらく以下のような結果になるかと思います!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.5, on Microsoft Windows [Version 10.0.19044.1645], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.5)
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.66.2)
[√] Connected device (3 available)
[√] HTTP Host Availability
• No issues found!
VS codeの設定
①表示 → コマンドパレット に「install」と入力しExtensions:InstallExtensionsを選択してください
②拡張機能から flutterをインストールしてください
③表示 → コマンドパレット に「doctor」と入力しFlutter:RunFlutterDoctorを選択してください。
以上でVScodeの設定は完了です。
最後に
解説が雑な点もあったかと思いますがありがとうございました。
間違い等ありましたらご指摘よろしくお願いします
参考
https://docs.flutter.dev/get-started/install/windows
https://stackoverflow.com/questions/49175231/flutter-does-not-find-android-sdk
https://stackoverflow.com/questions/70954154/flutter-is-not-finding-android-sdk
https://noarts.net/archives/2448
https://qiita.com/ShortArrow/items/46ca3717384039419605
https://akira-watson.com/android/adt-windows.html#2
https://developer.android.com/studio/run/managing-avds#viewing
https://zenn.dev/susatthi/articles/20220403-075051-flutter-windows-app