酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

FlutterをmacOSにインストールする

最近Flutterが盛り上がっているらしいので、Flutterをみようと思う。

あらすじ

個人的にはTitaniumのように一瞬盛り上がって、Titaniumすげー!と言ってた人たちが後続のプロダクトにドバッと移ってしまう事例をみており、なかなかクロスプラットフォームなプロダクトに触る機会がなかった。React Nativeも結局触らずじまい。

少し前に、とある方が「新規にアプリを作りたいんだけどどうしたらいいですか?(意訳)」と質問を投げてきたのでアレコレ答えていて「今はReact NativeかFlutterが人気だよねー」と話をしていた。タイムリーなことに次の日に(どこかのカンファレンスでセッションがあった?)タイムラインで「Flutterがすごい!」と話題にのぼっていた。

今日、@najeira さんが以下のようなツイートをしていた。

実運用されているアプリがあることを知ってCartuneをインストールして触ってみたところ普通に動くようです。あー、普通に動くというのは言葉が悪いな…… WebViewをラッピングしたようなアプリになると思っていました。

これを知って、最初に書いたようにFlutterで何かアプリ作ってみたいなぁと考えるようになるのでした。

Flutterをインストールする

開発環境を整えていきたいと思います。この記事で書いているのはほぼ「Flutter Setup for macOS - Flutter」と同じですので一次ソースをお読みください。

SDKをダウンロードします。リポジトリをクローンするのに少し時間がかかります。

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

Android/iOS向けのツールやら色々ダウンロードするみたい。

flutter doctor

こんなんでた。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D47, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.1)
[!] 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)
[!] VS Code (version 1.20.1)
[!] Connected devices
    ! No devices available

iOS toolchainをインストールする必要がありそうです。

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

❗️はVS Code (version 1.20.1)だけとなりました。

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D47, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.0)
[!] VS Code (version 1.20.1)
[✓] Connected devices (2 available)

VS Codeの拡張機能でDart Codeをインストールしました。

f:id:ch3cooh393:20180302230802p:plain f:id:ch3cooh393:20180302230828p:plain f:id:ch3cooh393:20180302230841p:plain

もう一度flutter doctorを実行しました。

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D47, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.20.1)
[✓] Connected devices (3 available)

• No issues found!

サンプルプロジェクトを起動する

iOSシミュレータを起動した上で、サンプルプロジェクトのディレクトリに移動してflutter runを実行するとアプリが起動します。

open -a Simulator
cd ~/flutter/examples/hello_world
flutter run

起動しました。

とりあえず起動させるところまでは進めました。推奨エディタはIntelliJのようですが、Visual Studio Codeでもサポートされているみたいですね。