Flutterとは
従来では、objective-CとswiftはiOSアプリ、java(kotolin)はAndroidアプリ、といったように、それぞれのプラットフォーム毎に開発言語が異なっていたが、
xamarin、react native、unityなど、一度の開発でiOSもAndroidもどっちも作れちゃう、いわゆるクロスプラットフォーム開発が注目されつつある。
とはいえ、まだまだswiftやkotolinでの開発は根強く、むしろクロスプラットフォーム開発は思ったより伸びていない(というか衰退しているような)。
そんな中、googleが開発したflutterもクロスプラットフォーム開発ができるというもの。
ちなみにflutterは言語名ではない。言語はdartと呼ばれるプログラミング言語を使う。
Flutter開発環境を構築
何をインストールするの?
FlutterとAndroid Studioを使います。
Flutterをインストール
以下のFlutter公式サイトからzipをダウンロード
https://flutter.dev/docs/get-started/install/macos
zipを解凍する際は任意のフォルダでOKです。
例)
cd /Users/cotatsu/
自分のルートディレクトリに解凍する場合はこれ。
「cotatsu」の部分は自分のユーザー名に変更すること。
unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip
※zip名は今後変更になるかもしれないのでその都度ご確認を。
flutterフォルダが作成され、たくさんファイルが入ります
PATHを通す
flutterコマンドを使いたいわけです。なので以下の様にパスを登録
export PATH="$PATH:/Users/cotatsu/flutter/bin"
もちろん、ディレクトリの位置によってパスは変わるので柔軟に対応をお願いします。
「flutter/bin」はそのままでOKです。
「/Users/cotatsu」ところは各々変更を。
PATHが通ったか確認
flutter doctor
このコマンドを打つと。。
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.15.2 19C57, locale ja-JP)
[✗] Android toolchain - develop for Android devices
✗ 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/setup/#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
You may also want to add it to your PATH environment variable.
[!] Xcode - develop for iOS and macOS (Xcode 11.3)
✗ 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.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.27.2)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
こんな感じのが結果が返ってくる。
“idevice_id”は、開発元を検証できないため開けません。
というエラーメッセージが出た場合。
なんかよくわからないんですが、
catalinaとの相性が悪いみたい
以下のコマンドを叩いて修正。
sudo xattr -d com.apple.quarantine /Users/cotatsu/flutter/bin/cache/artifacts/libimobiledevice/idevice_id
例によって、「/Users/cotatsu」の部分は各々変更をお願いします。
こちらの記事を参考にしました(ありがとうございます!!)
https://qiita.com/hiesiea/items/474c652fb6f9ba1ba4ed
再びコマンドを打つ。
flutter doctor
エラーメッセージ出ず!!
Android Studioをインストール
以下の公式サイトからインストール
https://developer.android.com/studio/?hl=ja
android-studio-ide-191.6010548-mac.dmg
みたいなファイルができるのでクリックしてインストール。
Android Studioのインストールまでは流れでやってください(投げやり)
Android Studio上でFlutterインストール
Android Studioをインストールしたら、アプリを立ち上げる。
右下の「Configure>Plugins」を選択。
検索窓で「Flutter」と打てば、Flutterが出てくるのでインストール。
完了すればAndroid StudioでFlutter開発が可能になります。
↑こちらの画像の様に「Start a new Flutter project」と出れば問題なし!
いざ開発っっ!
とりあえず今回はここまで。
トラブルはあるもののそんなに大変ではなかった。