目次

はじめに

Exercise1では、デザインデータを元によく使うWidgetを使って画面を作成していきました。

今回の演習問題では、
あるWidgetを使って一覧画面を作っていきましょう！

アプリでよく登場する一覧画面ですので、
作成方法をしっかりと学んでいきましょう。

早速お題です！
デザインチームから一覧画面のデザインが届きました。
デザインに沿って画面を作成してください。

一覧のデザインを作成するにはどのWidgetを使えば良いでしょうか？
既存のQiita記事や、Konyの公式ドキュメントを参考にしながら解いてみましょう！

制限時間：90分

（"Freepik.com"このカバーはFreepik.comのリソースを使用してデザインされています。）

画像
画像とアイコンはこちらからダウンロードして使用してください。

画像	ロゴ	進む	戻る

カラーコード
画面で使用されいる色については、
カラーコードをご参考ください。

フォント

デザインに使用されているNotoSansフォントはデフォルトに入っていないフォントです。
外部フォントのインポート方法は、こちらを参考にして作成してください。
※Exercise1でインポート済みの方はスキップしていただいて大丈夫です。
▶︎Kony Visualizerに外部フォントを取り込む
それぞれのフォントサイズ・カラーを記載しています。
※以下はpxで表記していますが、モバイルの場合Visualizerでpx指定をすると、
想定より小さめに表示されるため、文字サイズは参考程度にご覧ください。

Visualizerでの実装時、フォントサイズは%指定とし、
デザインファイルと同様のフォントサイズになるよう調整をしてください。