flutterとfireabaseを用いて学祭用で使う用のレジアプを制作した時の話をします(完成してないです。すいません;;)

flutterでレジアプリ

こんにちは。flutterでレジアプリを作りました。マジで初心者なので実装方法とかかなりおかしいかもしれませんが、記録として残しておきます。実装とか見たい人もどぞ

アプリ概要

このアプリは、お客さんの注文を聞いて会計入力をするIPad、タブレットなどを操作するアプリ、その注文情報を見て調理する商品をスマホなどで確認するアプリと二つのアプリに分かれています。

ここで分かりやすいように前者をレジアプリ、後者を確認アプリとします。

確認アプリではレジで入力された商品情報を取得する必要があります。
そのため、レジアプリの方で入力された商品情報を一度firebaseのfirestoreに送り、そこから確認アプリでその情報を取得する、という実装にしています。

二つのアプリの実装を軽く説明します。

レジアプリ

以下のような状態遷移になることを目標に制作しました。(アプリ構想時)

状態(丸いやつ)はアプリでの画面を表しており、矢印は、現在の状態からどのような操作をすると次の画面へ遷移するかを表しています。

(DBへ注文情報送信はfiresotreへの送信)
(商品編集と注文履歴はまだ実装してない;;)

それぞれ実装した画面です。

注文

一眼見て操作方法がわかるようなUIの実装を意識しました。売っている商品の情報などもfirestoreから取ってくる実装にしてます。左下のwidgetはカートで、今どの商品を注文したかが簡単にわかる。編集もできるように実装しました。右上の会計ボタンを押すと次の会計画面に行けます。（ちなみに商品がない状態だとアラートが出て移動できない）

会計

こちらもシンプルな実装で、一目見たらわかるよな実装にしました。keypadのOKを押すと次の確認へ進める。

確認

初めは新しいページを制作するつもりでしたが、ウィンドを出す形式の方がシンプル扱いやすかったため採用。会計などが間違っていたら戻れる。文字なども大きくしたためミスも起こりにくいはず...

なるべくモダンで、操作ミスが起こりにくい画面構成にするよう意識して制作しました。

確認アプリ

こちらは簡単な作りになってるので遷移図は省略。1画面で調理待ちと商品の受け取り待ちを管理できるような画面構成にしました。右側に出てくるカード(レジアプリから送られてきた商品情報)をタッチすると受け取り待ちにするかの確認ウィンドが出てくる。さらに右側でカードを押すと商品の受け渡しが完了したことになり、画面から商品が消えるような設計になっている。（文字多くてすいません。あとで書き直します;;）

実装(コード)

かなり長いし、汚いので修正しながら少しずつ更新していきます(時間がなかった；；)

作った感想

初めてのアプリにしては綺麗なUIを作れたしフロントエンド面は個人的に満足。ただ、バックエンドやコードの実装方法が効率の良い方法とは言えないのでまだまだ勉強&修正していきます。
かなり自信がついて良きでした。とりあえずやってみることが大事なことを実感した。