feat: Intro, Login, Signup の画面 UI 作成

[ken-ty]

やりたかったこと

Intro ページ, Login ページ, Signup ページ について, Widget を使って UI をざっくり作る.

やったこと

• 各画面の UI 作成
  • Intro から showModal で Login, Signup のモーダルを呼ぶ. 切り替えは TabController でやっている. https://gyazo.com/81c3b016a6bb475b366e2218ee5f9b27
• 画面遷移調整
  • PasswordReissueConfirmPage から 遷移する際に Login のモーダルを開きたかったので, 画面遷移時の引数を追加. それだけだとなぜか 2重でモーダルでてしまったので, Stateless → StateFulWidget で IntroPage を作成した. https://gyazo.com/4bb57b49be59f1a153db1451da91f2d6

※ ディレクトリ構成変更前に LoginPage という名前で途中まで着手していたが, /login, /signup は モーダルで表現しており, 現在のLoginPageは実質 /intro なので, クラス名も LoginPage→IntroPageに変更した.

やってて楽しくなちゃったので、想定よりレイアウト作り込んでしまった. もっとざっくりでもよかった気がする.

やってないこと

• PasswordReissuePage, PasswordReissueConfirmPage の UI 作成 ( これは 別 PR でやる ) https://gyazo.com/1860de89fd124f898ff28983f7f1d794
• 仕様の変更がありそうかつまだ作らなくても影響ない箇所の実装
  • ロゴや OR SIGN IN WITH
  • 余白や文字サイズ
• キーボード表示させると Intro の Flutter ロゴが動いてちょっと出てくるけど, 一旦無視した https://gyazo.com/8e5f165be278fd62fa905da4c5b03270

懸念

• 16:9 や それより 縦幅の比率が小さい端末で モーダルのレイアウト崩れが発生しそうな点. 現状 余白詰めて表示して, 16:9 でもはみ出ず表示できることを確認.
• キーボードを開くと入力している箇所と被って操作性が悪い点. https://gyazo.com/8e5f165be278fd62fa905da4c5b03270

[ken-ty]

@Mayumi-Nakabayashi さんと meet で以下会話、承認もらってこの PR は一旦マージする

• 16:9 とそれよりも縦長の端末に対応する, 4:3 や タブレット, 折りたたみスマホは一旦対応しない
• デザインがっつり変えるので、 Figma できたら別プルリクで対応する