FlutterでiPhoneアプリ 入門

Flutterが気になったので、iPhoneアプリの開発ができるところまで試した。

Flutter

FlutterはGoogleの新しいUIフレームワーク。iOSとAndroid上で動作するネイティブアプリを
作成することができる。現在はベータバージョン。

https://flutter.io/

インストール

環境

  • macOS Sierra 10.12.6
  • Xcode 9.2

DARTのインストール

Homebrewを使って、まずDARTをインストールする。

brew tap dart-lang/dart
brew install dart

VSCodeのインストール

Editorは Android StudioとVSCodeの2つがサポートされている。
ここでは、VSCodeを使用。
VSCodeはこのサイトからダウンロードしてインストールするだけ。

必要なソフトウェアのインストール()

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods

CocopPodのセットアップを実施

pod setup

もし、以下のようなエラーが出た場合にはキャッシュを削除して試す。

Setting up CocoaPods master repo
[!] Failed to connect to GitHub to update the CocoaPods/Specs specs repo - Please check if you are offline, or that GitHub is down

キャッシュを一時/tmp/に移動

mv ~/.cocoapods/ /tmp/
mv ~/Library/Caches/CocoaPods/ /tmp/

Flutter SDKのインストール

ここからFlutterをインストールしていく。
基本的にここを参照。

# 今回インストール場所に $HOME/sw/flutter を使用
cd $HOME/sw/
git clone -b beta https://github.com/flutter/flutter.git

FlutterをPATHに登録するため、.bashrcまたは.zshrcなどに以下を登録

export PATH=$HOME/sw/flutter/bin:$PATH

Flutter の条件確認

ガイドにあるとおり、環境の確認を行う。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (on Mac OS X 10.12.6 16G29, locale en-JP, channel beta)
[✗] 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.io/setup/#android-setup for detailed instructions).
If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✗] Android Studio (not installed)
[✓] VS Code (version 1.20.1)
[!] Connected devices
! No devices available

! Doctor found issues in 3 categories.

FlutteriOS toolchaingVS CodeにチェックがついていればiPhoneアプリには十分。
ソフトウェアが足りない場合には、以下のようなエラーが出るので、従うこと。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (on Mac OS X 10.12.6 16G29, locale en-JP, channel beta)
[✗] 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.io/setup/#android-setup for detailed instructions).
If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
[✗] Android Studio (not installed)
[!] VS Code (version 1.12.1)
[!] Connected devices
! No devices available

Editorのセットアップ

VS Codeを開いて’Dart Code’をインストールする。

新規Flutterプロジェクトの作成

VS Codeのメニュー View>Command Palette… を選択して
Flutter: New Projectを選択し、任意の場所にプロジェクトを作成する。

作成が完了したら、/ios/Runner.xcworkspaceをXcodeで開いて、
SiningBundle Identifierを設定する。

open myflutterapp/ios/Runner.xcworkspace

でも起動できる。

動作確認

iOS Simulaterアプリケーションを起動する。

open -a Simulator

メニューの Hardware>Device から好きなシミュレータを起動。

VSCodeに戻って、main.dartを開いた状態でF5を押すとアプリケーションが動きだす。
成功すると以下のような画面になる。

所感

コードに変更を加えて、F5を押すだけですぐ試せるのは本当に嬉しい。
まだベータ版なので、どこまで動くのか?という疑問はあるが、おもったよりドキュメントがあるので色々試せそう。