最近Flutterが盛り上がっているらしいので、Flutterをみようと思う。
Flutter情報出てきたのでなんかアプリ作ろうかな
— さくさん (@ch3cooh) 2018年3月2日
あらすじ
個人的にはTitaniumのように一瞬盛り上がって、Titaniumすげー!と言ってた人たちが後続のプロダクトにドバッと移ってしまう事例をみており、なかなかクロスプラットフォームなプロダクトに触る機会がなかった。React Nativeも結局触らずじまい。
少し前に、とある方が「新規にアプリを作りたいんだけどどうしたらいいですか?(意訳)」と質問を投げてきたのでアレコレ答えていて「今はReact NativeかFlutterが人気だよねー」と話をしていた。タイムリーなことに次の日に(どこかのカンファレンスでセッションがあった?)タイムラインで「Flutterがすごい!」と話題にのぼっていた。
今日、@najeira さんが以下のようなツイートをしていた。
書いたよ / Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した note(ノート) https://t.co/sdIqclLSt8
— najeira (@najeira) 2018年3月2日
実運用されているアプリがあることを知ってCartuneをインストールして触ってみたところ普通に動くようです。あー、普通に動くというのは言葉が悪いな…… WebViewをラッピングしたようなアプリになると思っていました。
これを知って、最初に書いたようにFlutterで何かアプリ作ってみたいなぁと考えるようになるのでした。
Flutterをインストールする
開発環境を整えていきたいと思います。この記事で書いているのはほぼ「macOS install | 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をインストールしました。
もう一度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でもサポートされているみたいですね。