Flutterでハッカソンに参加して簡単すぎたのでまとめ

参加した大会

学生スマートフォンアプリコンテストという大会。
情報処理学会が主催の大会で、多くの大会と違って、プレゼンが1分という短さでその後ブースで接客をしながら自分らのプロダクトを伝える形式。
研究発表会が同時開催のため、研究者や大学の関係者など審査員も多くの大会と異なる。

今回の採用技術

• Flutter (結構新しい技術)
• Material2.0 (結構新しいデザイン)
• Google Cloud Platform

Flutterとは？

Flutter（フラッター）は、Googleよって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。
FlutterはAndroidやiOS向けのアプリケーションの開発に利用されている。Fuchsiaではアプリケーションの開発は主にFlutterを利用して行われている。
by wikipedia

Material2.0とは？

Google I/Oで発表されたガイドライン。
material.io
Google IO 2018のMaterial Designアップデートまとめ

今回のアイデア

野菜を食べるきっかけになることを目的としたアプリ。
野菜を使用した料理をカメラで撮影して、画像から色を抽出。
抽出した色を使用してコンテンツを提供。
コンテンツの完成でポイントを付与し、付与されたポイントで野菜がもらえる。

構成

ハッカソンなので最小構成。
会場の通信も不安なので通信も最小で済むようにした。
具体的には、ログインとかDB関連の実装は全部globalで管理することでそれっぽい動きになるようにした。

// libraryの定義
library vege.globals;
// import側
import 'package:vege_palette/app/globals.dart' as global;

制作時間

コード書いていたのは1日のみ。
軽く書いて、Android、iosで動くのでとても楽。
DEMOで見れますがFloating Action Buttonの動きなども簡単に綺麗に作れる。

DEMO

大会で作成した「べじぱれっと」
本来は野菜を使用した料理の写真を撮って色を抽出し、絵画の色を復元するアプリです。
Flutterと、Material2.0を採用しました。
作成期間：7日（コードがっつり書いたのは1日）
あと、僕らのためのヘルプページがありますw pic.twitter.com/8LLt8f5fGZ

— 石見 優丞/Yusuke Ishimi (@naro143) 2018年9月26日

CIPS

照明で色の識別が変わってしまうため、ヘルプボタンを作った。
これが意外にブースで説明する時に大きく貢献した。
作りたい状況をこっちで握れるから。

感想

みんな忙しく時間がなかったがコーディングは1日で簡単にやりたいことの実装ができた。
唯一、Floating Action Buttonのアニメーションとかに関してはMediumを漁ったり、公式を見たりしてやりました。
大会当日もいろんな学校の方が聞きに来てくれ、資料が欲しいとまで言っていただきました。
審査員もですが、参加者の方にもとても興味を持っていただけたことが嬉しかったです。