話題のFlutterの開発環境を構築しよう
一番ホットなアプリ開発技術
巷ではFlutterが流行っていますね。
Flutter(フラッター)とは、Googleによって開発されたモバイルアプリケーションSDK (Software Development Kit)の事を指します。
Made by Google logo Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
クロスプラットフォーム
最大の特徴は、一つのコードからAndroidとiOSどちらのプラットフォームでもアプリケーションがビルド出来るという点でしょう。
今回はMacでのFlutterの開発環境構築までを実際にやってみたので備忘録としてまとめようと思います。
手順
Flutter本体のインストール
まずはFlutterの本体をインストールしましょう。
OSに合わせた最新のZIPをダウンロードします。
今回はflutter_macos_v1.9.1+hotfix.6-stable.zipでした。
Select the operating system on which you are installing Flutter:Install - Flutter
ダウンロードが完了したら、任意のディレクトリ(今回はdevelop)に移動し解凍します。
cd ~/develop
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip
パスの追加
次に、Flutterへのパスを追加します。
今回はfishを使っているので以下のような形で修正してください。
...
(略)
...
#flutter
set -x PATH ~/develop/flutter/bin $PATH
...
(略)
...
確認
コマンドを確認してみましょう。
Flutter 1.9.1+hotfix.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 68587a0916 (9 weeks ago) • 2019-09-13 19:46:58 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0
無事に通っていますね♪
flutter doctorの確認
次に細かい設定を進めていきましょう。
環境構築のサポートをしてくれる便利なコマンドが用意されているので、まずはそちらを実行して現状を確認してみます。
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.5 18F203, 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 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
✗ 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 (not installed)
[!] IntelliJ IDEA Community Edition (version 2019.1.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.40.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 6 categories.
色々とエラーが出たのでそちらを順番に潰していきましょう。
Android toolchain - develop for Android devices
Unable to locate Android SDK.
AndroidのSDKが見つからないよと怒られました。
このマシンでは、Androidの開発をしたことが無いので初期設定をする必要がありそうです。
ただ出力によると、Android Studioをインストールすればよしなに設定してくれるとの事なのでAndroidStudioをインストールします。
なんの問題もなくインストール出来ると思うので詳細は割愛します。
Android Studio provides the fastest tools for building apps on every type of Android device.Download Android Studio and SDK tools | Android Developers
Android licenses not accepted.
以下のエラーは、Androidのライセンスに承諾していないよ！と言われています。
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
ログに出ている通りに、flutter doctor --android-licensesを実行し、ライセンスの承諾を行いましょう。
基本的には全てyでOKです。
Warning: File /Users/blogenist/.android/repositories.cfg could not be loaded.
7 of 7 SDK package licenses not accepted. 100% Computing updates...
...
(略)
...
All SDK package licenses accepted
ここまでやればAndroid toolchainの部分が設定完了となります。
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
Xcode - develop for iOS and macOS
Xcode installation is incomplete; a full installation is necessary for iOS development.
これはXcodeがインストールされていない際に出るエラーなので、AppStoreからXcodeをインストールしましょう。
✗ 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/Develope
Xcodeのインストールが完了したら、sudo xcode-select --switch /Applications/Xcode.app/Contents/DeveloperでインストールしたものにSwitchしましょう。
この状態でflutter doctorを実行すると以下のようなエラーが出力されるようになりました。
⢿Error executing simctl: 69
Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command.
ログに出た通りのコマンドを実行してみます。
すると、以下のように同意を求められるのでよしなに確認して承認しましょう。
You have not agreed to the Xcode license agreements. You must agree to both license agreements below in order to use Xcode.
Hit the Enter key to view the license agreements at '/Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf'
...
(略)
...
By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] agree
You can view the license agreements in Xcode's About Box, or at /Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf
これでXcodeのチェックはOKです。
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.5 18F203, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[!] Android Studio (version 3.5)
✗ 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.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.40.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 4 categories.
CocoaPods not installed.
✗ 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 cocoapod
こちらもMacにCocoaPodsがインストールされていない際に出るエラーです。
CocoaPodsとは、iOS/Mac用のアプリを開発する際のライブラリ管理ツールとなっています。
以下のコマンドでgem経由インストールしましょう。
Fetching: thread_safe-0.3.6.gem (100%)
Successfully installed thread_safe-0.3.6
Fetching: tzinfo-1.2.5.gem (100%)
Successfully installed tzinfo-1.2.5
Fetching: concurrent-ruby-1.1.5.gem (100%)
Successfully installed concurrent-ruby-1.1.5
Fetching: i18n-0.9.5.gem (100%)
Successfully installed i18n-0.9.5
Fetching: activesupport-4.2.11.1.gem (100%)
Successfully installed activesupport-4.2.11.1
Fetching: nap-1.1.0.gem (100%)
Successfully installed nap-1.1.0
Fetching: fuzzy_match-2.0.4.gem (100%)
Successfully installed fuzzy_match-2.0.4
Fetching: httpclient-2.8.3.gem (100%)
Successfully installed httpclient-2.8.3
Fetching: algoliasearch-1.27.1.gem (100%)
Successfully installed algoliasearch-1.27.1
Fetching: cocoapods-core-1.8.4.gem (100%)
Successfully installed cocoapods-core-1.8.4
Fetching: claide-1.0.3.gem (100%)
Successfully installed claide-1.0.3
Fetching: cocoapods-deintegrate-1.0.4.gem (100%)
Successfully installed cocoapods-deintegrate-1.0.4
Fetching: cocoapods-downloader-1.3.0.gem (100%)
Successfully installed cocoapods-downloader-1.3.0
Fetching: cocoapods-plugins-1.0.0.gem (100%)
Successfully installed cocoapods-plugins-1.0.0
Fetching: cocoapods-search-1.0.0.gem (100%)
Successfully installed cocoapods-search-1.0.0
Fetching: cocoapods-stats-1.1.0.gem (100%)
Successfully installed cocoapods-stats-1.1.0
Fetching: netrc-0.11.0.gem (100%)
Successfully installed netrc-0.11.0
Fetching: cocoapods-trunk-1.4.1.gem (100%)
Successfully installed cocoapods-trunk-1.4.1
Fetching: cocoapods-try-1.1.0.gem (100%)
Successfully installed cocoapods-try-1.1.0
Fetching: molinillo-0.6.6.gem (100%)
Successfully installed molinillo-0.6.6
Fetching: atomos-0.1.3.gem (100%)
Successfully installed atomos-0.1.3
Fetching: CFPropertyList-3.0.1.gem (100%)
Successfully installed CFPropertyList-3.0.1
Fetching: colored2-3.1.2.gem (100%)
Successfully installed colored2-3.1.2
Fetching: nanaimo-0.2.6.gem (100%)
Successfully installed nanaimo-0.2.6
Fetching: xcodeproj-1.13.0.gem (100%)
Successfully installed xcodeproj-1.13.0
Fetching: escape-0.0.4.gem (100%)
Successfully installed escape-0.0.4
Fetching: fourflusher-2.3.1.gem (100%)
Successfully installed fourflusher-2.3.1
Fetching: gh_inspector-1.1.3.gem (100%)
Successfully installed gh_inspector-1.1.3
Fetching: ruby-macho-1.4.0.gem (100%)
Successfully installed ruby-macho-1.4.0
Fetching: cocoapods-1.8.4.gem (100%)
Successfully installed cocoapods-1.8.4
Parsing documentation for thread_safe-0.3.6
Installing ri documentation for thread_safe-0.3.6
Parsing documentation for tzinfo-1.2.5
Installing ri documentation for tzinfo-1.2.5
Parsing documentation for concurrent-ruby-1.1.5
Installing ri documentation for concurrent-ruby-1.1.5
Parsing documentation for i18n-0.9.5
Installing ri documentation for i18n-0.9.5
Parsing documentation for activesupport-4.2.11.1
Installing ri documentation for activesupport-4.2.11.1
Parsing documentation for nap-1.1.0
Installing ri documentation for nap-1.1.0
Parsing documentation for fuzzy_match-2.0.4
Installing ri documentation for fuzzy_match-2.0.4
Parsing documentation for httpclient-2.8.3
Installing ri documentation for httpclient-2.8.3
Parsing documentation for algoliasearch-1.27.1
Installing ri documentation for algoliasearch-1.27.1
Parsing documentation for cocoapods-core-1.8.4
Installing ri documentation for cocoapods-core-1.8.4
Parsing documentation for claide-1.0.3
Installing ri documentation for claide-1.0.3
Parsing documentation for cocoapods-deintegrate-1.0.4
Installing ri documentation for cocoapods-deintegrate-1.0.4
Parsing documentation for cocoapods-downloader-1.3.0
Installing ri documentation for cocoapods-downloader-1.3.0
Parsing documentation for cocoapods-plugins-1.0.0
Installing ri documentation for cocoapods-plugins-1.0.0
Parsing documentation for cocoapods-search-1.0.0
Installing ri documentation for cocoapods-search-1.0.0
Parsing documentation for cocoapods-stats-1.1.0
Installing ri documentation for cocoapods-stats-1.1.0
Parsing documentation for netrc-0.11.0
Installing ri documentation for netrc-0.11.0
Parsing documentation for cocoapods-trunk-1.4.1
Installing ri documentation for cocoapods-trunk-1.4.1
Parsing documentation for cocoapods-try-1.1.0
Installing ri documentation for cocoapods-try-1.1.0
Parsing documentation for molinillo-0.6.6
Installing ri documentation for molinillo-0.6.6
Parsing documentation for atomos-0.1.3
Installing ri documentation for atomos-0.1.3
Parsing documentation for CFPropertyList-3.0.1
Installing ri documentation for CFPropertyList-3.0.1
Parsing documentation for colored2-3.1.2
Installing ri documentation for colored2-3.1.2
Parsing documentation for nanaimo-0.2.6
Installing ri documentation for nanaimo-0.2.6
Parsing documentation for xcodeproj-1.13.0
Installing ri documentation for xcodeproj-1.13.0
Parsing documentation for escape-0.0.4
Installing ri documentation for escape-0.0.4
Parsing documentation for fourflusher-2.3.1
Installing ri documentation for fourflusher-2.3.1
Parsing documentation for gh_inspector-1.1.3
Installing ri documentation for gh_inspector-1.1.3
Parsing documentation for ruby-macho-1.4.0
Installing ri documentation for ruby-macho-1.4.0
Parsing documentation for cocoapods-1.8.4
Installing ri documentation for cocoapods-1.8.4
Done installing documentation for thread_safe, tzinfo, concurrent-ruby, i18n, activesupport, nap, fuzzy_match, httpclient, algoliasearch, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-stats, netrc, cocoapods-trunk, cocoapods-try, molinillo, atomos, CFPropertyList, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 25 seconds
30 gems installed
VS Code (version 1.40.0)
Flutter extension not installed; install from
今回はVSCodeで開発をしようと思っているので、こちらも解決しておきましょう。
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
こちらはVSCodeの拡張がインストールされていないのでインストールしてね、という警告になります。
なので、言われるがままにインストールしておきましょう。
これでVSCodeについてもパスする事が出来ました。
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.5 18F203, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[!] Android Studio (version 3.5)
✗ 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.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.40.0)
[!] Connected device
! No devices available
! Doctor found issues in 3 categories.
今回はAndroidStudioもIntelliJも使わないので他のエラーについてはスルーします。
Flutterプロジェクトの作成
では、実際にFlutterプロジェクトでHellowWorldを動かしてみようと思います。
VSCodeを開いたら、Flutter: New Projectを実行しましょう。
次にプロジェクト名を入力します。
最後に、プロジェクトを作成するディレクトリを求められるので任意の作業ディレクトリを指定しましょう。
Could not find a Flutter SDK.と言われる場合
初回は以下のようなエラーダイアログが出る場合があります。
その場合はLocate SDKをクリックして、Flutterのbinディレクトリを指定しましょう。
これで以下のようなディレクトリが生成されると思います。
.
├── README.md
├── android
│ ├── app
│ ├── build.gradle
│ ├── gradle
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── hello_world_android.iml
│ ├── local.properties
│ └── settings.gradle
├── hello_world.iml
├── ios
│ ├── Flutter
│ ├── Runner
│ ├── Runner.xcodeproj
│ └── Runner.xcworkspace
├── lib
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml
└── test
└── widget_test.dart
10 directories, 13 files
実行
以下のようなログが出ているので、試しに実行してみましょう。
In order to run your application, type:
$ cd .
$ flutter run
Your application code is in ./lib/main.dart.
すると、以下のようなエラーが出ると思います。
No supported devices connected.
接続済のサポートしているデバイスが無いよと怒られました。。。orz
iOSエミュレーターの起動
では、iOSのエミュレーターを起動してもう一回試してみましょう。
open -a Simulatorでエミュレーターを起動して、、、
再度実行！
Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
├─Assembling Flutter resources... 5.5s
└─Compiling, linking and signing... 14.3s
Xcode build done. 21.9s
Syncing files to device iPhone 11 Pro Max... 1,843ms
おぉ！きた！！
とても簡単ですね♪
ちなみに、VSCodeのステータスバーのNo DeviceからiOSエミュレーターを起動する事も出来ました。
Andoidエミュレーターの起動
では、せっかくなのでAndroidエミュレーターでの起動してみましょう。
ステータスバーのNo Deviceをクリックし、Creatiung Android emulatorを選択しましょう。
No suitable Android AVD system images are available.
筆者の環境では以下のようなエラーが発生しました。
まだ一つもAVDを作成していないからですね。
今回はAndroidStudioにて基本的なAVDを作成してみます。
特に問題無く作れると思うので、詳細は割愛します。
正常にAVDが作成出来ると、VSCodeにてAndroidエミュレーターが選択出来るようになります。
この状態でAndroidエミュレーターを起動した上でflutter runを実行してみます。
無事に起動出来ました！
これでiOS/Androidの両エミュレーターでの開発環境の準備が出来ました♪
終わりに
以上のように、簡単に両OSの開発環境が整いました。
アプリ開発は個人でも手を出しやすい分野ですので、皆さんもぜひ試してみてください♪