はじめに

Flutter (フラッター) は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークです。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されています。

様々なUIパーツが初めから用意されており、組み合わせることで簡単にUIを実装することができます。

プログラミング言語には「Dart」を使用します。
※JavaScriptやJavaの開発経験者であれば、簡単に理解出来ると思います。

Flutterの開発環境構築とプロジェクトを作成する方法を備忘録としてまとめます。

事前準備

公式ドキュメントや開発環境の構築方法について把握します。

ドキュメント

Flutter

公式サイト : https://flutter.dev/

Dart

公式サイト : https://dart.dev/

ドキュメント

参考にした本

環境構築

GitHub のFlutterリポジトリからソースコードを取得し、必要に応じてブランチまたはタグを変更します。
https://github.com/flutter/flutter

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

.bash_profileにflutterツールのパスを追加します。

#Flutter
$ export PATH_TO_FLUTTER_GIT_DIRECTORY=/Applications/flutter
$ export PATH=${PATH_TO_FLUTTER_GIT_DIRECTORY}/bin:$PATH

PATH_TO_FLUTTER_GIT_DIRECTORY はFlutterのgitリポジトリを複製したパスにします。

次のコマンドを実行して、flutter/binディレクトリがPATHに含まれていることを確認します。

$ echo $PATH

次のコマンドを実行して、flutterコマンドが使用できることを確認します。

$ which flutter

次のコマンドを実行して、セットアップを完了するために必要な可能性のある他のソフトウェアがあるかどうかを確認します
（詳細出力の場合は、-vフラグを追加します）。

$ flutter doctor

実装

新規プロジェクト作成

新しいアプリを作成するには、次のコマンドを実行し、myappプロジェクトの名前に置き換えます。

$ flutter create myapp
$ cd myapp

iOS simulatorで実行する

$ open -a Simulator
$ flutter run

FlutterやDartのパッケージを使用する

FlutterやDartの各種パッケージは、「Dart packages」で探せます。

Dart packages

Flutterでは、外部パッケージなどの依存関係やアプリの設定は pubspec.yaml に記述します。
次のコマンドを実行すると、pubspec.yamlに記載された外部パッケージなどが取得され、使えるようになります。

$ flutter packages get

まとめ

今回はFlutterの開発環境構築を行い、サンプルプロジェクトを作成して、いろいろな動作を検証してみました。
検証からいくつか、メリット・デメリットとして挙げられる点を感じたのでまとめます。

メリット

１つのソースコードで、iOS・Androidの両方で動作するアプリを手軽に開発出来る
クオリティの高いUIが簡単実装出来る
Dart言語は、JavaScriptやJavaの開発経験者であれば、簡単に理解出来る

デメリット

日本での採用事例が少なく、開発者の人口も多くない
オープンソースライブラリや情報が少ない（日本語で書かれた資料が少ない）
OSに依存する機能については、各プラットフォームごとに実装する必要がある

また別で、Flutter と Firebase で、「アプリのアクセス/クラッシュ解析」や「クロスプラットフォームでPUSH通知」や「ログイン認証」などが簡単に実装出来たので、今後まとめていきます。

追記

Flutterプロジェクトに Firebase の設定について、 Flutter アプリに Firebase を追加するにまとめました。

Flutter によるスマホアプリ開発