FlutterでAndroid/iOS両対応アプリを作ってみる

Flutter というGoogle製フレームワークが最近β版になったそうです。

Flutter は Dart という言語を使い、同じコードで Android/iOS 両方のアプリを作れることができるフレームワーク。

Dart は Google 製の言語で、最初見たとき「Javaっぽいな」という印象でした。

ある程度型付けもできるようですし、他のクロスプラットフォーム環境より入っていきやすそうだったので触ってみました。

導入の方法、公式のチュートリアルをやった感想などをメモしておきます。

Flutter の始め方

Flutter公式 の GET STARTED に詳しく説明があるのでこれに従っていけば OK です。

Flutter 本体のセットアップ

まずは Flutter 本体をダウンロードし、開発環境を整えていきます。

Flutter のリポジトリを clone して PATH を通すという流れです。

これで flutter というコマンドが使えるようになるので、flutter doctor でちゃんとインストールできてるか確認しておきましょう

私の環境では下記のような結果になりました

IntelliJ や VS Code などの開発環境で、必要なプラグインが入っているかもチェックしてくれてるみたいですね。私は IntelliJ 使うつもりだったので、

  • iOS tool chain で入ってないものを brew でインストール
  • IntelliJ で Flutter と Dart プラグインをインストール

だけ追加でセットアップしました。

一応再度 flutter doctor。こんな感じで使う環境は問題無さげな結果になりました。

なお、flutter コマンドは今のセッションでだけ有効となるような PATH の通し方をしましたが、 .bash_profile 等で設定しておいて常に使えるようにした方が良さそうです。

その辺のことも上記リンクに書いてあるので一読しておきましょう。

プロジェクトの作成

上記 GET STARTED のドキュメントでは、ここから Android、iOS の各デバイス向けのビルド・実行の説明が続きますが、その前にプロジェクトを作っておきましょう。その方が確認がスムーズにできるかと思います。

flutter create でプロジェクトを作成できます。

なお、IntteliJ などの IDE からでもプロジェクト作成は行えるようです。詳しくはこちらのリンクを参照。

プロジェクトが作成できたら実行環境のセットアップに戻ります。

実行環境のセットアップ

IDE から実行する場合

IntelliJ を使う場合であれば、先程作成したプロジェクトを IntelliJ で開き、下図のように右上で実行する環境を選択し、 Run を選択すれば実行できます。

結構簡単にそれぞれの環境で実行できました。

ちなみに、Debug で実行すれば、Dart のソースコード上でブレークポイント置けます。

このあたりの環境構築が簡単なのはとてもありがたいですね。

コマンドラインから実行する場合

コマンドラインで実行する場合はそれぞれの環境向けに設定が必要ですが、基本は `flutter run` コマンドを実行すればよいです。

シミュレータで実行する場合は先にシミュレータの方を起動しておく必要があります。

iOS のシミュレータであれば、open -a Simulator コマンドでシミュレータを起動できます。

もし、実行環境の候補が複数ある場合は -d <deviceId> オプションを付けることで、実行環境を指定できます。

deviceId は、実際に実行環境が複数ある状態で flutter run を実行すると下記のように候補が表示されますので、そこから選んで指定すれば OK です。

iPhoneの実機で実行する場合は先に Xcode でプロジェクトファイルを開いて Development Team を選択するなどの手順が必要になります。公式ページに詳しくやり方が書いてあるので、参照してください。

個人的には IDE 使った方法の方が簡単かなと思いますので、以降は IntelliJ を使って開発進めていくことにします。

Flutter 試し書き

環境が整ったら Dart を書いてアプリを作っていきます。
公式にチュートリアル的な物があったので、やってみました。

チュートリアルなぞっただけですが、GitHubにもコード上げてます。

以下、補足と感想などが続きます。公式チュートリアルも合わせてご確認ください。

Flutter で Hello World

(公式の STEP1)

まずはお約束ですが、Flutter で Hello World してみたいと思います。

公式ドキュメントに従って、下記のコードを main.dart に記述します。

実行すると画面中央に Hello World が表示されます。

画面のレイアウトも Dart で書いていく感じですかね。

  • MaterialApp でマテリアルデザインのアプリケーション
  • void main() => runApp(new MyApp());=> は一行で関数を定義する書き方らしい
  • UIのパーツは全て Widget と呼ばれるようです。Scafford でデフォルトのタイトルバーや本体を含んだ Widget が構築できるみたいです。

外部ライブラリを使ってみる

(公式の STEP2)

外部ライブラリの追加は pubspec.yaml という YAML 形式のファイルで行います。

