Flutterでモックを作る（要素を配置）

前回、一瞬で画面が用意できてしまったので、要素を載せていきたいと思います。デザインは最後に整えるとして、必要な要素は下記を読み取っていく感じですね。

こちらが4年前に書き起こしていただいたデザインカンプ

まずは、ホーム画面（メイン画面）・・・爪を噛まなかった日数を表示する表示部と、爪噛まかなった時に押下する「WINボタン」と噛んでしまった時に押下する「LOSEボタン」と、アプリからのメッセージを表示するエリアが必要。

を、フラッターで再現したい。GPT先生にそれとなく要件を伝えてみる。

この画面は設定した目標日数に対して、今何日達成しているかをユーザーに表す画面です。進捗日数が視覚的にわかりやすい画面にしてください。裏側のコードまでは現時点では不要です。

で、授けていただいたコードを実行してみたのがこちら

"視覚的にわかりやすい"を頑張ってくれた感が伝わりますね

僭越ながら修整をお願いしてみる。

いいですね！下記2点修正をお願いします。
・'Progress towards your goal'は削除し、その位置に'$achievedDays out of $targetDays days achieved'を持ってきてください。
・円形のインジケーターで十分わかりやすいので、線形のインジケーターは削除でお願いします。

要素としてはこれで一致しましたね！（ボタンが足りないか）

だいぶ近づいてきたぞ。ということで再リクエスト。対人間だったら最初にまとめていってくださいって感じだと思いますが、対AIだと書き出しながら一個づつ要件を詰め詰めしてくほうが結果的にいいコミュニケーションが取れそう。

いい感じです。下記2点修正お願いします。
・円形のインジケーターをもっと大きくしてください。
・'$achievedDays out of $targetDays days achieved'は端的に'$achievedDays / $targetDays'としてください。

わ〜ほとんど完成じゃないか

ということで、ボタンを足してもらいつつ、表示も微修正。

モックとしては十分ですね！

あとはデザイン反映させるだけですね！なんとなく沼りそうなので、一旦別画面行きます。

続いては、データ画面（バッジ画面）・・・目標達成回数を表示するシンプルな画面です。

これはなんてお願いしたらいいのかな〜と悩みながら、とりあえず下記でリクエスト。

この画面は、過去に目標達成した回数を表示します。 視覚的にわかりやすく達成回数を表示させてください。裏側のコードまでは現時点では不要です。

ふむ。まあ私の指示が悪いですからね。すみません。。

いいですね。達成回数に応じて丸が並ぶような画面にしてみてください。

で、下記をいただく。あ、もうこれでいいですね。ほぼ完成。○の部分を爪のアイコンに置き換えるだけですからね。

備忘メモ：達成日くらいはいれたいかも。先々ここはカレンダー形式にしたい。

最後は、目標設定画面・・・目標値を設定する。プルダウンで値を選択して、決定するボタンをひとつ用意する画面です。

ただ、その前にハンバーガーメニューの中身を整える。

実装するかはさておき、それっぽいのでプロフ編集とお知らせ画面も並べてみる。

で、本題の目標設定画面ですが、下記の指示で

この画面は、目標日数を変更できる画面です。目標日数を10・20・30の3つから選べるようにしてください。決定ボタンを意味する「START」ボタンも配置してください。

できたのが下記。ほぼ一撃必殺。

最初はラジオボタンで作ってきたので、プルダウンに直してもらった。

あとは、メイン画面に戻りますが、「WIN」と「LOSE」ボタンを押下した時に、モーダルを表示するように依頼。

どひゃ〜

え、これあと裏側のコードを書いてデザイン整えたら完成じゃん・・・なんでもっと早くやらなかったんだ・・・

ニューモーフィズム調の現在のデザインをそのままGPTが再現してくれるかは不安ですが、なんとなく行ける気がしている。ニューモーフィズム調で引き続きいいのかはさておき。この辺も案を出してもらえたらいいな〜