話題のflutterを使って見ました

Flutter - Beautiful native apps in record timeは、Googleが開発しているスマホアプリ開発環境(UIフレームワーク)です。同じコードでiOSアプリ、Androidアプリを開発することができます。開発言語はGoogleが開発しているDart programming language | Dartです。

React Native, Xamarinなど同じ環境でiPhone/Androidアプリを開発できるものはすでにありますが、選択肢が増えるのは良いことだと思います。 また、Android StudioやVisual Studio Codeがサポートされているのも取っつきやすいかもしれません。

今回は、iPhoneアプリをシミュレータで動かすところまで実行しましたが、iPhoneアプリ開発環境(Xcode、cocoapod)のインストールは別サイトを参考にする必要があります。

以下、macOS XでGet Started: Install on macOS - Flutterを試してみました。

Flutter SDKを取得

Clone the repo

git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

環境チェック

flutter doctorを実行します。

$ flutter doctor
Downloading Dart SDK from Flutter engine ead227f118077d1f2b57842a32abaf105b573b8a...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 43.3M  100 43.3M    0     0  4290k      0  0:00:10  0:00:10 --:--:-- 5273k
Building flutter tool...

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.io                   ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Downloading Material fonts...                         0.6s
Downloading package sky_engine...                     0.6s
Downloading common tools...                           0.8s
Downloading darwin-x64 tools...                       3.8s
Downloading android-arm-profile/darwin-x64 tools...   0.7s
Downloading android-arm-release/darwin-x64 tools...   0.7s
Downloading android-arm64-profile/darwin-x64 tools...  0.7s
Downloading android-arm64-release/darwin-x64 tools...  0.5s
Downloading android-x86 tools...                      1.9s
Downloading android-x64 tools...                      2.2s
Downloading android-arm tools...                      1.0s
Downloading android-arm-profile tools...              0.7s
Downloading android-arm-release tools...              0.7s
Downloading android-arm64 tools...                    0.9s
Downloading android-arm64-profile tools...            1.2s
Downloading android-arm64-release tools...            0.9s
Downloading ios tools...                              4.9s
Downloading ios-profile tools...                      4.1s
Downloading ios-release tools...                      2.5s
Downloading Gradle Wrapper...                         0.3s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 25.0.2)
[!] 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 (version 3.0)
[!] IntelliJ IDEA Community Edition (version 2017.3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.20.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 4 categories.

×が問題点ですね。Editor plugin(IntelliJ IDEA)は後回しにします。

$ brew install --HEAD libimobiledevice
以下の依存モジュールをインストールします。
==> Installing dependencies for libimobiledevice: automake, libxml2, libtasn1, libplist, libusb, usbmuxd, openssl

$ brew install ideviceinstaller
以下の依存モジュールをインストールします。
==> Installing dependencies for ideviceinstaller: libzip

$ brew install ios-deploy
$ brew install

Update your path

以下の内容を.bash_profileに追加。使っているshに依存します。

export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH”

確認。

$ echo $PATH

iOS Setup

Install Xcode

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -license

Set up the iOS simulator

$ open -a Simulator

Deploy to iOS devices

iOS開発環境をセットアップしていない人は、以下の処理が必要ですが、知らないと少し難しいかもしれません。

外部ライブラリ追加

$ install cocoapods

$ cd flutter/examples/hello_world/ios
$ pod setup

example実行

$ cd flutter/examples/hello_world
$ flutter run

f:id:unokun3:20180311104921p:plain