Flutter導入編
今までSwiftやJava/Kotlinでまともにネイティブアプリを書いたことがなく、今からやるとしたら省力そうなクロスプラットフォームかなと思い、
最初はReact Nativeを使おうかと思ったのですが、最近Flutterが熱いみたいなのでとりあえず使ってみます。
何はともあれまずは導入です。以下のページに従いながらいきます。OSは macOS Catalina 10.15.3 です。
$ cd ~/Applications
$ git clone https://github.com/flutter/flutter.git
$ vim ~/.zprofile
# 以下の行を追加。.bashrcでも.zshrc でもなんでもいい。
export PATH=$HOME/Applications/flutter/bin:$PATH
$ source .zprofile
$ which flutter
/Users/<username>/Applications/flutter/bin/flutter
# 必要なdependenciesを確認
$ flutter doctor
Downloading Dart SDK from Flutter engine dcc9a4048da890660f0880b4c2afed7c9470d335...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 255M 100 255M 0 0 12.4M 0 0:00:20 0:00:20 --:--:-- 12.9M
Building flutter tool...
Downloading Material fonts... 0.4s
Downloading Gradle Wrapper... 0.1s
Downloading package sky_engine... 0.3s
Downloading flutter_patched_sdk tools... 1.2s
Downloading flutter_patched_sdk_product tools... 1.2s
Downloading darwin-x64 tools... 2.8s
Downloading libimobiledevice... 0.1s
Downloading usbmuxd... 0.1s
Downloading libplist... 0.1s
Downloading openssl... 0.2s
Downloading ios-deploy... 0.1s
Downloading darwin-x64/font-subset tools... 0.3s
Downloading android-arm-profile/darwin-x64 tools... 0.4s
Downloading android-arm-release/darwin-x64 tools... 0.4s
Downloading android-arm64-profile/darwin-x64 tools... 0.4s
Downloading android-arm64-release/darwin-x64 tools... 0.5s
Downloading android-x64-profile/darwin-x64 tools... 0.4s
Downloading android-x64-release/darwin-x64 tools... 0.4s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-2.0.pre.114, on Mac OS X 10.15.3 19D76,
locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.2)
✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
To update using sdkmanager, run:
"/Users/ToshimitsuKugimoto/Library/Android/sdk/tools/bin/sdkmanager"
"platforms;android-28" "build-tools;28.0.3"
or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
[✗] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS
development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[!] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2019.1.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2019.3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.45.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 7 categories. とりあえずAndroid Studioをダウンロードしてインストール。Android Studioを起動して、Setup Wizardにしたがって諸々必要なものも一緒にインストールします。
https://developer.android.com/studio#
Xcodeをダウンロード&インストールします。
Xcodeのインストールが終わったら以下のコマンドを実行。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -licenseAndroid Studio と IntelliJ UltimateにFlutterのPluginをそれぞれのアプリのPreferencesから入れます。
再度 flutter doctor してみます。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-2.0.pre.114, on Mac OS X 10.15.3 19D76,
locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.2)
✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
To update using sdkmanager, run:
"/Users/ToshimitsuKugimoto/Library/Android/sdk/tools/bin/sdkmanager"
"platforms;android-28" "build-tools;28.0.3"
or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
[!] Xcode - develop for iOS and macOS (Xcode 11.6)
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[✓] Android Studio (version 4.0)
[!] IntelliJ IDEA Community Edition (version 2019.1.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.1)
[!] VS Code (version 1.45.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 5 categories.まだ色々出てます。とりあえずAndroid toolchainから。言われた通り以下のコマンドを実行したら、Exceptionが発生しました。
$ /Users/ToshimitsuKugimoto/Library/Android/sdk/tools/bin/sdkmanager
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:583)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
... 5 moreうーん軽くググった感じどうやらOpen JDK 11 だと現状上手く動かないっぽい？
open jdk8を入れてpathを通し直し、再度コマンドを実行します。
$ brew cask install adoptopenjdk8
$ vim .zprofile
# 以下のように設定 #export JAVA_HOME=`/usr/libexec/java_home -v 11`
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
PATH=${JAVA_HOME}/bin:${PATH}
$ source .zprofile
$ java -version
openjdk version "1.8.0_262"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_262-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.262-b10, mixed mode)
$ /Users/ToshimitsuKugimoto/Library/Android/sdk/tools/bin/sdkmanager "platforms;android-28" "build-tools;28.0.3"再度 flutter doctor すると今度はライセンスがどうの... (長いな...)
言われた通りコマンドを入力します。
$ flutter doctor --android-licenses
# yes を何回か入力cocoapodsとやらもインストール。
$ sudo gem install cocoapodsIntelliJ IDEA Community Edition とか VS Code は使う予定がないので、一旦こんなところかなと思います。
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-2.0.pre.114, on Mac OS X 10.15.3 19D76, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[!] IntelliJ IDEA Community Edition (version 2019.1.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.1)
[!] VS Code (version 1.45.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 3 categories.この記事が気に入ったらサポートをしてみませんか？