Flutter&Dartで写真が撮れるアプリを作ろう！ハンズオンに参加しました

2018/12/12に株式会社モンスター・ラボで開催された、Flutter&Dartで写真が撮れるアプリを作ろう！に参加させていただきました。そこで得られた知見を共有したいと思います。

Contents

イベント概要

株式会社マンハッタンコードさんと株式会社モンスター・ラボさんの共催ハンズオンです。
https://mht-code.connpass.com/event/109634/

Flutterとは
Googleが作ったiOS/Androidのクロスプラットフォームツールのことです
「Dart」というJavaScriptをより使いやすくした言語で実装できます
プラグインも豊富で、内部APIを呼び出すのも簡単！
これさえあればフロントエンドは完璧！！

事前に準備していただくこと

１、AndroidStudio3.2.xのインストール
→AndroidStudio3.2.xのインストールはこちら
https://developer.android.com/studio/index.html
パソコンにインストールするには時間がかかります。wifiが使える環境でも、インストールに1時間程度かかりますので、インターネット回線が早いご自宅などで事前にインストールしておいてください。

２、Flutterのセットアップ
→ハンズオンをスムーズに行うため、Flutterを動作させるためのセットアップを事前にお願いします。
セットアップ手順はこちら(公式サイト)かこちら(日本語記事)を参考にしてください。
https://qiita.com/ryosomiya/items/9502bdcba202dae1d876
$Flutter doctor
のチェックが全て︎になればおkです！

3、Xcodeのダウンロード(iPhoneユーザーのみ)
→当日作成するアプリの動作確認をするために、iOSユーザーの方は最新版Xcodeのダウンロードをお願いします。ダウンロードはコチラ
https://itunes.apple.com/jp/app/xcode/id497799835?ls=1&mt=12

4、本セミナーで使用する資料のダウンロード
コチラからダウンロードできます。当日は全ての資料を使用しながらハンズオンを進めますので、必ずお手元にダウンロード頂けますようお願いいたします。
https://www.mht-code.com/seminar/Flutter_20181212/Flutter20181212.zip

当日使用するプロジェクト
以下のGithubからクローンします。
https://github.com/dack-team/flutter_camera_handsOn

ハンズオンの流れ

スライドや事前のデータをしっかりと用意いただいていたので、比較的スムーズに進めることができました。
基本的には、AndroidStudioでプロジェクトを作成。その後、androidの場合は実機をUSB接続して動作確認。iOSの場合は、さらにXcodeを立ち上げて端末設定をした後にテスト、という形になります。

Flutterの印象

Android／iOSを一括開発できるのは便利ですね。OS固有の記述の違いもありますが、曖昧にせず明確に支持できるので、非常にわかりやすいと感じました。

例：
if (Platform.isAndroid) { dir = await getExternalStorageDirectory(); // 外部ストレージに保存 } else if (Platform.isIOS) { dir = await getTemporaryDirectory(); // 一時ディレクトリに保存
写真の保存場所、
androidは、getExternalStorageDirectory
iOSは、getTemporaryDirectory