Maulana Farid Ilahi - Saving Mobile Apps - 32602200088 - Kelas Regular

[Caveman-cell]

https://dribbble.com/shots/16096788-Saving-Mobile-App

lib

core: global_component: Typography.dart
ButtonComponent.dart
ProgressBarComponent.dart
AvatarComponent.dart
NetworkImageLoader.dart
config: main_app.dart
utils: route_utils.dart

data: course: CourseResponse.dart DummyCourses.dart

features: HomeScreen.dart
CourseCardWidget.dart AvatarWidget.dart

Pemetaan

Core

• Typography.dart

  1. Tentukan jenis font yang akan digunakan untuk aplikasi, misalnya menggunakan Google Fonts.
  2. Buat kelas yang mengandung berbagai gaya teks (header, body, caption) dengan parameter seperti ukuran, berat, dan warna.
  3. Ekspor kelas tersebut untuk digunakan di file lain.

• ButtonComponent.dart

  1. Buat widget StatelessWidget atau StatefulWidget untuk tombol.
  2. Tambahkan parameter untuk mengatur warna, teks, dan aksi saat tombol ditekan.
  3. Gunakan GestureDetector untuk menangani interaksi pengguna, dan gunakan Container untuk mendefinisikan bentuk dan gaya tombol.

• ProgressBarComponent.dart

  1. Buat widget StatelessWidget yang menerima proporsional progres sebagai parameter.
  2. Gunakan LinearProgressIndicator untuk menampilkan progress bar.
  3. Tambahkan label untuk menunjukkan persentase progres jika perlu.

• AvatarComponent.dart

  1. Buat widget StatelessWidget untuk menampilkan avatar.
  2. Tambahkan parameter untuk URL gambar atau default image.
  3. Gunakan CircleAvatar dan tambahkan opsi untuk mengganti gambar jika diperlukan.

• NetworkImageLoader.dart

  1. Buat fungsi yang menerima URL gambar sebagai parameter.
  2. Gunakan Image.network untuk memuat gambar dan tambahkan penanganan kesalahan menggunakan ErrorBuilder.
  3. Kembalikan widget gambar yang dimuat atau placeholder jika gagal.

• main_app.dart

  1. Buat kelas utama yang menggunakan MaterialApp.
  2. Atur tema aplikasi dan rute awal menggunakan home dan routes.
  3. Tentukan logika awal yang diperlukan saat aplikasi dimulai.

-route_utils.dart

1. Buat fungsi yang menerima konteks dan nama rute sebagai parameter.
2. Gunakan Navigator.pushNamed untuk mengalihkan ke rute yang ditentukan.

3. Sertakan parameter tambahan untuk melewatkan data jika diperlukan.

   Data

   • CourseResponse.dart
4. Definisikan kelas model untuk kursus dengan atribut yang relevan (misalnya, id, nama, target).
5. Implementasikan metode untuk konversi dari JSON ke objek Dart (dan sebaliknya) menggunakan json_serializable.
6. Pastikan untuk menangani nullability sesuai kebutuhan.

• DummyCourses.dart

  1. Buat file dengan data dummy yang merepresentasikan beberapa kursus, misalnya dalam bentuk daftar objek.
  2. Tentukan beberapa tujuan tabungan dan progres yang sudah ditentukan.
  3. Ekspor daftar ini untuk digunakan dalam pengujian UI.

  Features

• HomeScreen.dart

  1. Buat kelas widget untuk tampilan layar utama, menggunakan Scaffold.
  2. Susun layout menggunakan Column, Row, dan ListView untuk menampilkan informasi total tabungan, daftar tujuan, dan grafik aktivitas.
  3. Integrasikan komponen yang telah dibuat sebelumnya, seperti ProgressBarComponent dan CourseCardWidget.

• CourseCardWidget.dart

  1. Buat widget yang menerima data kursus sebagai parameter.
  2. Gunakan widget Card untuk menampilkan informasi, termasuk nama, target, dan progres dalam format yang mudah dibaca.
  3. Tambahkan interaksi jika diperlukan, seperti onTap untuk navigasi ke detail.

• AvatarWidget.dart

  1. Buat widget yang menampilkan avatar pengguna, menerima URL gambar atau gambar default.
  2. Tambahkan opsi untuk mengganti gambar pengguna ketika diklik.
  3. Gunakan GestureDetector untuk menangani interaksi dan memicu dialog pemilih gambar jika diperlukan.