PR

[Flutter]WindowsにAndroid Studioを使ってFlutterの環境を構築する 後編

Flutter

はじめに

前回はAndroidアプリ開発に必要なSDK等をインストールするところで終わりました。今回で最後です。

環境

  • Windows 10 Pro

Android StudioにFlutter開発に必要なプラグインをインストール

Pluginsを起動する

まずはAndroid Studioを起動し

[Configure▼]→[Plugins]を選択

Dartをインストール

MarketplaceでDartと検索し、Dartプラグインをインストール

Flutterをインストール

MarketplaceでFlutterと検索し、Flutterプラグインをインストール

Android Studioを再起動

インストールが終わったらインストールしたプラグインを反映させるためにRestart IDEでAndroid Studioを再起動します。すると下記の画面のようにAndroid Studioの起動画面にFlutter用のProject作成が増えます

Flutter SDKのインストールとFlutterプロジェクトの作成

[Create New Flutter Project]を選択

[Flutter Application]を選択して[Next]を選択

「Flutter SDK path not given.」と怒られているので真ん中右の方にある[Install SDK…]を選択して 、Flutter SDKをインストールするフォルダを選択します。

すると下記のようにFlutter SDKのインストールが始まります。

※もしかしたらこのインストールにGitが必要かもしれません

下のプログレスバーが消えるまで待ちます。そうしたらプロジェクトを作成するフォルダを選んで[Next]を押します。

※このまま進めたら上手く行かなかったので一旦ここでAndroid Studioを再起動したほうがいいかもしれません。

パッケージ名を記入してプロジェクトを作成

最後にパッケージ名を記入して[Create]を押したら…

無事プロジェクト作成完了です!

Androidシミュレーターを導入

上記の状態でAndroidの実機を繋げばプログラムを実行できますが、毎回接続するのがめんどくさいのでAndroidシミュレーターをインストールしそこでデバッグしようと思います。

AVD Managerを起動

Android Studioの右上の方にあるアイコンからAVD Managerを起動します。

[Create Virtual Device…]を選択すると下記のような画面になります

Intel HAXMをインストール

スクリーンショットを撮り忘れていたのですが上記の画面の時に右の方にIntel HAXMをインストールしてない場合にインストールしろと怒られているのでインストールを開始します。

メモリはデフォルトでは2GBが選択されていますが、余裕があるなら4GB以上を選んでください。

[Next]を押すとインストール画面になるので、インストールが終わるまで待ちます。

ハードウェアを選択

インストールが終わったら、ハードウェアを選択します。ここでは自分の好きはハードウェアを選んで下さい。自分はPixel 3aを持っているのでPixel 3aを選んで[Next]を選択

システムイメージを選択

ここもなんでもいいのですが、今回はAPI Level : 30、ABI : x86_64、Target : Android 11.0(Google Play)を選択します。ただし、まだDownloadをしていなのでDownloadする必要があるので[Download]を選択します。

利用規約の同意を求められるのでよく読んでからAcceptを選んで[Next]を選択

インストーラーが起動するので、インストールが終わるまで待ち、[Finish]を押します。

インストールが終わると、先程のシステムイメージを選択できるようになるので、選択して[Next]を押します。

デバイスの構成を選ぶ

デバイスの構成ですがそのままでも良いですが、起動したときのフレームが邪魔なのでDevice FrameのEnable Device Frameのチェックを外す。

[Finish]を押すと無事仮想デバイスが作成されています。

左側にある緑色の三角ボタンを押すと仮想デバイスが起動します。

起動したらAndroidの初期設定等をしておいてください。

Flutterプロジェクトの実行

アプリを実行

仮想デバイスが起動した状態の場合、デバイス(ここではsdk gphone x86 64 (mobile))が選ばれた状態になり、このデバイスでデバッグしていくことになります。

最後にアプリを実行するには下記の画面にある緑色の三角ボタンを押すだけです!

これで終わり!と思ったら。。。

謎のエラーそしてアプリ起動

アプリを実行しようとしたら下記のようなエラーが出てしまいました。。。

Launching lib\main.dart on sdk gphone x86 64 in debug mode...
Running Gradle task 'assembleDebug'...
Checking the license for package Android SDK Build-Tools 28.0.3 in C:\Users\XXXX\AppData\Local\Android\sdk\licenses
Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.
Checking the license for package Android SDK Platform 29 in C:\Users\XXXX\AppData\Local\Android\sdk\licenses
Warning: License for package Android SDK Platform 29 not accepted.

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     build-tools;28.0.3 Android SDK Build-Tools 28.0.3
     platforms;android-29 Android SDK Platform 29
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
  Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

  Using Android SDK: C:\Users\XXXX\AppData\Local\Android\sdk

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s
Exception: Gradle task assembleDebug failed with exit code 1

どうやらSDKのバージョンが違うようです。

ここでは省略しますが、画面右上の方にある[SDK Manager ]からAndroid 10.0(Q)のインストールを行ってください。

そして、インストールが終わり、緑の三角ボタンを再び押すと。。。

無事アプリが起動しました!

その他

自分の環境だけかもしれませんが、上記の後に上手く動かなくなってしまいました。

原因は[File]→[Settings…]→[Languages & Frameworks]→[Flutter]のFlutter SDK path:が空っぽなのが原因でした。もし上記で動かない場合はこの辺の設定も見直してみてください。

さいごに

自分はある程度モバイル開発の知識があったので平気でしたが、はじめてFlutter開発をやろうと思った人にはなかなかハードルが高いような気がします。色々とトラップもありますし。。。

ただ、ここまでできれば後はプログラムをガシガシ書いていくだけです!

おすすめ参考書

コメント

タイトルとURLをコピーしました