Flutterの環境構築(windows編)

はじめに

Flutterについて気になっていたのでとりあえず環境構築をしてみました。

✅参考
📚Android/iOSクロス開発フレームワーク Flutter入門

Flutterの開発環境(Windows + Android Studio)を構築する

Flutterとは

✅Flutter

Googleが開発したマルチプラットフォーム開発環境。iOSとAndroidに対応。

開発言語は「Dart」※JSライクな文法。

開発はAndroid StudioもしくはVSCodeで行う。

WindowsではiOSアプリのビルドができなく、macOSのXcodeが必要。

※GoogleOSのFuchsia(フーシャ※現在開発中)もFlutterで開発中

環境構築

Android Studio

①JDK

JDK(Java開発環境)は過去にインストールしていました◎

Javaはバージョンが8以下でないと動作しないため注意！！(僕もインストールしなおしました。)

②SDK

公式からダウンロード

Stable channel (Windows)の1.17.5を落として展開。

以下のPATHを追加でFlutter SDKが利用可能に。

C:\flutter\bin

Flutter SDKのアップグレード

$ flutter upgrade
Flutter is already up to date on channel stable
Flutter 1.17.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8af6b2f038 (2 weeks ago) • 2020-06-30 12:53:55 -0700
Engine • revision ee76268252
Tools • Dart 2.8.4

③Android Studioインストール

https://developer.android.com/studio?hl=jaにアクセスしてダウンロード。

その後Android Studioを起動してセットアップ。

Failed to install Intel HAXM. For details, please check the installation log: "C:\Users\chonm\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\chonm\AppData\Local\Temp\haxm_log.txt
Installer log contents:
=== Logging started: 2020/07/16 13:17:57 ===
This computer does not support Intel Virtualization Technology (VT-x) or it is being exclusively used by Hyper-V. HAXM cannot be installed. 
Please ensure Hyper-V is disabled in Windows Features, or refer to the Intel HAXM documentation for more information.

=== Logging stopped: 2020/07/16 13:17:57 ===

👆Hyper-V有効にしているのにエラーに。。。
→Hyper-Vは外すべきらしい。

ConfigureからSDKマネージャーを選択。Android SDKのインストール p24

その後、PluginからFlutterとFlutter i18nをインストール

Flutter Studio　UIのデザインツール

デザイン後、コードをコピペすればOK。

プロジェクト作成後、状態確認。P36

C:\Users\~~~~\AndroidStudioProjects\flutter_app>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.18362.959], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
X Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.
[√] Android Studio (version 4.0)
[√] VS Code (version 1.47.2)
[!] Connected device
! No devices available

! Doctor found issues in 2 categories.

AndroidSDKがエラー

🙄Android Studioのセットアップ時にHyper-v周りでエラー出たのが原因かもしれない。。。
→後ほどHyper-vを外してから再インストールしても変わらず
→前述のJavaのバージョン8を入れて解決しました。

AVD ManagerからPixel2をインストールして起動。

ライセンスの確認。

$ flutter doctor --android-licenses

諸々の確認

$ flutter doctor Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.18362.959], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1) // 対応のバージョンをインストールしていないとエラーになる。
[√] Android Studio (version 4.0)
[√] VS Code (version 1.47.2)
[√] Connected device (1 available) // デバイス起動してない場合はエラーになる。
! No devices available

! Doctor found issues in 1 category.

VSCode

注意点　AndroidStudioからデバイスを起動してからでないと確認できません

プロジェクト生成はコマンドパレットから作成するのとコマンドラインから作成するので、2パターンあります。
個人的にはコマンドラインからのプロジェクト生成でいいかなと思います。

①コマンドパレットで作成

コマンドパレットで以下選択

flutter: New Project

プロジェクト名とディレクトリ選択後、諸々自動生成。

続けて

flutter: Select Device

②コマンドラインからFlutter SDK利用

プロジェクト作成

$ flutter create test_app
All done!
[√] Flutter: is fully installed. (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.18362.959], locale ja-JP)
[!] Android toolchain - develop for Android devices: is partially installed; more components are available. (Android SDK version 30.0.1)
[√] Android Studio: is fully installed. (version 4.0)
[√] VS Code: is fully installed. (version 1.47.2)
[!] Connected device: is not available.
Run "flutter doctor" for information about installing additional components.
In order to run your application, type:
  $ cd test_app
  $ flutter run
Your application code is in test_app\lib\main.dart.

デバイス確認※Android Studioで起動してから以下

$ flutter devices 2 connected devices:
2 connected devices:

sdk gphone x86 • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
sdk gphone x86 • emulator-5556 • android-x86 • Android 11 (API 30) (emulator)

起動(open JDKの確認が出るのでOKする。(鬼時間かかる。))

$ flutter run -d emulator-5554

※デバイスIDを指定

👆確認できました。

躓いた点まとめ

①Hyper-Vは外す

②Android StudioでDeviceを起動して使う

③Android License　→Java8をインストールで解決

Flutter始めようとしたらエラー出た。Android license status unknown.

おわりに

環境構築が地味にめんどくさい印象。

ですが、せっかく環境構築できたので試しにゆる～く勉強してみようと思います。

※スマホが表示された際の興奮はなかなかでした！笑

備忘録

✅クロスプラットフォームフレームワーク比較

FlutterとReact Native(とXamarin)の正しい(?)比較

クロスプラットフォームフレームワーク比較 2020（Flutter, React Native, Xamarin, Unity）

Dart(JavaやC#に似ている)はKotlinやSwiftとの比較において、その言語機能要素について批判されがち

すでに React を使って開発しているのであれば、ほとんど学習コストなしに React Native を導入できる。

React Native アプリはプラットフォームによって見た目が変わり、Futter アプリはどのプラットフォームでも統一された見た目。