Flutterの開発環境の構築手順です。
Flutter SDKのインストール
chocolateyで「flutter」を検索してインストールします。
「C:\tools\flutter」に展開されました。
下記のページからダウンロードすることもできます。
Flutter SDK releases – Flutter
Path環境変数の設定
ダウンロードした場合は環境変数に「flutter\bin」のパスを追加します。
chocolateyでインストールした場合は設定されていると思います。
flutter doctorコマンドの実行
Path環境変数を設定したらFlutterのコマンドが実行できるようになります。
コマンドプロンプトで「flutter doctor」コマンドを実行すると開発環境の依存関係が確認できます。
[√]は問題なくて、[X]は問題あり、[!]はなくても良いけど必要ならセットアップしてねという感じなので、「Android SDK、Android Studio、使えるデバイスもありませんよ」という感じですね。
> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale ja-JP)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
You may also want to add it to your PATH environment variable.
[!] Android Studio (not installed)
[!] Connected device
! No devices available
Android Studio のインストール
chocolateyで「androidstudio」を検索してインストールします。
Android StudioをインストールするとAndroid SDKも一緒にインストールされます。
Android Studioを起動してセットアップウィザードにしたがって進めていきます。
「Darcula」のテーマを選択しました。
セットアップウィザードが完了しましたが、HAXMのインストールが失敗してしまいました。
Running Intel® HAXM installer
Failed to install Intel HAXM. For details, please check the installation log: "C:\Users\flutter\AppData\Local\Temp\haxm_log.txt"
Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows
Installer log is located at C:\Users\flutter\AppData\Local\Temp\haxm_log.txt
Installer log contents:
HAXMのインストール
下記リンク先を参考に「haxm_check」を実行すると「VT support」が「no」と出ました。
私の環境ではDockerを使用するためにHyper-Vが有効になっており、この状態ではHAXMのインストールはできないようなのでHyper-Vを無効にします。
参考: HAXM Installation Failed. Install Intel HAXM in Windows – TekTutorialsHub
> cd C:\Users\flutter\AppData\Local\Android\Sdk\extras\intel\Hardware_Accelerated_Execution_Manager
> haxm_check
VT support -- no
NX support -- yes
下記のコマンドで状態を確認しながらHyper-Vを無効にしました。
> bcdedit /enum | find "hypervisorlaunchtype"
hypervisorlaunchtype Auto
> bcdedit /set hypervisorlaunchtype off
この操作を正しく終了しました。
> bcdedit /enum | find "hypervisorlaunchtype"
hypervisorlaunchtype Off
OSを再起動すると「VT support」が「yes」になります。
「intelhaxm-android.exe」を実行してインストールできました。
> haxm_check
VT support -- yes
NX support -- yes
Hyper-Vを有効にする(元に戻す)には下記のコマンドを実行後にOSを再起動をしたらOKです。
> bcdedit /set hypervisorlaunchtype auto
エミュレーター(仮想デバイス)の作成
右下にある「Configure」から「AVD Manager」を選択し、「Create Virtual Device」をクリックします。
タブレットを試したかったので「10.1 WXGA(Tablet)」を選択しました。
OSはAndroid 11を選択しました。
仮想デバイスのパフォーマンスが良くなるようなので、「Graphics」で「Hardware – GLES 2.0」を選択しました。
仮想デバイスが作成できました。
起動ボタンをクリックすると仮想デバイスが起動します。
Androidライセンスの許諾
「flutter doctor」の実行で「Android license status unknown」と出たらAndroidライセンスの許諾が済んでいません。
> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
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.
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] Connected device (1 available)
「flutter doctor –android-licenses」を実行して「y」を入力しいていき、Androidライセンスを許諾しましょう。
NoClassDefFoundError
「flutter doctor –android-licenses」を実行した際に、私の環境では下記のエラーが出ました。
> flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
... 5 more
Javaのバージョンが1.8でないと実行できないらしく、環境変数のJAVA_HOMEとPathを変更することで実行できるようになりました。
JAVA_HOME | C:\Program Files\AdoptOpenJDK\jdk-8.0.252.09-hotspot |
Path | %JAVA_HOME%\bin |
Javaのバージョン確認
> java -version
openjdk version "1.8.0_252"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_252-b09)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.252-b09, mixed mode)
OpenJDKは下記のリンク先からダウンロードできます。
AdoptOpenJDK – Open source, prebuilt OpenJDK binaries
Flutterプラグインのインストール
Android Studioの「Flutter plugin」と「Dart plugin」がインストールされていないと出ているのでインストールします。
> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] Connected device (1 available)
Android Studioの「Configure」から「Plugins」を開き、Flutterプラグインをインストールします。
Flutterプラグインと同時にDartプラグインも求められるのでインストールします。
Android Studioの再起動を求められるので再起動します。
プラグインがインストールできたら「flutter doctor」で確認します。
が、まだプラグインがインストールされていないと出ました。
> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] Connected device (1 available)
これは「flutter doctor」の問題なので無視していいようです。
Flutter側が各ツールの変更に追随するのは大変なので今後はこのチェック自体がなくなるようです。
参考: Flutter Pluginが認識されない – Qiita
Flutterアプリの作成
Android Studioの「Create New Flutter Project」をクリックします。
「Flutter Application」を選択します。
プロジェクト名等を入力します。
「Flutter SDK path」が空だと「Flutter SDK path not given.」と表示されるので、Flutter SDKをインストールしたパス(C:\tools\flutter)を入力します。
プロジェクトが作成できたので、仮想デバイスを選択して実行してみます。
「Windows セキュリティの重要な警告」が表示されたら「アクセスを許可する」をクリックします。
仮想デバイスでアプリ(Flutter Demo Home Page)が起動したら成功です。
Dev Toolsの起動方法
「Run」タブから「Open DevTools」ボタンをクリックすると「DevTools」が起動します。
アプリをタブレットへインストール
Amazon Fireタブレットにインストールしてみます。
Android StudioのTerminalタブでビルドコマンドを実行します。
> flutter build apk --debug
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done 35.0s
√ Built build\app\outputs\flutter-apk\app-debug.apk.
タブレットをUSBで接続して「app.apk」ファイルをドキュメントフォルダにコピーします。
(PC\Fire\内部ストレージ\Documents)
タブレットのドキュメントアプリを開くと、コピーしたapkファイルが表示されるのでタップします。
「インストール」をタップします。
「開く」をタップするとアプリが起動します。
無事インストール成功しました!
以上、Flutterの開発環境構築手順でした。
参考情報
- Flutter入門
- サンプル
- Webサービス(Web上でFlutterが書ける)
- アイコン
- Dart言語
コメント