Flutter
FlutterはGoogleが提供するものでクロスプラットフォーム開発が可能です。iOSアプリ以外にもやAndroidアプリやWebアプリ開発もできます。
Flutter SDK
Flutter SDKを以下のmacOSからダウンロードします。
Macの開発環境に必要とされる条件
- OS: macOS(64-bit)
- Disk Space: 2.8 GB (Xcodeや他に必要となるツールは含まない)
- Tools: Flutter は以下のコマンドラインツールを使う、あるいは理解している必要がありますが、最初の時点では全てなくても始められます。
- bash
- curl
- git 2.x
- mkdir
- rm
- unzip
- which
ダウンロード
以下は公式の Get the Flutter SDK に沿って進めていきます。
flutter_macos_xxx.zip のzipファイルをダウンロード
zipファイルがダウンロードディレクトリにあるのを確認し、解凍します。
1 2 3 4 5 |
$ cd ~/Downloads/ $ ls flutter_macos_1.22.5-stable.zip ... |
zipファイルを解凍
1 |
$ unzip flutter_macos_1.22.5-stable.zip |
解凍されて flutter ディレクトリが作成されて、その下に bin デイレクトリがあります。
1 2 3 4 5 6 7 8 |
$ ls -l total 32 -rwxr-xr-x@ 1 ajw staff 2085 12 11 07:53 dart -rw-r--r--@ 1 ajw staff 1426 12 11 07:53 dart.bat -rwxr-xr-x@ 1 ajw staff 2085 12 11 07:53 flutter -rw-r--r--@ 1 ajw staff 2539 12 11 07:53 flutter.bat drwxr-xr-x@ 19 ajw staff 608 12 19 14:12 internal $ |
PATHの設定
bin をPATHに設定します。
1 |
$ export PATH="$PATH:`pwd`/flutter/bin" |
このPATH設定は一時的なので毎回設定しないといけないのですが、
.bash_profile
があればそこに設定すると楽になります。
1 2 |
$ echo 'export PATH="$PATH:`pwd`/flutter/bin:$PATH' >> .bash_profile $ source .bash_profile |
これでインストールは終了です。
Flutter doctor
Xcodeがインストールされていなければ以下を参考にセットアップしておきます。
Android Studio も必要なのでインストールします。
flutter doctorを使って環境がセットアップされているか確認します。
1 |
$ flutter doctor |
診断結果が表示されるのでそれぞれ対処していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.6 19G2021, locale ja-JP) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.3) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [✓] Xcode - develop for iOS and macOS (Xcode 11.7) [!] Android Studio (version 4.0) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] Connected device ! Doctor found issues in 3 categories. |
診断結果ですが、Android 関連で足りないものがあるようです。
1. Android toolchain
To resolve this, run: flutter doctor –android-licenses
とありますので、このコマンドを入力します。許可するには y を入力
1 2 3 4 5 6 |
$ flutter doctor --android-licenses 4 of 7 SDK package licenses not accepted. 100% Computing updates... Review licenses that have not been accepted (y/N)? ... All SDK package licenses accepted |
2. Flutter plugin, Dart plugin
Flutterのプラグインを入れるとDartのプラグインも一緒に入ります。
Android Studio のTop画面の下から「Configure」「SDK Manager」を起動します。
「Plugin」タグから「flutter」を検索してインストールします。
インストールが終わると「Restart IDE」と表示されるのでクリック。Android Studioが再起動されます。
flutter doctorで確認して終わりです。
Android StudioでFlutter, Dart pluginをインストールできていてもflutter doctorでエラーになる場合があります。Android Studio 4.1で起きている場合はアップグレードしてみましょう。
1 2 |
flutter channel dev flutter upgrade |
これでiPhoneをMacに接続、あるいはエミュレーターを起動して再度testすると。
1 2 3 4 5 6 7 8 9 10 11 |
$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel dev, 1.26.0-1.0.pre, on Mac OS X 10.15.6 19G2021 darwin-x64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 11.7) [✓] Android Studio (version 4.1) [✓] Connected device (2 available) * No issues found! $ |
これで環境設定がある程度できました。次は実際のアプリを作っていきましょう
References:
Flutter
Flutter architectural overview
Flutter Install
Set up an editor – Flutter