はじめに
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 アプリはどのプラットフォームでも統一された見た目。
コメントを残す