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

スポンサーリンク

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

イベント概要

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

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

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

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

2、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

まとめ

全体的に、フレンドリーでなごやかなな雰囲気で丁寧に教えていただきました。
多少苦労した箇所もありましたが、なんとか実機上で動作確認できるところまでたどり着きました。ありがとうございました。

スポンサーリンク

シェアする