Flutterでモバイルアプリ開発を加速する(α版)

先日、Google Devfest Kyotoでハンズオンに参加して興味を持ったので紹介します。

Flutter（ふらったー）はGoogleが提供する新しいモバイルアプリ開発SDKです。 Dart言語を用いて開発し、Android、iOSどちらのOSでも動作するクロスプラットフォームな開発環境となっています。
Android Studio3.0.xからFlutterに対応したので、セットアップしてアプリが起動できるところまでを紹介したいと思います。

なお、セットアップ方法は色々端折っているので詳しくは本家のページを参照してください。
Easy and fast SDK for beautiful apps - Flutter

flutterSDKの取得

• gitからflutterをクローンしてパスを通します。

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

一時的にパスを通しただけなので、必要があれば.bashrcなどにパスを追加してください。

• flutter doctorの実行 以下のようにコマンドを実行します。 インストールが必要なものがあれば表示され、インストール方法なども記載されています。 とても便利です。
  基本的にAndroid Studioとxcodeが必要です。

$ flutter doctor

もしインストールが必要なものがあれば、以下のように表示されます。

[-] Android toolchain - develop for Android devices (Android SDK 26.0.2)
    • Android SDK at /Users/hoge/Library/Android/sdk
    • Platform android-27, build-tools 26.0.2
    ✗ Android SDK file not found: /Users/hoge/Library/Android/sdk/platforms/android-27/android.jar.
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

記載に従ってインストールしていきます。
ｘが表示されなくなったらセットアップは完了です。

Android StdioにFlutterプラグインをインストール

Preferences > PluginからBrowse Repositoriesボタンを押し、flutterで検索します。
Dartのプラグインはインストール済みでした。 入っていない場合はDartプラグインもインストールしてください。

インストールが完了し、再起動すると以下のようにstart new flutter projectが追加されています。

プロジェクトの作成

前の手順でFlutterプラグインをインストールしたので、プロジェクトを作ります。 ウィザードに従って進みます。

Flutter Appliationを選択します。

FlutterSDKのパスを設定します。
その他変更が必要であれば変更します。

パッケージ名を設定します。
Finishを押すとプロジェクトが起動します。

iPhoneのシミュレータ上で実行してみましょう

マテリアルデザインのAppBarやFloatingActionBottonなど必要なコンポーネントは標準で用意されているようです。 もちろんAndroid端末でも実行できます。

もっと詳しいUIの構築方法やイベントの処理などはCodelabで体験できますので、以下からどうぞ。
Building Beautiful UIs with Flutter

参考

https://gdgkyoto.connpass.com/event/67301/
Flutter Setup for macOS - Flutter
FlutterでAndroid/iOS両対応のアプリ開発