仕事では主にKotlinを使ってAndroidアプリ開発をしています。
プライベートでもコードを書いたりするのですが、ふと思いついたアイデアを形にしたいと思い、アプリを作ったりすることがあります。
とりあえず動くものをiOSかAndroidで書くことはできるのですが、後々のことを考えるとiOS/Androidの両方を自分で書くのはツライよなあと思ったりもします。
そういうこともあってワンソースでiOS/Androidの両方に対応できるクロスプラットフォームなフレームワークに興味があり、最近ではReact Nativeを試していました。
ところがどうにもしっくりこず、いまいち進捗が芳しくありませんでした。。
そういったところで最近よく話を聞くようになったFlutterを試してみることにしました。

Flutterって？

FlutterはDart言語によってiOS/Android両プラットフォームで動くアプリを書けるGoogleのフレームワークです。

様々な特徴がありますが、React Nativeを試していた時に比べていくつか大きく心惹かれるポイントがありました。

開発環境

普段Android開発を行っていることもあり、Android Studioという非常に高機能なIDEでの開発にどっぷりとつかってしまっています。
Android StudioやIntelliJとそのプラグインで開発ができるというのはとても魅力に感じました。

それほどがっつりJavaScriptを書かない私からすると、React Nativeでは開発環境を整えるだけで一つのハードルがあり、プライベートのプログラミングではそういったことが開発モチベーションを削ぐ大きな要因になったりします。
それを取り除けたことは大きかったです。

Dart言語

私は静的型付け言語が好きです。基本的にはいつどこでどんなデータが扱われているのかが明確で、動的型付け言語よりもコードを読むのも書くのも楽だと感じています。

見た目はJavaのようです。最近はKotlinを書くことが多いのでJavaに戻ってきてしまったような感覚でそこは若干あれな気分ですが、全然よいです。

導入

macOS + Android Studioでの導入を前提に書きます。

インストール

Gitリポジトリからクローンしてきます。

$ git clone -b beta https://github.com/flutter/flutter.git

次に足りてないものがないか確認します

$ flutter doctor
...
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D47, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[!] 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
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.0)
[!] VS Code (version 1.20.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.

iOS toolchainがないという結果がでました。これらはiOS実機にアプリをインストールする際に必要になりますが、今は無視します。その他にVS Codeについてもなんか出てますが、使わないので無視します。デバイスが接続されてないとも出ていますが、これも今は関係ないので無視します。

IDE環境

Android Studioのインストール

インストールしましょう。

エミュレーターを準備

やってない人は準備しましょう。 https://developer.android.com/studio/run/managing-avds.html

プラグイン導入

Preferences>Pluginsでプラグインの設定画面を開きBrowse repositories…ボタンを押します。
Flutterというプラグインがありますので、検索します。
installボタンを押すと、Dartプラグインもインストールするかと聞かれるのでYesを選択します。
インストールが終わったら、ガイドにしたがってAndroid Studioを再起動しましょう。

プロジェクト作成

以下の画面でStart a new Flutter projectを選択、あるいはメニューからFile>New Flutter Projectでプロジェクトを作成します。
f:id:kakueki61:20180317011345p:plain:w300

ビルドしてみる

f:id:kakueki61:20180317012606p:plain:w400
Android Studioの上部にこんなメニューがあると思います。一番左がインストール先のデバイスです。先程用意したエミュレーターを選択します。一番右のボタンが実行なのでこれを押すとビルドが始まり、無事にインストールされるとエミュレーターに以下のような画面が現れます。