このファイルは Node環境でいう package.json、Gradle 環境で言う build.gradle みたいなものかと思います。

pubspec.yaml の depenencies という項目に、english_words というライブラリを追加してみます。

pubspec.yaml を開くと下図のように右上にヒントが表示されるので、Packages get を選択して必要なライブラリをダウンロードしてきます。

main.dart に戻って、main.dart を書き換えます。

公式ドキュメントそのままのコードなので Gist で貼り付けます。

差分としては、

  • import で english_words パッケージの参照を追加
  • wordPair でランダムな単語ペアを取得
  • Text として取得した単語ペアを画面表示

という感じですね。

上記のように書き換えるわけですが、既にデバッグ実行中の場合、ファイル保存したタイミングで即座に反映されます。

また、右上のイナズマっぽいボタン(Flutter Hot Reload) でも更新されます。

即座に確認できて便利!!

リスト表示

(公式の STEP3, 4)

大概のツール系スマホアプリでは実装するであろう、リスト表示を試してみます。

main.dart 下記のように書き換えます。

Flutter の Widget は StatelessWidget と StatefulWidget の2種類があり、今回からは StatefulWidget を使っています。

StatefulWidget はユーザ操作などの要因で画面の表示内容が動的に変わる場合に使う Widget ですが、このサンプルで StatefulWidget にしたのは、次のサンプルでユーザのボタン操作を実現するためかと思います。リスト表示するだけであれば StatelessWidget のままでも行けそうでした。

リストの作成自体は _buildSuggestions() が該当します。 itemBuilder で行のインデックスが渡ってくるので、それを見て各行の表示内容を決めます。

Dart 言語では _ 始まりの関数・フィールドは、private になります。

このコードではリストの要素数は規定していないので、無限にスクロールできるリストになっています。

Android の ListView、Adapter や iOS の UITableView とか触ってると、これだけのコードでリスト表示ができるがとてもありがたいですね。

細かいですが、このリスト、実際に動かしてみると下図の用な感じになるんですが

Android では最上部に到達すると上に行けないことがわかるマーカー、iOS ではバウンスするという、各 OSでおなじみの UI 表示になります。

Native っぽい感じの UI になるように配慮されてるんですね。

ユーザのボタン操作

(公式のSTEP5)

さきほど作ったリストにボタンを配置してみます。下記のようにコード追加します。

  • trailing でリストの各行の右端にアイコンを追加。ふぁぼっぽいやつ。
  • onTap でタップ時の操作を追加。タップするとふぁぼが赤くなる。

onTap での setState により、RandomWordsState#build が再度呼び出されてUI が更新される仕組みです。
StatelessWidget な MyApp の build は再度呼び出されることはありません。

再び細かいのですが、Android Studio などではおなじみ

こんな感じでアイコンや色が IDE 上にも表示されます。やはり IDE サポートはありがたいですね。

画面遷移

(公式の STEP6)

タイトルバーの右上にアイコンを配置して、タップしたら別画面に遷移するという処理を追加します。

この画面遷移のサンプルでは、ふぁぼったテキストのみを表示するリストを遷移先で表示するというコードになっています。

この画面遷移は、遷移先の画面で 左上のナビゲーションボタンで戻れるようになっています。

テーマの変更

(公式の STEP7)

最後ですが、少しだけ見た目を変更してみます。theme で primaryColor を白に設定するというサンプルです。

タイトルバーが白くなります。同時に、タイトルバーの文字も黒から白に変わります。

さいごに

Flutter、なかなか良い感じです。

Dart言語自体が Java と近い雰囲気もあって、スマホアプリを普段作っている人であれば割とすんなり入っていけるのではないでしょうか。

見た目が Native っぽくなるのも好きです。

気になった点としては、使えるライブラリが揃っているのかという点でしょうか。(主にUI以外の機能に関して)

実は JavaScript のライブラリが使えるのかなと思っていたのですが、Flutter 環境で呼び出す手段が無いように思っています。このあたりの方法、ご存じの方がいらっしゃいましたら教えていただけるとありがたいです。

作りたいアプリが Dart で提供されているライブラリで実現できそうであれば十分検討して良い環境かと思います。

2018/07/30 追記

Flutter でカメラ使うのとかどうやるのかなーと思って試してみました。

2018/07/30 追記ここまで


最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら、Twiter にてフォローいただけるとうれしいです。ブログ更新情報などもお届けします。



この記事をシェアする






りゅーた
フリーランスのエンジニアしてます。Android、iOS アプリの開発、対向サーバの開発、C/C++のライブラリ開発が現在のメイン。趣味はテニス。3児の父。 もっと詳しく

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA